Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Create custom user login using AJAX in WordPress

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 751
    Comment on it

    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';
    }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: