...
Tutorials, Wordpress

WordPress Ajax login without using a Plugin

14 August 2018

Here we will see ajax login without using a plugin in WordPress.

1. Template File

Put the code in your template file :


<form id="login" action="login" method="post">
    
<p>Site Login</p>
    <label for="username">Username</label>
    <input id="username" type="text" name="username">
    <label for="password">Password</label>
    <input id="password" type="password" name="password">
    <a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Lost your password?</a>
    <input class="submit_button" type="submit" value="Login" name="submit">
    <a class="close" href="">(close)</a>
    <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
</form>

2. Send the user info via Ajax

Add the following code in function.php file. This file is located in your active theme’s root directory.

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();
}

3. Javascript

Place this code in your JavaScript file.

jQuery(document).ready(function ($) {

// Show the login dialog box on click
    $('a#show_login').on('click', function (e) {
        $('body').prepend('
<div class="login_overlay"></div>

');
        $('form#login').fadeIn(500);
        $('div.login_overlay, form#login a.close').on('click', function () {
            $('div.login_overlay').remove();
            $('form#login').hide();
        });
        e.preventDefault();
    });

// Perform AJAX login on form submit
    $('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) {
                $('form#login p.status').text(data.message);
                if (data.loggedin == true) {
                    document.location.href = ajax_login_object.redirecturl;
                }
            }
        });
        e.preventDefault();
    });

});

That’s it. Now your login with Ajax is ready to use.

Leave a Comments


3 Responses to “WordPress Ajax login without using a Plugin”

    • December 14 ,2018, at 5:29 PM Reply

      Hello there,

      Any idea how to include caching to this code?
      I used your code on my page but if i use plugin like WP Rocket or Swift Performance or W3 Total Cache i have problems on cached pages. Remove nonces from function will fix the problem in my case but it also break security of my page so any idea how to fix this? Also there is good to comment your code on wp_signon($info, false); … becoze if you use HTTPS you should change false to true.. in most of cases modern websites uses SSL certificates..

      Thanks for work and have a good day

    • October 15 ,2018, at 5:15 PM Reply

      thanks for this, but we have problem . after login with this code , if user was admin , can not to go dashboardd and saw white page.
      please help me.
      thanks

      • October 16 ,2018, at 3:30 PM

        Can you provide some more detail regarding this ?