Using jQuery to liven up your WordPress login

When I’m coding a project for a client, I always try make using the site as easy as possible. Whether it be using custom fields to automate the use of images in a post, or coding wp-admin pages to make the writing of posts & pages easier for them to do. Less is more… So in applying this principle, I’m going to show a really quick method of simplifying the clients login process using a jQuery lightbox.

Here’s a demo of what we’re going to do.

Just in case you’ve been coding in a box for the last 10 years, jQuery is a great JS library that has a number of nifty usages. One of its popular plugins is the ‘thickbox‘ and its what we’re going to use now to create a simple means of logging in for you/your clients.

Prepare your site

In your header.php file you need to include 3 files: jquery.js, thickbox.js and thickbox.css. Then upload the included loading.gif animation to your images folder. The includes for these files would look like this:

<script type="text/javascript" src="<? bloginfo('template_directory'); ?>/jquery-latest.pack.js"></script>
<script type="text/javascript" src="<? bloginfo('template_directory'); ?>/thickbox-compressed.js"></script>
<link rel="stylesheet" type="text/css" href="<? bloginfo('template_directory'); ?>/thickbox.css" media="screen" />

NOTE: call the jquery file before the thickbox.js file.

Then open your thickbox.js file and edit the path to your theme’s images folder. It’ll look something like this:

var tb_pathToImage = "/wp-content/themes/yourtheme/images/loadingAnimation.gif";

Ok, now your site is thickbox’d. Nice.

Make it happen

Of the many usages of the thickbox, the one we’re going to use now is the thickbox for Inline Content. In essence, you’re going to have your login form somewhere on your page (preferably in an element that is included on every page on your site like your sidebar) but its going to be hidden by an inline CSS style:

<div id="form" style="display:none;">

Somewhere else on your page, you’re going to have a link (like in your topnav) that when clicked, will open that hidden div/form in the thickbox. This link will have, instead of a URL as its href target, some magic thickbox commands that will summon your hidden login form. The link would be as follows:

<a href= "#TB_inline?height=200&width=200&inlineId=form" title="Login to the WP Guru site">Login</a>

What’s happening here is that the link is calling an inline div that’ll be displayed in a thickbox with the sizes specified and you’re identifying the inline div ID that will be called. Note that class=”thickbox” is critical to the thickbox’s successful usage.

The login form

The actual login form can be simplified down to its core elements so that you have nice neat code made up of only what you need. You can of course tweak this to be just what YOU need. The actual login form is found around line 378 in the wp-login.php file (v2.5).

<div id="form" style="display:none;">
 <form name="loginform" id="loginform" action="http://wpguru.co.za/wp-login.php" method="post"><input type="hidden" name="phpMyAdmin" value="01d7dd3a1764f33b9145cd20ad99db24" />
 <p>
 <label>Username<br />
 <input type="text" name="log" id="user_login" value="" size="20" tabindex="10" /></label>
 </p>
 <p>
 <label>Password<br />
 <input type="password" name="pwd" id="user_pass" value="" size="20" tabindex="20" /></label>
 </p>
 <?php do_action('login_form'); ?>
 <p><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
 <p>
 <input type="submit" name="wp-submit" id="wp-submit" value="<?php _e('Log In'); ?>" tabindex="100" />
 <input type="hidden" name="redirect_to" value="/" />
 <input type="hidden" name="testcookie" value="1" />
 </p>
 </form>
</div>

You can of course style up the div that contains your form with your site logo etc to make the whole login process seem even more bespoke.

TIP: You can set the overlay color of your jQuery thickbox (default set to 75% black) to match your site, in line #39 of your thickbox.css file.