How to create a custom ajax password reset form for wordpress
Recently I had to create a password reset form for one of my project.The default password reset form works great but I needed the form to match theme layout and design of theme .I tried to use wordpress default functions as much as possible. Here is how you can make a custom password reset form for wordpress.
Step 1) THE FORM HTML
Four important things note here
- I have included 4 js files which are required to make the password strength meter work.
$_GET['login']: Saves the username in hidden text field$_GET['key']: Saves the key in hidden text field- And to show password strength meter we have to use a container with id “pass-strength-result”
<div id="pass-strength-result"></div>
Step 2) AJAX CALL ON FORM SUBMIT
Step 3) CHECK & UPDATE USER PASSWORD
Hi Aman Saini! your script seems to be very useful but unfortunately I don’t know the place to put the AJAX code. The reset button simply does nothing when I click on it. Hope you can help me.
I added your php code to my functions.php theme, and the form to a new page. Then the ajax code into /js/reset-user-pass.js and write wp_register_script and wp_enqueue_script like this:
function avia_register_frontend_scripts()
{
$template_url = get_template_directory_uri();
$child_theme_url = get_stylesheet_directory_uri();
//register js
wp_register_script( ‘avia-compat’, $template_url.’/js/avia-compat.js’, array(‘jquery’), 1, false ); //needs to be loaded at the top to prevent bugs
wp_register_script( ‘avia-default’, $template_url.’/js/avia.js’, array(‘jquery’), 1, true );
wp_register_script( ‘avia-shortcodes’, $template_url.’/js/shortcodes.js’, array(‘jquery’), 1, true );
wp_register_script( ‘avia-prettyPhoto’, $template_url.’/js/prettyPhoto/js/jquery.prettyPhoto.js’, ‘jquery’, “3.1.5”, true);
// wp_register_script( ‘wp-mediaelement’, $template_url.’/js/mediaelement/mediaelement-and-player.min.js’, ‘jquery’, “1”, true);
wp_register_script( ‘discount’, $template_url.’/js/discount.js’, ‘javascript’, “1”, true);
wp_register_script( ‘reset_user_pass’, $template_url.’/js/reset-user-pass.js’,’jquery’, “1”, true );
wp_enqueue_script( ‘jquery’ );
wp_enqueue_script( ‘avia-compat’ );
wp_enqueue_script( ‘avia-default’ );
wp_enqueue_script( ‘avia-shortcodes’ );
wp_enqueue_script( ‘avia-prettyPhoto’ );
wp_enqueue_script( ‘wp-mediaelement’ );
wp_enqueue_script( ‘discount’ );
wp_enqueue_script( ‘reset_user_pass’ );
Thank you very much for your help, your code and your time.
Seems like the call to ajax script is working but $( ‘#resetpassform’ ).submit(function(e) doesn’t. If I change this line with: $( ‘.resetpassform’ ).submit(function(e) then the page redirects me straight to /wp-login.php, but without doing anything.
Hope you can help me. Thanks again.
Hi Jboy
Please check in console if you have any js errors on page.
Also see what you are getting in response from ajax call.
Wow! Thank’s for your fast response!!
The console throw the “Uncaught ReferenceError: ajaxurl is not defined
(anonymous function) user-suggest.min.js:1
c jquery.js:3
p.fireWith jquery.js:3
x.extend.ready jquery.js:3
q” error when page loaded.
If I click the “Get New Password” button nothing happens, but if I type “123” as a new password in the two fields and click the button again, then the “Uncaught ReferenceError: ajaxurl is not defined
(anonymous function) reset_pass.js:20
x.event.dispatch jquery.js:4
v.handle” appears.
Seems like cannot found the ajax url? I’m going to take a look at this, I’m total begginer to ajax.
Thank you again!
Finally got it working!! I had to add this:
var ajaxurl = “”;
To my theme header.php. I Don’t know if edit headers in wordpress It’s the best solution, but It’s working.
Thank’s for all, finally the error wasn’t from your code. Everything It’s working properly.
Sorry, the code to header.php:
var ajaxurl = “”;
ajaxurl is js variable which holds the admin-ajax.php path. You can add below code in header.php to make ajax work.
var ajaxurl = "";Better would be to use wp_localize_script() to add ajaxurl to the head.
Where does the $_GET[‘key’] come from to populate the form?
Is the $_GET[‘key’] a wordpress nonce or something else?
Thanks,
David
HI David
The link inside the reset password mail contains the key.
This key is generated by WordPress so that the validity of the link can be checked.
Regards
Aman
Very good solution, but ajax and desable redirect to wp-login.php not want work.
Password is reset just if set action=”/wp-login.php/?action=resetpass&key=&login=”. I try add and wp_localize_script(), but this not help me. Maybe someone have current work example?
Hello Amanisani.
And if I just want to modify the email message, from the default wordpress form for the New Password option, where can I do this?
In advance, thanks for your contribution