Adding login AJAX form to your WordPress

Ajax Login

Want a simple log in form on your page without unnecessary refreshing? I've got just the thing for you.

Usually when building pages like web shops or specialized blogs with user base, you want to have the register or log in form on your page. A CMS like WordPress has all the functionality for logging in and registering embedded in it, but if you were to use just

you’d get redirected to a well known WordPress log in screen

WordPress login screen

WordPress login screen – a bit boring and not that user friendly.

But what if you want a bit better user experience? Wouldn’t it be better to stay on the page while logging in?

HTML preparations

First you’ll need to decide where you want your login button. For me it seems logical that that button is in the header, above the menu. For Twenty Sixteen theme, you can open header.php and add this code right under the begging of the header tag

We’ve just added a top bar with our log in form – if you’re logged in a log out button appears, if you’re not, a log in button appears. Currently, without any styling we’ll get a visible form and button, and we want it to be a bit nicer, no? In your style.css  add

You’ve got yourself a nice button

Login button

Login button – great, now what?

And it would be nice if that button did anything :D Right now not much happens. You’ll need to set up AJAX call, and some JavaScript to manipulate the toggling of the login form, and you’ll need to set up the callback function for the log in as well.

Functions.php code

In our functions.php  we’ll add

We need to enqueue our scripts and localizations first. We need our trusty admin-ajax.php , a redirect link that will point to our home page, and a loading message that will be displayed while the log in process is happening. Next, we want to execute the login action, only if we’re not logged in – it doesn’t do us much good if we have the functionality if we’re logged in already, we want it to execute when we need it – and that’s when we’re logged out.
And lastly, our AJAX callback function that is checking the nonce, storing the login info into an array and then signs us up using wp_signon() function.

JavaScript

Now for the fun part. In our ajax-login-script.js  that we placed in the js/ folder add the following code

First thing we wrote is what will happen when we click our log in box – a modal window will show with username and password – our login form. A bit of simple fading in and out. And on the ‘log in’ button press on the form we’ll execute our AJAX call. Also notice that when you click outside of the modal that your modal will close.

And that’s it. Simple no? Now you’ve got a fully functional AJAX login form that you can style how ever you like.

Log in form

A login form that you can style any way you want :)

If you have any questions let me know in the comments below. I’m planning to add a register functionality next, so stay tuned for that one :) Happy coding!


Also published on Medium.

Join the Discussion