Create a Custom Login Page In WordPress

Here we will explain to you how to create a custom login page in WordPress. This tutorial will help for making the custom front-end page where your subscriber, author, and many other roles of users will log in to the system.

Step 1)

Make one template page in the WordPress active theme folder and put the below code there.

<?php
/*  Template Name: Login Template */
get_header();
 

?>
<div class="wrapper">
 	<div class="choko_login_box">
		<form id="login" action="login" method="post" class="choko_login_form">
			<div class="choko_login_msg_ctn"><p class="status"></p></div>		
			<div class="choko_login_row_ctn">
				<label for="username">Username<span>*</span>:</label>
				<input type="text"  name="username" id="username" />
			</div>
	        <div class="choko_login_row_ctn">
				<label for="password">Password<span>*</span>:</label>
				<input type="password"  name="password" id="password" />
			</div>
	        <a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Lost your password?</a>
	        <input class="submit_button" type="submit" value="Login" name="submit">
	        <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
	    </form>
 	</div>
</div>
<?php get_footer() ?>
<style>
	.choko_login_box{margin: 0 auto;width: 50%;}
	.choko_login_row_ctn{margin-bottom: 15px;}
	.choko_login_row_ctn label{display: block;margin-bottom: 10px;}
	.choko_login_row_ctn input{width: 97%;border-radius: 0}
	.choko_login_error_msg{color: red;margin-bottom: 15px;}
</style>
<script>
	jQuery(document).ready(function($) {
    $('form#login').on('submit', function(e){
        $('form#login p.status').show().text(ajax_login_object.loadingmessage);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_login_object.ajaxurl,
            data: { 
                'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
                'username': $('form#login #username').val(), 
                'password': $('form#login #password').val(), 
                'security': $('form#login #security').val() },
            success: function(data){
            	if(data.loggedin == false){
            		$('form#login p.status').html("<div class='choko_login_error_msg'>"+data.message+"</div>");
            	}else{
            		$('form#login p.status').html(data.message);
            	}
                if (data.loggedin == true){
                    document.location.href = ajax_login_object.redirecturl;
                }
            }
        });
        e.preventDefault();
    });

});
</script>

Step 2)

Now make a login page in wp-admin/add new page. and select the "Login Template" as a template page. Update your page.

Step 3)

In your function.php file, put the below Ajax code for login.

function ajax_login_init(){

    wp_register_script('ajax-login-script', get_template_directory_uri() . '/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' );
}

// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
    add_action('init', 'ajax_login_init');
}

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

    die();
}

Step 4)

Now visit your page in the front end; it will display the custom login form.