WordPress AJAX Login and Register without a Plugin

WordPress AJAX Login and Register without a Plugin

We can implement WordPress AJAX Login and Register without a Plugin. This tutorial will assist to let you do it in right manner with some additional features too, including

Best practice techniques
Both forms in popup windows
AJAX Login and Register without a Plugin
Inbuilt client side form validation with jQuery
Opening login/register form from link given in another popup

Update (January 12, 2015): I have written a post to add Forgot Password with AJAX functionality in code & steps mentioned here. Have a look over that tutorial too and download improved files there after reading this post.

So let’s do it right…

The Concept

There’s a couple of ways to implement login or register on your website. You could create separate Pages called Login and Register and display the form on empty pages with page-login.php and page-register.php templates respectively (kind of what you have by default when visiting /wp-admin). Another is to keep the forms visible all the time above the header or in the sidebar. Third and the option we are using here is to call a login/register box when you click on a given button/link. Moreever you can easily apply the AJAX technique given here on any concept you want.

IMPORTANT: Please note that if you have already installed any other AJAX Login plugin then ensure to deactivate that first.

The Form

We have created the both forms in a separate file called ajax-auth.php and called it for not logged in users using get_template_part() function in WordPress. Create a file ajax-auth.php inside your active theme’s directory and put the code given below in that.

The wp_nonce_field function creates a hidden field with ID “security” and value “ajax-login-nonce” in hashed form for login form. The same is acceptable for register form, a hidden field with ID “signonsecurity” and value “ajax-register-nonce”. We are using required and email classes to perform jQuery validation.

We also need login and signup buttons, so place that anywhere you want.

Styling the boxes

This is the required CSS that you have to put inside a new file called ajax-auth-style.css and place the file in css folder of your current theme.

Sending user info via AJAX

Next part is the “login” and “signup” buttons show our form, validate and send the form data with AJAX to the function (which we will define in the next and last step).

We are using jquery.validate.js for client side validation of forms and processing. Download this file from the link given at the end of this article and place this file inside your js folder of active theme.

Also Create a file called ajax-auth-script.js and place it inside your js folder of active theme as well.

Handling the AJAX Request

On the basis of data received we have to notify the user that login/registration was successful and perform the login or just notify him that his data is incorrect.

First I created a new folder libs inside theme folder and then created file custom-ajax-auth.php with all of these code below and saved file inside libs folder. I will call this file in functions.php for server side processing.

Open functions.php file of your theme and place the line there:

Function ajax_auth_init()

We have registered and enqueued necessary CSS and JS file here and created a JS object called ajax_auth_object and enable the users with no privileges (not logged in) to call our functions as well.

The wp_ajax_nopriv_ajaxlogin WordPress hook is important part to note. If you leave out “nopriv” and use wp_ajax_ajaxlogin then only users that are logged in can access the functions.

Rest of the functions are self explanatory. They collect the data received from POST method, check if the nonce is valid and then tries to perform user register and/or login with the received data.

Congratulations! You have nice looking AJAX login and register forms now, powered with jQuery validation. You can perform WordPress AJAX Login and Register without a Plugin now.

Update (January 12, 2015): I have written a post to add Forgot Password with AJAX functionality in code & steps mentioned here. Have a look over that tutorial too and download improved files there after reading this post.

Download Zip

Included: ajax-auth-style.css, jquery.validate.js, ajax-auth-script.js, ajax-auth.php, custom-ajax-auth.php

You Might Interested In