Forgot Password with AJAX in WordPress Login and Register

Forgot Password with AJAX in WordPress Login and Register

After getting many requests from visitors to integrate Forgot Password with AJAX in my previous article WordPress AJAX Login and Register without a Plugin I decided to write a post about steps and code to add in that article to include Forgot Password functionality. This article is an improvement over that previous article as well as it will be sure helpful to understand how does the functionality actually work.

Forgot Password with AJAX in WordPress

The form opens as popup when you click ‘Lost password‘ link given inside ‘Login‘ popup and send an email to validated user after setting new password in WordPress database. You can download the complete zip of files at the end of this post to add in your theme to implement AJAX Login, Register and Forgot Password without a plugin and powered with jQuery client side validation.

The Form

Starting from ajax-auth.php file we have added a form there to obtain input by user.

 CSS

To style the input textbox and submit button, we are adding .ajax-auth input#user_login and .ajax-auth input#user_login:focus classes after line numbers 53 and 71 respectively in ajax-auth-style.css and code are highlighted below:

Script 

The script part handles showing the form, validates the textbox, sends information inputted by user to server and notifies user as per the response received through AJAX. Methods added into ajax-auth-script.js are

Handling the AJAX Request 

In custom-ajax-auth.php that does all server side processing, we have added just one line as WordPress action hook to call ajax_forgotPassword() as well as the function itself. So the modified code is:

The code block is self explanatory and we have used  a number of WordPress inbuilt functions here as defined in global wbdb class. We are  trying to match user input with an existing user in database through email first and then username (if input is not an email) as well as added error in case of empty/invalidated or non-existing user.

If a user matches then we tried to assign it a new password, update the database table and attempted to send new password to the user.

NOTE: Please provide a valid email address for sender field ($from at line number 8) otherwise system will use ‘admin@yoursite.com’ as default sender (yoursite.com will get replace with your domain name).

It’s all about embedding Forgot Password functionality in AJAX Login and Register without a Plugin in WordPress.

Download Zip

Included: ajax-auth-style.css, jquery.validate.js, ajax-auth-script.js, ajax-auth.php, custom-ajax-auth.php (updated for Forgot Password with AJAX)

Or if you are intended to just use login and register without a plugin then please refer to this tutorial.

You Might Interested In