WP Login/Register/Lost Password Show/Hide Toggle

by Isabel Castillo

HTML

<!-- if user is logged in, show logout button -->
<!-- <a href="<?php echo wp_logout_url( get_permalink() ); ?>" id="head_logout" class="button" title="Log out">Log out</a> -->
<!-- if user is logged out, show login and register button -->
<button type="button" id="isa_loginbutton">Log in</button>
<button type="button" id="isa_registerbutton">Register</button>
<!-- in WP, do wp_login_form like this of the following form HTML -->
<!-- <?php wp_login_form(array('form_id'=> 'isa_loginform','value_remember' => true)); -->
<form name="isa_loginform" id="isa_loginform" action="" method="post">
    <p class="login-username">
        <label for="user_login">Username</label>
        <input type="text" name="log" id="user_login" class="input" value="" size="20" />
    </p>
    <p class="login-password">
        <label for="user_pass">Password</label>
        <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
    </p>
    <p class="login-remember">
        <label>
            <input name="rememberme" type="checkbox" id="rememberme" value="forever" checked="checked" />Remember Me</label>
    </p>
    <p class="login-submit">
        <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" />
    </p>
    <p>
        <button id="lostpw">Lost Password?</button>
    </p>
</form>
<!-- Register Form -->
<form name="isa_registerform" id="isa_registerform" action="" method="post">
    <p class="register-username">
        <label for="register_user_login">Username</label>
        <input type="text" name="log" id="register_user_login" class="input" value="" size="20" />
    </p>
    <p class="register-password">
        <label for="register_user_pass">Password</label>
        <input type="password" name="pwd" id="register_user_pass" class="input" value="" size="20" />
    </p>
    <p class="register-password-again">
        <label for="register_user_pass_again">Password Again</label>
        <input type="password"...

CSS

#isa_loginbutton, #isa_loginform #wp-submit, #head_logout, #isa_registerbutton, #isa-wp-register, #wp-submit {
    border: 0px none;
    background: #004990;
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px 11px;
    color: #FFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.22em;
    text-transform: uppercase;
    letter-spacing: -1px;
}
#isa_loginform #user_login, #isa_loginform #user_pass, #isa_registerform #register_user_login, #isa_registerform #register_user_pass, #isa_registerform #register_user_pass_again, #user_login {
    min-height:36px;
}
#head_logout, #head_logout:hover {
    text-decoration:none
}
#isa_loginform, #isa_registerform, #isa_lostpwform {
    display:none
}
/*#isa_loginform p{color:#fff}*/
 #isa_loginbutton, #isa_registerbutton {
    border:0
}
#isa_registerform label {
    min-width:136px;
    display:inline-block
}
button#lostpw {
    border: none;
    outline:none;
    background-color: transparent;
    cursor:pointer;
    text-decoration:underline;
}

JavaScript

jQuery(document).ready(function (jQuery) {

    $("input[type=submit]").click(function (e) {
        e.preventDefault();
    });

    if ('ontouchstart' in window) {
        evt = 'touchstart';
    } else if (window.navigator.pointerEnabled) {
        evt = 'pointerdown';
    } else if (window.navigator.msPointerEnabled) {
        evt = 'MSPointerDown';
    } else {
        evt = 'click';
    }

    // show login form 

    jQuery('#isa_loginbutton').on(evt, function () {
        jQuery('#isa_loginform').slideToggle('fast', function () {

            // Hide Lost PW orm either way
            jQuery('#isa_lostpwform').hide();

            if (jQuery('#isa_loginbutton').text() === 'Log in') {
                jQuery('#isa_loginbutton').text('Hide');
                // hide register button
                jQuery('#isa_registerbutton').hide();
            } else {
                jQuery('#isa_loginbutton').text('Log in');
                // show register button
                jQuery('#isa_registerbutton').show();
            }
        });
    });

    // show register form

    jQuery('#isa_registerbutton').on(evt, function () {
        jQuery('#isa_registerform').slideToggle('fast', function () {

            // Hide Lost PW orm either way
            jQuery('#isa_lostpwform').hide();

            if (jQuery('#isa_registerbutton').text() === 'Register') {
                jQuery('#isa_registerbutton').text('Hide');
                // hide login button
                jQuery('#isa_loginbutton').hide();
            } else {
                jQuery('#isa_registerbutton').text('Register');
                // show login button
                jQuery('#isa_loginbutton').show();
            }
        });
    });

    // show lost pw form

    jQuery('#lostpw').on(evt, function (e) {

        e.preventDefault(); // cancel default behavior


        // hide login form
        jQuery('#isa_loginform').hide();

        // restrore button text
       ...