WordPress Login Form with Lightbox Effect

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

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.

Conclusion

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