WordPress Login Form with Lightbox Effect

Follow @tristarweb

Today I found myself needing my WordPress login form to open in a lightbox – this gives a really nice effect for the end user. Once the user enters their information I wanted the form to redirect to a private page for the user to view.

To do this, I used the following plugins and scripts:

  • jQuery
  • Facebox
  • Peter’s Login Redirect

The only thing I installed as a WordPress plugin was Peter’s Login Redirect, the rest I installed manually to give myself a bit more freedom with the code.

Create a Private Page

In WordPress’ admin area, create a page in the Pages section. Before publishing the page click Edit link, next to Visibility: Public. Then click Private. You will only be able to see this page when you are logged in. Usually subscribers can’t see private pages, but I installed a capability manager plugin to allow the to Read Private Pages.

The Code

Once you have installed jQuery, facebox and Peter’s Redirect plugin, all you will need to do is add some code in your template files, wherever you would like the login link to appear.

Facebox allows you to open a div in a lightbox style window. So, all you need to do to make this effect is create a hidden div on your page that contains the login form. You would also need a link to trigger the facebox effect. The code is as follows:

        <p><a rel="facebox" href="#login" title="Login">Login</a></p>

        <div id="login">
            <?php if ( is_user_logged_in() ) { ?>
                <div class="heading">
                    <p>You are already Logged in. <a href="/your-private-page-url/" title="Login">Click here</a> to view the private page.</p>
            <?php } else { ?>
                <div class="heading">
                    <p>Please enter your username and password.</p>
                <?php wp_login_form(); ?>
            <?php } ?>

So, assuming you have set up facebox and it is all working, when you click on the Login link, facebox will open the #login div in a lightbox style window. You can set #login to display:hidden using CSS, this way it will not be visible on the page until the user clicks the login link.

The code above says that if a user is logged in, display a message with a link to your private page, otherwise, display a message and return wp_login_form() – which is the WordPress login form.

The Redirect

That’s great! But how do I redirect my logged in user to the private page? Simple.

Assuming you have already created a new user and installed Peter’s Redirect plugin, just browse to Settings -> Login redirects. Here will be a screen where you can add redirects for users by name, role, capabilities, and all other users. Simply select your user’s username from the first drop down, enter the url to the page you want them redirected to, and click save!

Now if you logout of your admin account, browse to the front end of your web design, and click the login link we created – you should be able to type in your user’s username and password. Once you click to login you should be redirected to the private page that you defined in Peter’s plugin.


Obviously there is a bit of styling involved, but that should get you started! Let me know how you get on.

About Gav Hoffman

Hi, I'm Gav and I try to make sure I am living life as much as possible and loving every minute of it. Designing and developing on a daily basis And lover of all things creative.

4 Responses to WordPress Login Form with Lightbox Effect

  1. Sacremento says:

    15:15 19/03/2011

    Wow, it works great. I have installed the plugin and it is really good, thanks!

  2. asigurari says:

    13:07 05/07/2011

    I have installed something like this on my blog and it is great. Less than 10 minutes took me to have an good looking login form.

  3. asigurari says:

    13:08 05/07/2011

    It took me less that 10 minutes to install it. It looks great on my blog.

  4. Jasper says:

    16:03 30/08/2011

    I am having a hell of a hard time implementing this..
    I knew it would be different with the thesis the i use, but i wasnt expecting this.

    one question i have for you
    If we set the #login to hidden in the style sheet, how is it going to be displayed in the pop-up lightbox….
    Because in my configuration, after hiding it (what is dispay:none…display:hidden does not exist) it displays nowhere, also not on the lightbox popup!

    Let me know,

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please wrap all source code with [code][/code] tags.

Follow Tristar on Twitter