How to Create a WordPress Login Form Overlay

WordPress is more than just a blogging tool. It can be used as a Content Management System (CMS) for many different purposes. It has a built in system for most things you would have to code yourself, or pay for an expensive custom application. With a little creativity, you can use basic features to power almost anything you want.

One of the most important things to a website with any hopes of establishing a user connection is having user accounts.

Now, blogs get by here by having comments tied to emails, which is similar in a way. But you’re most likely looking to have unique accounts for your site. This was every user can login, logout, edit their profile and have special privileges. WordPress also allows you (as an admin) to control the level and permissions of all other users.

Login Form Overlay

So what exactly is a “login form overlay”? Basically it’s a simple and quick way for users to login from the page that they are on at any given moment, and come back to that page without losing a second. Just open the form, login, and you’re back!

For more experienced users, the question arises: Does this use AJAX? No it doesn’t. We’ll be using a custom form, but putting it through WordPress’ own file, and then redirecting back to where the user was. Here’s the things we’ll be using:

• Lightbox Gone Wild, a modification to LightboxJS done by ParticleTree. This is going to create the overlay where our form will go. It actually opens a new file above the current page.
• Your file editor of choice.

Other than that we’ll be writing our own code, or using code we already have from WordPress.

Example

I have this live in action on my own site. Click here to see the comment form. You don’t have to sign up to use it, but it will show you the overlay.

Setting up Your Theme

We’re going to be editing the actual WordPress theme here. Depending on where you want to put the overlay, that will determine which file you edit. On my site I have it so if a user isn’t logged in, they can bring up the form right above the comment form.

Go to the Lightbox Gone Wild site and download the files. Now upload the “lightbox” folder to your theme folder, and in your header.php file, add the following code before </head>.

1
2
3

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/lightbox/css/lightbox.css" type="text/css" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lightbox/scripts/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lightbox/scripts/lightbox.js"></script>

That’s just going to call the files we need to use the overlay. You can see that it uses Prototype, a Javascript framework you might already have. Check your header.php file before and remove the second line from above if you do have it. If you aren’t sure, don’t worry about it and leave everything the way it is!

The Login File

This is where we’re going to create the form we need to login. We’ll create just a basic HTML form with some PHP, mostly by copying code straight from the source of the regular WordPress login page.

Copy and paste the code below into a new file, name it login.php and upload it to your theme folder. I’ll talk about the additions after the block.

Make sure you change http://www.yourblog.com in the second line to your blog’s address (Including the http:// and with no trailing slash!).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<? 
$blogurl = "http://www.yourblog.com";
$postlink = $_GET['redirect']; 
?>
 
<link rel="stylesheet" href="<?=$blogurl ?>/wp-admin/css/login.css" type="text/css" />
 
<div id="login">
 
<form name="loginform" id="loginform" action="<?=$blogurl ?>/wp-login.php" method="post">
	<p>
		<label>Username<br />
		<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
	</p>
	<p>
		<label>Password<br />
		<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
 
	</p>
	<p class="forgetmenot"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
	<p class="submit">
		<input type="submit" name="wp-submit" id="wp-submit" value="Log In" tabindex="100" />
		<input type="hidden" name="redirect_to" value="<?=$postlink ?>#respond" />
		<input type="hidden" name="testcookie" value="1" />
	</p>
</form>
 
<p id="nav">
<a href="<?=$blogurl ?>/wp-login.php?action=lostpassword" title="Password Lost and Found">Lost your password?</a>
</p>
 
</div>
 
<p id="backtoblog"><a href="#" class="lbAction" rel="deactivate">Close</a></p>
 
<script type="text/javascript">
try{document.getElementById('user_login').focus();}catch(e){}
</script>

First, we have to note that we can’t access WordPress’ functions in this file. We’re loading it on its own on top of another file. This is why you have to set the URL at the top to your blog’s own. We can’t use <? bloginfo(‘url’); ?> or any other built in functionality in this file. You could try to include the necessary files to be able to do this, but we really don’t need to for this.

I’m also including the login form’s stylesheet for extra style. If you want, you can include your normal style sheet and style it your own way. I found the CSS in that file already worked with my design, so I left it.

Linking to The Form

The end is near! Now we just need to link to our form using a special syntax and it’s done. Put this where you want to have the link. Personally, I have mine in comments.php, but you can put it almost anywhere. To activate the overlay, use this link:

1
2
3

<?php if ( $user_ID ) {} else { ?>
<p><a href="<?php echo get_option('siteurl'); ?>/wp-content/themes/<?php echo get_option('template'); ?>/login.php?redirect=<?php the_permalink(); ?>" class="lbOn" title="Log in">Login &raquo;</a></p>
<?php } ?>

Notice how I’m sending a $_GET variable through to the file? It does work a little like AJAX in that way, but in the end we reload the page so all the changes for logged in users can take effect.

Help! It doesn’t work!

Well, it’s expected that you might not be able to get this running smoothly the first time if you’re not comfortable with editing your theme and creating new files within it. Here are some common errors you should double check before asking a question. I’ll answer questions in the comments, but I’d like to minimize the trouble you have to go through.

• You didn’t properly include the files in header.php. You have to make sure these files are working with your site. Double check you uploaded them into the same place you are linking.
• You didn’t add your URL to the login.php code. Make sure you include the http:// and have no / at the end.
• If you changed any of the code yourself, check your edits. Also make sure you’re linking to the same place it’s uploaded. It’s in your theme’s folder, not your main folder!

What Else Can You Do?

Once you have users logging in and out, you can use WordPress and its core features to give them special content, view certain pages. One thing I made is a page where a logged in user can go to see all their comments they’ve made. It’s just a simple page template with some custom code, but that’s a story for another day.

Enjoy this post? Get future updates sent to you for free! Join by email or RSS.

About the Author - Connor Wilson is a freelance web designer specializing in WordPress blogs. His self titled blog muses on design, sports and whatever he wants. Written on 26th August 2008.

Other posts tagged with CMS, JavaScript, Login, Overlay, Tutorial, WordPress.