Create a Custom Login Page In WordPress

Create a Custom Login Page In WordPress

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.

25 responses

25 thoughts on “Create a Custom Login Page In WordPress”

  8. flagyl

    Wow! This blog looks just like my old one! It’s on a completely different subject but it has pretty much the same layout and design. Excellent choice of colors!

  12. fluconazole medication

    I am not sure where you are getting your information, but good topic. I needs to spend some time learning much more or understanding more. Thanks for wonderful info I was looking for this information for my mission.

  14. furosemide tablets

    Nice blog here! Also your website rather a lot up very fast! What host are you the usage of? Can I get your associate hyperlink on your host? I desire my site loaded up as quickly as yours lol

  16. buy amoxicillin

    Thanks for the auspicious writeup. It actually was once a entertainment account it. Glance advanced to far brought agreeable from you! By the way, how could we keep up a correspondence?

  21. amoxicillin generic

    I just could not go away your web site before suggesting that I really loved the usual information an individual supply to your visitors? Is gonna be back regularly to check out new posts

Leave a Reply

Your email address will not be published. Required fields are marked *