Not a member? Register | Lost your password?
Close Panel
 
 

12

Aug

2008

Add a show/hide login panel to your Wordpress theme using Mootools

By Jeeremie. Posted in AJAX / Javascript, Wordpress

This is the second part of my tutorial “Show/hide a nice Login Panel using Mootools 1.2″. In this tutorial, we will now see how to add the show/hide login panel into your Wordpress theme, pretty much like what I did on top of this page (click “login” on the upper-right corner to open the login panel). Before reading any further, read my previous post and come back here when you are done.

The end result:

Here’s what we are going to achieve today:
Show/hide login panel in Wordpress using Mootools 1.2

Step 1: The scripts and images

If you haven’t done it yet, download the source code on my previous tutorial:
Download (38.1 KiB, 3,847 hits)

Copy the “js” folder (all of it!) and paste it in your theme folder (for the sake of this tutorial, we will use the “defaut” Wordpress theme). The path to your “js” folder should be something like http://yoursite.com/wp-content/themes/default/js/.

Copy all the images and save them in the wp-content/themes/default/images/.

Step 2: The Javascript

Open header.php and add the code below in the <head> section:

[-]?View Code HTML4STRICT
<head>
...
<!-- Mootools CORE -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools-1.2-core-yc.js" charset="utf-8"></script>
<!-- Mootools MORE -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools-1.2-more.js" charset="utf-8"></script>
<?php wp_head(); ?>
</head>
Step 3: The HTML/PHP

Now add this code right after the <body> tag (click on [+] to expand the code):

[+]?View Code HTML4STRICT

I should explain a little bit the code before we go on:

  • If you are logged in as admin, you will see the full navigation. (This is done with the code <?php if ( $user_level >= 1 ) : ?> ... <?php endif ?>. Anything you put within this code will only be seen by the admins).
  • If you registered to the site as a subscriber, you will only see the links “Dashboard”, “My Profile” and “log Out”.
  • If you are not logged in (which will definitely happen if you are a first time visitor), you will only see “Hello Guest!” and “Log In”. (Register to this site on top of this page if you want to see how it works).

If you wish to add more links to the top navigation, log in Wordpress and over a link with your mouse (for example: Settings). Look at the url in the status bar (e.g. http://yoursite.com/wp-admin/options-general.php). Copy only /wp-admin/options-general.php and paste it in the code, like this:

[-]?View Code HTML4STRICT
<?php if /* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
<li>|</li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-general.php">Settings</a></li>
...
<?php endif // $user_level >= 1 ?>

You can add as many links as you want. The only limit is the width of your site or your screen resolution.

Step 4: The CSS

Open style.css in a text editor and paste at the bottom the code below (click on [+] to expand the code):

Step 5: Wordpress Settings

You will need to follow one more step before you are done. Log in to Wordpress, select “settings”, then scroll down to “membership” and select “Anyone can register”. Click save and you should be done. Open your site in your browser and you should see the top navigation. Click on “login” to slide the panel into view.

Done!

Troubleshooting

Not working yet? There could be a couple of things that would stop the script from executing. Here’s a few questions that might help you debug it:

  • Have you enabled Javascript in your browser?
  • Do you use another Ajax framework on your site (Jquery for example)?
  • Is Mootools compatible with your plugins?
  • Is the path to the javascript correct? (E.g. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools-1.2-core-yc.js" charset="utf-8"></script>)
  • Do you use a modern browser such as Firefox 3, Opera or Safari? If not, maybe it is time to upgrade! This script works fine in Firefox 2+, IE6+, Safari, Opera, Netscape. However, I didn’t test it on a Mac or Linux.
Update

In answer to Thomas’ comment, I explain below how to add avatar next to “My Profile” in the navigation after user logged in. Here’s how to do:

Replace the code below in our script…

[-]?View Code HTML4STRICT
<li>|</li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">My Profile</a></li>

… by:

[-]?View Code HTML4STRICT
<li>|</li>
<li><a style="padding-left: 40px;" href="<?php bloginfo('url') ?>/wp-admin/profile.php">
  <?php global $user_email, $userdata;
    get_currentuserinfo();
    if(function_exists('get_avatar')) {
      echo '<span class="NavAvatar">' . get_avatar($user_email, '16').'</span>'; //display user's Avatar
      echo($userdata->user_login); //Display user's name
    }
  ?>
</a></li>

Add this code into style.css:

span.NavAvatar {
	position: absolute;
	top: 3px;
	left: 10px;
	padding: 1px;
	border: 1px #000 solid; /*Change border color*/
}

Last, add “position:relative;” to “#top ul.login li”:

#top ul.login li {
 	position: relative;
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 38px;
  	background: url(images/login_m.jpg) repeat-x 0 0;
}

Here’s a screenshot of an avatar display on this site after you logged in:

Thanks Thomas for the Avatar’s idea. That was a good one!

Technorati Tags: , , , , , , , , ,

Popularity: 22% [?]

 

Related posts

| Subscribe to Feed | Email the author

45 Responses to “Add a show/hide login panel to your Wordpress theme using Mootools”

  1. 1
    » Add a show/hide login panel to your Wordpress theme using Mootools Says:
    August 12th, 2008 at 12:18 pm

    [...] can read the rest of this blog post by going to the original source, here [...]

  2. 2
    Wifsimster Says:
    August 12th, 2008 at 2:06 pm

    Merci pour cet article, ça permet d’étoffer la barre de login un peu plus ;)

  3. 3
    Thomas Clausen Says:
    August 12th, 2008 at 7:09 pm

    It works like a charm, and it looks damn cool. The only problem is the user levels. You have to be user level 8 to use plugins and user level 5 to manage pages: http://codex.wordpress.org/User_Levels

    Maybe, to make it even cooler, you could put a gravatar in there, if a user is logged in, and has a gravatar of cause…

  4. 4
    shakaran Says:
    August 13th, 2008 at 6:34 pm

    A plugin for Wordpress about it would be pretty good.

  5. 5
    sandlog Says:
    August 14th, 2008 at 7:51 pm

    great piece of code.
    i wanted to know how i could add a piece that would check if the user is logged in or not and if they are it would display a link, if not it wouldn’t show up.

    let me know if you could show me how.

    this is my code
    <a href=”">rss feed</a> | | <a href=”/wp-admin/options-general.php”>Dashboard</a>

    But i only want to show the dashboard link if the user is logged in.

    thanks!

  6. 6
    Jeeremie Says:
    August 15th, 2008 at 9:05 am

    It is what the code does. Look, the code below will display links when user is not logged in:

    [-]?View Code HTML4STRICT
    <?php } elseif (get_option('users_can_register')) { ?>
<!--Toggle effect (show/hide Login form) -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fx.slide.js"></script>
 
	<!-- ... else, display user navigation below: -->
	<!-- login -->
	<ul class="login">
		<li class="left">&nbsp;</li>
		<li>Hello Guest!</li>
		<li>|</li>
		<li><a id="toggleLogin" href="#" rel="nofollow">Log In</a></li>
	</ul> <!-- / login -->
<?php } ?>

    … And the following code will display links when user is logged in:

    [+]?View Code HTML4STRICT