0

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.

Improve this question
3
  • What have you already tried?
    – kaiser
    Commented Jul 17, 2012 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
    Commented Jul 17, 2012 at 14:12
  • Doesn't Chris answer work for you? Please, refer to this FAQ item.
    – brasofilo
    Commented Jul 20, 2012 at 8:49

2 Answers 2

Reset to default
2

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>
</div>

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 } ?>
</div>

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

 $(".fancy-zoom").fancybox({
            fitToView   : false,
            width       : 360,
            height      : 320,
            autoSize    : true,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
        });
Improve this answer
1
  • 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
    Commented Jul 20, 2012 at 9:03
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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