How to Create a WordPress Login Form Overlay

login-overlay1

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.

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 , , , , , .

Comments

  1. Andy Levy-Stevenson

    26th August, 6:10 am GMT

    Couldn't see the overlay from your link (I'm using FF2.0.0.16 on Windows XP).

  2. Michael Martin

    26th August, 1:34 pm GMT

    Andy,
    Thanks for the warning. Fixed the link now! :)

  3. Christer

    26th August, 7:17 pm GMT

    Hi,
    I Tried this on my Wp MU installment. All work's fine except that the login form is
    not showing up in a lightbox style, more like a regular page.
    Check my URL, i've put the login at the top

    It seems that the Lightbox code doesn't work correctly.
    I checked and double checked, the Lightbox folder is untouched in the themes directory

    Any ideas?

    -Christer

  4. Michael Martin

    26th August, 7:50 pm GMT

    Christer,
    The problem is in the first bit of code you had to paste in. Did you copy it over exactly as it is above?

    Instead of the proper path to the files, the code in your header looks like this:


    The href="" part is pointing to the wrong place.

  5. Christer

    26th August, 8:42 pm GMT

    Hi again,
    yeah, i figured it was there, so i made a '../' to point it up one level...now i put it back and i see it looks for the lightbox folder inside my contempt template folder. I'll just move a copy of it there.

    Thanks alot!

  6. Michael Martin

    26th August, 10:07 pm GMT

    Christer,
    No problem. Hope it works for you now. :)

  7. milo

    30th August, 11:02 pm GMT

    Wrapping the /wp-login.php url in an I-Box works too,
    then the login site is loaded in a div overlay.

  8. Tracey Grady

    1st September, 1:06 am GMT

    Thanks for sharing this tutorial. I will be saving it so that I can make use of it with client websites myself.

  9. micah

    2nd September, 4:01 pm GMT

    Nice! I will definitely use this. Thanks!

  10. micah

    2nd September, 4:02 pm GMT

    Nice! I will definitely use this. Thanks!

    ------------------------------------------------------
    http://www.submitmydesign.com

  11. Ryan

    23rd September, 8:01 am GMT

    Thanks for the tut - I got it to work - kinda.

    A couple of things

    1. I want to use this on the home page for returning members
    IF they are not a member how do I incorporate the registration functionality.

    2. The Log In button is there but once logged in it does not display the user id
    Once logged in the Log In link disappears but it does not give a def indication that one is logged in - Is this line of code "( !$user_ID )" supposed to display the user name or did/am i missing a step.

    3. the "remember me" function - is it supposed to remember me so that I don't have to enter my credentials each time I visit the site or does it play a diff role? Because it is not remembering me (yes cookies are active)

    4. When I enter the wrong login info it goes to the reg wp-login page.
    Is it possible to display that "wrong log in" on the overlay.

    Overall goal here is to eliminate the WordPressyness if that makes sense

  12. Sumesh

    5th October, 10:56 am GMT

    This looks beautiful - lightbox has been my favorite - amazing without being too flashy.

    I remember WPDesigner having a tutorial on placing a login form in sidebar or elsewhere so you can log in from any where - I'd reckon that method is lighter but not as beautiful.

    Maybe you should add the login to PBD - so that we can track our comments and stuff, you know...

  13. Brian

    14th October, 7:44 am GMT

    I've been using lightbox 2 for my images on my blog for some time. I like this implementation of it, and i'm able to use it for a login box on my dev site. I haven't tried yet (for fear of causing a problem), but can I use the wordpress Lighbox plugin with this technique concurrently? Is there a way for me to just use this one instead and combine the functionality?

  14. lauren

    14th October, 7:47 pm GMT

    SWEET!!! got it working. just a note for other who might have the same trouble - /lightbox/ goes in "/themes/mytheme/" not "/themes/". thanks muchly.

  15. serters

    16th October, 3:43 am GMT

    I've been using lightbox 2 for my images on my blog for some time. I like this implementation of it, and i'm able to use it for a login box on my dev site. I haven't tried yet (for fear of causing a problem), but can I use the wordpress Lighbox plugin with this technique concurrently? Is there a way for me to just use this one instead and combine the functionality?

  16. Juan Hernandez

    5th November, 5:30 pm GMT

    This is just a test

  17. Mauricio

    5th November, 5:36 pm GMT

    Hi,

    Currently on my blog when someone wants to leave a comment they have to login first. I would like to make this process less painful using this format of your. I mean, only writting Name, Email and comments.

    Could you please let me know how to achieve this or where to find information about it?

    Thanks a lot.

    Cheers!

  18. Mauricio

    5th November, 5:56 pm GMT

    Hi again, I just figured it out to do this. Anyway thank you for the post it is very useful.

  19. Sox

    14th November, 11:40 pm GMT

    I followed the instructions but it doesn't work:

    http://testsite.noquarterusa.net/

Leave a Comment

Not sure how to get an image with your comment?