WordPress Login in jQuery Popup – How to validate login with jQuery Ajax?

1 Views

I have the WordPress Login form working in the front-end of my website, to allow my users to login without having to visit the wp-login.php or leave the “theme” or the website.

If you goto http://westendmediacentre.com/dev and click login, you can see that I have the form appearing within a jQuery popup. My code for this is as follows:

Read More

Form Code: 

<div class="login-form">
      <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
        <input type="text" name="log" id="log" value="Username<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" class="login-fields" onclick="this.value='';" onblur="this.value=!this.value?'Username':this.value;"/>
        <input type="password" name="pwd" id="pwd" value="Password" size="20" class="login-fields" onclick="this.value='';" onblur="this.value=!this.value?'Password':this.value;"/>
        <input type="submit" name="submit" value="Login" class="login-button" />
        <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
      </form>
</div>

jQuery: 

$('.button-login').click(function() {
    $('.login-box').fadeIn('slow', function() {
    // Animation complete
    });
    $(".login-box").css({'z-index' : '10000'});
    $("#the-lights").css({'display' : 'block'});
    $("#the-lights").css({'z-index' : '1'});
    $("#the-lights").fadeTo("slow",0.7);
});
$('.login-box-close').click(function() {
    $('.login-box').fadeOut('fast', function() {
    // Animation complete
    });
    $("#the-lights").fadeTo("slow",0);
    $("#the-lights").css({'display' : 'none'});
});

This works perfectly, however, if you try logging in with some bad credentials, you get re-directed to a WordPress page giving you the error.

What I would like to do, is have these errors appear within my jQuery popup, so that when you try to login with bad credentials, it gives an error message above or under the form, rather than re-directing to another page with the error shown there.

I tried following this tutorial, however it didn’t work right with my existing code: http://www.tutorialstag.com/custom-wordpress-login-without-using-a-plugin.html

Would appreciate if someone could post a working solution

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. This is all about wordperess’ structure, first of all you should know that even if you supply correct or wrong login credentials your structure redirects user to wp-login.php (because of)
    < ?php echo get_option('home'); ?>/wp-login.php line (i mean you are just posting your username and password to wp-login.php)
    And then if supplied information are correct then wordpress again redirects to user to homepage immediately, otherwise shows an error (with shake effect), you can find all these actions in wp-login.php file.
    There are two different options that you can use.

    • You can hack wp-login.php file like
      if a user didnt supply correct username/password then let him redirect back to http://www.westendmediacentre.com/dev/
    • You can construct your own login mechanism with Ajax validating (i mean you prepare a php file for database connection and retrieving username and password from database and send back results to your Login System)

    If you select second way, you can control this post. That is very useful.

  2. Do NOT edit any core files if possible.
    You will regret that later.

    If you were to write a plugin and the plugin was handling your jQuery popup – then you could do this:

    To make a login form, you can look at this plugin:
    http://wordpress.org/extend/plugins/sidebar-login/

    Then you would just have the bulk of that logic in a PHP file that your AJAX script would post to. If the login failed, the returned data form the PHP file would be sent to your AJAX script and you’d be good.

  4. You are missing this part of the tutorial

    $("#submitbtn").click(function() {

    $('#result').html('<img src="<?php bloginfo('
    template_url '); ?>/images/loader.gif" class="loader" />').fadeIn();
    var input_data = $('#wp_login_form').serialize();
    $.ajax({
        type: "POST",
        url: "<?php echo "
        http: //" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",  
        data: input_data,
        success: function(msg) {
            $('.loader').remove();
            $(' 
<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
        }
    });
    return false;

});