Though there are lots of plugins to help you create the AJAX login/register forms, I am going to go through the steps of creating your own login/register forms that you can directly put to your theme.
We are going to use many WordPress and Javacript functions here so before reading on, make sure you have solid knowledge. If you are kind of ‘newbies’ or only interested in the final result, it’s fine, I’ve put all the codes together at the end of this post that you can download and use directly.
Let’s do some preparation work.
First, you’ll need to create a new folder in your theme root directory. I named it as
Next create a new file in this new folder, let’s say
ajax-login-register.php. This file will contain the core functions of this tutorial.
Then you should include and require this file. Add below line of codes to your theme’s
functions.php. You may need to change the directory and file name if you are naming it differently.
Now let’s go to the ‘dirty’ part.
Basically we’ll cover following steps.
- Attach the Login/Register form to the footer if user isn’t logged in
- Handle the submitted data from the Login/Register form
- Automatically add the Login/Register link to menu
Attach the Login/Register form to the footer if user isn’t logged in.
Put following to
ajax-login-register.php we created earlier.
We add the form to the footer, right before
</body> tag by using the
wp_footer hook action.
! is_user_logged_in() condition makes sure it only appears when the user isn’t logged in. Also we only display the login/register fields if the site admin has opened the public registration with
wp_nonce_field() displays the nonce hidden form field for security reason. We’ll have to validate the nonce when handling the submitted data with the function
check_ajax_referer() in next step.
Handle the submitted data from the Login/Register form
Also put following to
As aforementioned, before we proceed with the login/register process, we’ll first validate the nonce with
check_ajax_referer(). This function verifies the AJAX request to prevent processing requests external of the blog.
Then we make sure user has filled the fields with required information or we output an array with the error status and message.
After all these, it’s safe to for the user to sign on with
wp_signon() function or register the account with
register_new_user() function. If the user fails to login or register, we’ll also output the error array.
wp_ajax_nopriv_pt_register_member hook, it’s the most important part. If you leave out “nopriv” and use
wp_ajax_pt_register_member then only users that are logged in can access the function.
Create two new files in
user-login.css contains basic styles and
Below codes should also go to
Here we enqueue necessary scripts and styles. We use
wp_localize_script() to localize
Below is some sample styles. You can change it per your own preference.
pt_open_login_dialog is the script to open the login/register form triggered by click on any links that have a
href attribute with either
The latter part is the script to make AJAX request to WordPress according to user actions.
This is the bootstrap framework, we only need modals and advanced buttons components.
By now we have already covered all snippets you’ll need to create an AJAX login/register form. Now you can add a login/register link anywhere you like and once an user clicks it, the form will popup.
- If you want to add the login/register link to a menu, you just need create a custom link menu item and add it to a Menu location. Remember to enter
#pt-loginin the URL field as these two are the trigger to open the form.
- If you want to add the form to a post, you’ll just need to write a simple hyperlink as below.
Automatically add the Login/Register link to menu (Optional)
I know not all of us want to manually add the login/register link. So I am going to tell you how you can automatically add the link to a menu location.
Let’s say if you want to add the link to Primary Menu whose location is
primary, just add following codes to file
Since all themes are not the same, you may want to change the location name based on your specific theme options.
As promised, here is the package you can directly use in your theme.