WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

How do i get Wordpress Login & Forgot password forms in one light-box which can then be displayed inside pages where the user has to be logged in to see the content?

Can i just copy some of the code in wp-login.php and then put it in a light box and alternate between the forms using anchor links as tabs would normally work? So for example, when you click forgot password, the login form is hidden and and the forgot password form becomes visible.

Then when the user enters their details for example, they are logged in and without being redirected to the default login page.I want the login in and the forgot password to all work within the light-box without leaving the page.

share|improve this question
What have you already tried? – kaiser Jul 17 '12 at 12:27
@kaiser I've looked through a couple of wordpress tutorials and most of them are just talking about customising the login form look, not actually creating your own from scratch which i can then throw in a light box without relying on plugins like Modal Login. – Loxzibit Jul 17 '12 at 14:12
Doesn't Chris answer work for you? Please, refer to this FAQ item. – brasofilo Jul 20 '12 at 8:49
up vote 2 down vote accepted

First you need your login form. I put this in header.php.

<div id="inline-form" class="page-login hidden">
<?php wp_login_form( array ( 'redirect' => site_url( $_SERVER['REQUEST_URI'] ), 'value_remember' => true ) ); ?>
    <a href="<?php echo esc_url( wp_login_url() ); ?>?action=register">Register</a><br/>
    <a href="<?php echo esc_url( wp_login_url() ); ?>?action=lostpassword">Lost your password</a>

Next your link to login or register.

<div class="login-logout">
    <?php if ( ! is_user_logged_in() ) { ?>
    <a href="#inline-form" class="fancy-zoom">Login </a> |
    <a href="<?php echo esc_url( wp_login_url() ); ?>?action=register">Register</a>
    <?php } else {
    $current_user = wp_get_current_user(); ?>
    <?php echo  $current_user->user_firstname. ' | ';?> <a href="<?php echo esc_url( admin_url( '/profile.php' ) ); ?>">Update Profile</a> | <a href = "<?php echo wp_logout_url( home_url() ); ?>" title = "Logout" > Log out</a >

    <?php } ?>

Last step is your javascript. I'm using fancybox for this.

            fitToView   : false,
            width       : 360,
            height      : 320,
            autoSize    : true,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
share|improve this answer
Thank you very much @Chris_O, it worked and the great thing is i understood what was going on. Loads of tutorials tend to rely too much on plugins. I love this site. – Loxzibit Jul 20 '12 at 9:03

This plugin called SimpleModal Login works great http://wordpress.org/extend/plugins/simplemodal-login/ It has options for registration and password recovery and provides multiple ways to shaw the login dialog.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.