In this article I will show you how to create a AJAX based login form for wordpress frontend. Before continuing with this article please read my article on integrating AJAX in wordpress.
First let’s see some core wordpress functions which are necessary to build a login and registration system on frontend of wordpress.
wp_signon
wp_signon is used to sign in a user into wordpress. This function needs the username and password for signing in. More on wp_signon.
wp_logout
wp_logout is used to logout a logged in user. More on wp_logout.
wp_create_user
wp_create_user is used to register a new user. More on wp_create_user.
wp_update_user
wp_update_user is used to update the profile information of a registered and logged in user. More on wp_update_user.
get_the_author_meta is used to retrieve profile information of a user. More on get_the_author_meta.
wp_set_password
wp_set_password is used to change password of a registered wordpress user. More on wp_set_password.
Building a AJAX Based Login Form
Let’s build a login form which will be displayed to the users and for logged in users we will display a logout button.
Put this code in theme functions.php file or in a plugin.
function login()
{
$creds = array();
$username = null;
$password = null;
if($_SERVER['REQUEST_METHOD'] == "POST")
{
$username = $_POST["username"];
$password = $_POST["password"];
}
else
{
$username = $_GET["username"];
$password = $_GET["password"];
}
$creds['user_login'] = $username;
$creds['user_password'] = $password;
$creds['remember'] = true;
$user = wp_signon( $creds, false );
if (is_wp_error($user))
{
echo "FALSE";
}
else
{
echo "TRUE";
}
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
die();
}
else
{
header("Location: " . $_SERVER['HTTP_REFERER']);
}
}
add_action("wp_ajax_login", "login");
add_action("wp_ajax_nopriv_login", "login");
function logout()
{
wp_logout();
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
die();
}
else
{
header("Location: " . $_SERVER['HTTP_REFERER']);
}
}
add_action("wp_ajax_logout", "logout");
add_action("wp_ajax_nopriv_logout", "logout");
?>
Put this code wherever you want to display the login form.
Make sure you change the domain name to your own domain name.
if(is_user_logged_in())
{
?>
<style>#login_form{display: none;}</style>
<?php
}
else
{
?>
<style>#logout_form{display: none;}</style>
<?php
}
?>
<form id="logout_form" method="post" action="http://themes.qnimate.com/qplog/wp-admin/admin-ajax.php" onsubmit="event.preventDefault();">
<input type="text" name="action" value="logout" />
<input type="submit" id="logout_submit" />
</form>
<form id="login_form" method="post" action="http://themes.qnimate.com/qplog/wp-admin/admin-ajax.php" onsubmit="event.preventDefault();">
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
<input type="text" name="action" value="login" />
<input type="submit" id="login_submit" />
</form>
<script>
window.document.getElementById("logout_submit").addEventListener("click", function(e){
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://themes.qnimate.com/qplog/wp-admin/admin-ajax.php?action=logout", true);
xhr.onload = function(){
location.reload();
};
xhr.send();
xhr.setRequestHeader("X_REQUESTED_WITH","xmlhttprequest");
}, false);
window.document.getElementById("login_submit").addEventListener("click", function(e){
var xhr = new XMLHttpRequest();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
xhr.open("GET", "http://themes.qnimate.com/qplog/wp-admin/admin-ajax.php?action=login&username="+username+"&password="+password, true);
xhr.onload = function(){
if(xhr.responseText == "TRUE")
{
location.reload();
}
else
{
alert("Please check username and password");
}
};
xhr.setRequestHeader("X_REQUESTED_WITH","xmlhttprequest");
xhr.send();
}, false);
</script>
This login functionality will also work if user has disabled JavaScript. Similarly you can add more actions to wordpress AJAX and create registration, profile, change password etc forms.
