Create Custom Menu in WordPress Dashboard
Complete tutorial on create custom menu in wordpress dashboard. Discover practical examples, implementation tips, and expert advice for WordPress and WooCo
Read More โBuild AJAX-powered WordPress login using custom JavaScript handling form submission without page reload, enqueue jQuery and custom scripts with wp_enqueue_script, localize AJAX URL and redirect URL with wp_localize_script, create server-side handler with wp_ajax and wp_ajax_nopriv actions, implement nonce verification with check_ajax_referer for security, authenticate users with wp_signon function using username and password from POST data, return JSON response indicating success or failure with appropriate messages, redirect on successful login using JavaScript window.location, display error messages for invalid credentials, disable submit button during processing, and create smooth authentication experience with instant feedback and no page refreshes.
To implement Ajax login in WordPress, you can follow these steps: 1. Open the theme's functions.php file in your WordPress theme directory. 2. Add the following code to the file:
// Enqueue jQuery and custom JavaScript
function enqueue_custom_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('custom-scripts', get_stylesheet_directory_uri() . '/js/custom-scripts.js', array('jquery'), '1.0', true);
wp_localize_script('custom-scripts', 'ajax_login_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
'redirect_url' => home_url()
));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
// Ajax login
function ajax_login() {
check_ajax_referer('ajax-login-nonce', 'security');
$info = array();
$info['user_login'] = $_POST['username'];
$info['user_password'] = $_POST['password'];
$info['remember'] = true;
$user_signin = wp_signon($info, false);
if (is_wp_error($user_signin)) {
echo json_encode(array('loggedin' => false, 'message' => __('Wrong username or password.', 'text-domain')));
} else {
echo json_encode(array('loggedin' => true, 'message' => __('Login successful!', 'text-domain')));
}
die();
}
add_action('wp_ajax_ajax_login', 'ajax_login');
add_action('wp_ajax_nopriv_ajax_login', 'ajax_login');
3. Create a new directory in your theme called "js" (if it doesn't exist already) and create a new file called "custom-scripts.js" inside that directory. 4. Open the "custom-scripts.js" file and add the following code:
jQuery(document).ready(function($) {
// Ajax login form submission
$(document).on('submit', '#login-form', function(e) {
e.preventDefault();
var form = $(this);
var submitButton = form.find('input[type="submit"]');
var loginMessage = form.find('.login-message');
var usernameField = form.find('#username');
var passwordField = form.find('#password');
submitButton.attr('disabled', 'disabled');
$.ajax({
type: 'POST',
url: ajax_login_object.ajax_url,
data: {
action: 'ajax_login',
username: usernameField.val(),
password: passwordField.val(),
security: $('input#ajax-login-nonce').val()
},
success: function(data) {
var response = JSON.parse(data);
if (response.loggedin === true) {
loginMessage.html('<p class="login-success">' + response.message + '</p>');
window.location.href = ajax_login_object.redirect_url;
} else {
loginMessage.html('<p class="login-error">' + response.message + '</p>');
}
submitButton.removeAttr('disabled');
},
error: function() {
loginMessage.html('<p class="login-error">' + ajax_login_object.error_message + '</p>');
submitButton.removeAttr('disabled');
}
});
});
});
5. Save the changes and upload the modified functions.php and custom-scripts.js files back to your server. This code enqueues the necessary scripts, including jQuery and custom JavaScript. It sets up the Ajax login functionality, handling the form submission, validating the user credentials, and logging in the user. The login response is returned as JSON and displayed on the login form accordingly. To create the login form in your WordPress theme, you can use the following HTML markup:
<form id="login-form" action="" method="post">
<input type="text" name="username" id="username" placeholder="Username" required>
<input type="password" name="password" id="password" placeholder="Password" required>
<?php wp_nonce_field('ajax-login-nonce', 'ajax-login-nonce'); ?>
<input type="submit" value="Log In">
<div class="login-message"></div>
</form>
Make sure to place this form where you want the login form to appear on your website. Please note that you may need to adjust the file paths and customize the form styling and error/success messages to fit your specific needs.
Search our archives or reach out to our team for solutions and expert advice.