Hello Reader,

If you want to create WordPress custom login using AJAX below example will help you.

You just need to follow the steps one by one.

1.) copy the below line and paste it to header,php file under </head> section.

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js'></script>

2.) Now copy the below code and paste where you want to create login form.

<div class="login-from">
    <form autocomplete="off" id="signinForm" name="signinForm" role="form" novalidate="novalidate">
        <h3>LOG IN FORM</h3>
        <div class="form-group">
            <label>Email ID</label>
            <input type="text" name="email" class="form-control">
        </div>

        <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-control" name="password">
        </div>

        <div class="checkbox form-group">
            <label><input type="checkbox" name="remember"><i>Keep me logged in</i></label>
            <label class="pull-right"><i><a href="#">Forgot Password?</a></i></label>
        </div>

        <div class="form-group">
            <button class="btn" type="submit">LOG IN</button>
            <label class="error-msg"></label>
        </div>
    </form>
</div>

3.) Copy the below code in header.php under "" section just below the position where you have pasted the script mentioned in step 1.

<script type="text/javascript">
$(document).ready(function($)
{
    // Signin form
    $("#signinForm").validate(
    {
        rules: 
        {
            email:          {   required:true, email: true },
            password:       {   required:true }     
        },
        submitHandler: function(form)
        {
            var form_data = $( "form#signinForm" ).serialize();
            $.ajax(
            {
                type: "POST",
                url: '<?php bloginfo( "template_url" ) ?>/ajax-login.php',
                data: form_data,
                success: function(responseData) {

                    if( responseData == 1 ) {
                            redirecturl = "<?php echo site_url() ?>";
                            $( location ).attr("href", redirecturl);
                    }
                    else {
                            jQuery(".error-msg").html(responseData);
                    }

                }
            });
            return false;
        }
    });

});
</script>

4.) Create a page name ajax-signup.php and copy the below code in ajax-signup.php.

<?php

if( isset($_POST) && !empty($_POST) ) {

    require_once('../../../wp-config.php');
    global $wpdb;
    $email     = $_POST['email'];
    $password  = $_POST['password'];
    $remember  = true;
    $user_data     = get_user_by( 'email', $email );

    if(isset( $user_data ) && !empty( $user_data )) {

        $login_data    = array();
        $login_data['user_login']      = $user_data->user_login;
        $login_data['user_password']   = $password;
        $login_data['remember']        = $remember;   
        $user_verify                   = wp_signon( $login_data, false ); 

        if ( is_wp_error($user_verify) ) {
            if( !empty( $user_data->user_login) ) {
                echo "Entered your password is wrong";
            }
            else {
                echo 'Invalid Email id';
            }
        }
        else {
            echo '1';
        }
    }
    else {
        echo 'Invalid Email id or password';
    } //condition isset and is not empty.
}
else {
    echo 'data is not received';
}