WordPress tutorial – AJAX based login and registration modal without using a plugin.

Creating an AJAX-based registration and login modal for your WordPress website can significantly improve user experience by providing a seamless login and registration process. In this tutorial, we’ll guide you through the steps to create a custom login and registration modal without using a plugin. By the end of this tutorial, you’ll have a fully functioning AJAX-based login and registration system for your WordPress site.

Prerequisites:

• Basic knowledge of PHP, JavaScript, and WordPress theme development
• Access to your WordPress theme files

Step 1

Create Custom Login and Registration Forms First, we need to create the login and registration forms using HTML. Place the following code in your theme’s template file where you want the login and registration modals to appear.

<!-- Login Form -->
<div id="ajax-login-form">
    <h3>Login</h3>
    <form id="login-form">
        <input type="text" id="login-username" placeholder="Username">
        <input type="password" id="login-password" placeholder="Password">
        <button type="button" id="login-submit">Login</button>
    </form>
    <div id="login-message"></div>
</div>

<!-- Registration Form -->
<div id="ajax-register-form">
    <h3>Register</h3>
    <form id="register-form">
        <input type="text" id="register-username" placeholder="Username">
        <input type="email" id="register-email" placeholder="Email">
        <input type="password" id="register-password" placeholder="Password">
        <button type="button" id="register-submit">Register</button>
    </form>
    <div id="register-message"></div>
</div>

Step 2

Enqueue JavaScript and CSS Files Next, add the following code to your theme’s functions.php file to enqueue the necessary JavaScript and CSS files.

function enqueue_ajax_auth_scripts() {
    wp_enqueue_script('ajax-auth-script', get_template_directory_uri() . '/ajax-auth.js', array('jquery'), null, true);
    wp_localize_script('ajax-auth-script', 'ajax_auth_object', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('ajax-auth-nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_auth_scripts');

Step 3

Create a JavaScript File for AJAX Functionality Create a new JavaScript file called ajax-auth.js in your theme directory and add the following code:

jQuery(document).ready(function ($) {
    // Login AJAX
    $('#login-submit').on('click', function () {
        var data = {
            action: 'ajax_login',
            security: ajax_auth_object.nonce,
            username: $('#login-username').val(),
            password: $('#login-password').val(),
        };

        $.post(ajax_auth_object.ajaxurl, data, function (response) {
            var result = JSON.parse(response);
            $('#login-message').html(result.message);

            if (result.loggedin) {
                location.reload();
            }
        });
    });

    // Register AJAX
    $('#register-submit').on('click', function () {
        var data = {
            action: 'ajax_register',
            security: ajax_auth_object.nonce,
            username: $('#register-username').val(),
            email: $('#register-email').val(),
            password: $('#register-password').val(),
        };

        $.post(ajax_auth_object.ajaxurl, data, function (response) {
            var result = JSON.parse(response);
            $('#register-message').html(result.message);

            if (result.registered) {
                location.reload();
            }
        });
    });
});

Step 4

Add AJAX Handlers and PHP Functions for Login and Registration Add the following code to your theme’s `functions.php` file to create AJAX handlers and PHP functions for handling login and registration.

// AJAX Handlers
add_action('wp_ajax_nopriv_ajax_login', 'ajax_login');
add_action('wp_ajax_nopriv_ajax_register', 'ajax_register');

// Login Function
function ajax_login() {
    check_ajax_referer('ajax-auth-nonce', 'security');
    $username = $_POST['username'];
    $password = $_POST['password'];

    $user = wp_authenticate($username, $password);

    if (is_wp_error($user)) {
        echo json_encode(array('loggedin' => false, 'message' => 'Invalid username or password.'));
    } else {
        wp_set_current_user($user->ID);
        wp_set_auth_cookie($user->ID);
        echo json_encode(array('loggedin' => true, 'message' => 'Login successful.'));
    }
    die();
}

// Registration Function
function ajax_register() {
    check_ajax_referer('ajax-auth-nonce', 'security');
    $username = $_POST['username'];
    $email = $_POST['email'];
    $password = $_POST['password'];

    $user_data = array(
        'user_login' => $username,
        'user_email' => $email,
        'user_pass' => $password,
    );

    $user_id = wp_insert_user($user_data);

    if (is_wp_error($user_id)) {
        echo json_encode(array('registered' => false, 'message' => $user_id->get_error_message()));
    } else {
        echo json_encode(array('registered' => true, 'message' => 'Registration successful.'));
    }
    die();
}

Conclusion

You have now successfully created an AJAX-based registration and login modal for your WordPress website. This custom solution will provide a seamless login and registration process for your users without relying on a plugin. You can further customize the appearance and functionality of the modal to better fit your website’s design and requirements.