Wordpress Ajax login wont work. I'm using this: https://gist.github.com/cristianstan/10273612 and placed it inside of a jquery Modal.

The problem is it seems to not be working. Everytime I click Login it just redirects to /login-which doesnt exist in my site so it results to an error 404. I'm new with AJAX and I'm not sure what's wrong with it.


<div class="modal" id="login-wfccn">
<img src="/wp-content/themes/medicare/images/wfcnn-logo.png" class="modal-img">
<form action="login" id="login_form" method="post">
  <h3>Member Rep/ Member Login</h3>
  <p><input type="text" class="user_login" placeholder="Username" id="username" name="username"></p>
  <p><input type="password" class="user_pass"  placeholder="Password" id="password" name="password"></p>
  <label class="remember-checkbox">
    <input type="checkbox" value="remember-me" id="remember_me"> Remember me
  <a href="<?php echo wp_lostpassword_url(); ?>" class="lost-pw">Forgot Password?</a>
  <p><input type="submit" value="Log In" class="submit_button" name="submit"></p>
  <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
<a href="#close-modal" rel="modal:close" class="close-modal ">Close</a></form>


add_action( 'init', 'ajax_login_init' );
    function ajax_login_init() {

        wp_register_script( 'ajax-login-script', plugin_dir_url( __FILE__ ) . 'js/ajax-login-script.js', array('jquery') );
        wp_enqueue_script( 'ajax-login-script' );

        wp_localize_script( 'ajax-login-script', 'ajax_login_object', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'redirecturl' => home_url(),
            'loadingmessage' => __( 'Sending user info, please wait...' )

        // Enable the user with no privileges to run ajax_login() in AJAX
        add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );

    // Check if users input information is valid
    function ajax_login() {
        // First check the nonce, if it fails the function will break
        check_ajax_referer( 'ajax-login-nonce', 'security' );

    //Nonce is checked, get the POST data and sign user on
    $info = array();
        $info['user_login'] = $_POST['username'];
        $info['user_password'] = $_POST['password'];
        $info['remember'] = true;

    $user_signon = wp_signon( $info, false );
    if ( is_wp_error( $user_signon )) {
        echo json_encode( array( 'loggedin'=>false, 'message'=>__( 'Wrong username or password!' )));
    } else {
        echo json_encode( array( 'loggedin'=>true, 'message'=>__('Login successful, redirecting...' )));



jQuery(document).ready(function($) {
// Perform AJAX login on form submit
    $('form#login_form').on('submit', function(e){
        $('form#login_form p.status').show().text(ajax_login_object.loadingmessage);
            type: 'POST',
            dataType: 'json',
            url: ajax_login_object.ajaxurl,
            data: { 
                'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
                'username': $('form#login_form #username').val(), 
                'password': $('form#login_form #password').val(), 
                'security': $('form#login_form #security').val() },
            success: function(data){
                $('form#login_form p.status').text(data.message);
                if (data.loggedin == true){
                    document.location.href = ajax_login_object.redirecturl;

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.