Customizing WordPress Password Reset and Lost Password Forms
Making changes to the WordPress password reset and lost password forms can significantly improve user experience and align with the design of your website. Even though most people use plugins to do this, it is entirely possible to make professional-looking modifications without using a single plugin. This article is going to help website owners customise these forms using code alone and WordPress built-in functions.
Why Customize the Default WordPress Password Reset Forms
The standard WordPress password reset feature functions fine but doesn’t support any customization. Most site owners desire to bring these forms into harmony with your site’s style and branding. There are several compelling reasons for customizing such forms:
- Ensuring a coherent brand experience all across your site
- Aligning the forms to your site design and color palette
- Including additional instructions or security elements
- Enhancing the experience of your site visitors
- Reducing confusion for users who need to reset their passwords
When users need to reset their passwords, they should feel they’re still on your website. The default WordPress forms don’t always match your site’s look and feel, which can create a disconnected experience.
Understanding the WordPress Password Reset Process
Before customizing, it helps to understand how the WordPress password reset works:
- A user initiates the reset by entering their username or email address
- WordPress generates a temporary password reset token and saves it in the user data
- A link with this token is sent to the user’s email
- When the user clicks the link, WordPress checks the token
- If the token is valid, the user can set a new password
This process occurs over several pages and forms. To make this experience customizable, you’ll need to deal with each step separately.
Prerequisites for Customizing Password Forms
Prior to beginning, ensure you have:
- Your WordPress theme files accessible
- Some basic understanding of PHP and WordPress functions
- A backup copy of your website (extremely important!)
- A child theme, if you have a commercial one (to avoid update problems)
Working with code is dangerous. Always back up your site before altering anything. If you do not feel up to code, then use a plugin instead, even though that is not what this article covers.
Step 1: Building Custom Pages for Password Reset
You’ll first need to build separate pages for your custom password reset forms:
- Navigate to your WordPress dashboard
- Create a new page named “Forgot Password”
- Create another page named “Reset Password”
- Publish both pages without content at this time
These pages will be used as containers for your custom forms. You’ll add the actual forms in the next steps.
Step 2: Redirecting Users to Your Custom Pages
To guide users to your own pages rather than the standard WordPress screens, you’ll have to include code in your theme’s functions.php file:
function custom_lost_password_redirect() {
wp_redirect( home_url( 'forgot-password' ) );
exit;
}
add_action( 'login_form_lostpassword', 'custom_lost_password_redirect' );
This code redirects users to your custom “Forgot Password” page whenever they click on the “Lost your password?” link on the login form.
Step 3: Creating the Lost Password Form
Now you need to create a shortcode that will display the lost password form on your custom page:
function custom_password_lost_form( $attributes = null ) {
$attributes = shortcode_atts( array(
'show_title' => true
), $attributes );
return '<div id="password-lost-form">
' . ($attributes['show_title'] ? '<h3>Forgot Your Password?</h3>' : '') . '
<p>Enter your email address and we\'ll send you a link to reset your password.</p>
<form id="lostpasswordform" action="' . wp_lostpassword_url() . '" method="post">
<p class="form-row">
<label for="user_login">Email</label>
<input type="text" name="user_login" id="user_login">
</p>
<p class="lostpassword-submit">
<input type="submit" name="submit" class="lostpassword-button" value="Reset Password"/>
</p>
</form>
</div>';
}
add_shortcode( 'custom-password-lost-form', 'custom_password_lost_form' );
Now edit your “Forgot Password” page and add this shortcode:[custom-password-lost-form]
Step 4: Creating the Password Reset Form
Similarly, you need to create a shortcode for the password reset form:
function custom_password_reset_form( $attributes = null ) {
$attributes = shortcode_atts( array(
'show_title' => true
), $attributes );
if ( is_user_logged_in() ) {
return __( 'You are already logged in.', 'text-domain' );
} else {
if ( isset( $_REQUEST['login'] ) && isset( $_REQUEST['key'] ) ) {
$attributes['login'] = $_REQUEST['login'];
$attributes['key'] = $_REQUEST['key'];
// Check if the reset key is valid
$user = check_password_reset_key( $_REQUEST['key'], $_REQUEST['login'] );
if ( ! $user || is_wp_error( $user ) ) {
return __( 'This key is invalid or has already been used. Please try again.', 'text-domain' );
}
return '<div id="password-reset-form">
' . ($attributes['show_title'] ? '<h3>Pick a New Password</h3>' : '') . '
<form name="resetpassform" id="resetpassform" action="' . site_url( 'wp-login.php?action=resetpass' ) . '" method="post" autocomplete="off">
<input type="hidden" id="user_login" name="rp_login" value="' . esc_attr( $_REQUEST['login'] ) . '" />
<input type="hidden" name="rp_key" value="' . esc_attr( $_REQUEST['key'] ) . '" />
<p class="form-row">
<label for="pass1">New password</label>
<input type="password" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" />
</p>
<p class="form-row">
<label for="pass2">Confirm new password</label>
<input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" />
</p>
<p class="description">' . wp_get_password_hint() . '</p>
<p class="resetpass-submit">
<input type="submit" name="submit" id="resetpass-button" class="button" value="Reset Password" />
</p>
</form>
</div>';
} else {
return __( 'Invalid password reset link.', 'text-domain' );
}
}
}
add_shortcode( 'custom-password-reset-form', 'custom_password_reset_form' );
Add this shortcode to your “Reset Password” page:[custom-password-reset-form]
Step 5: Handling the Password Reset Process
You also need to handle the password reset process and redirect users after they reset their password:
function custom_password_reset_redirect() {
if ( 'POST' == $_SERVER['REQUEST_METHOD'] ) {
$rp_key = $_REQUEST['rp_key'];
$rp_login = $_REQUEST['rp_login'];
$user = check_password_reset_key( $rp_key, $rp_login );
if ( ! is_wp_error( $user ) ) {
// Password reset is happening - let WordPress handle it
// but redirect to our success page afterward
add_filter( 'login_redirect', 'redirect_after_password_reset', 10, 3 );
}
}
}
add_action( 'login_form_resetpass', 'custom_password_reset_redirect' );
function redirect_after_password_reset( $redirect_to, $requested_redirect_to, $user ) {
// Redirect to our custom "password changed" page
return home_url( 'password-reset-success' );
}
You’ll need to create a “Password Reset Success” page to complete this process.
Step 6: Customizing the Appearance of Your Forms
Now that the functionality is in place, you can style your forms to match your website. Add this CSS to your theme’s stylesheet or through the WordPress Customizer:
#password-lost-form,
#password-reset-form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f7f7f7;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
#password-lost-form h3,
#password-reset-form h3 {
margin-top: 0;
color: #333;
}
.form-row {
margin-bottom: 15px;
}
.form-row label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-row input[type="text"],
.form-row input[type="password"] {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 3px;
}
.lostpassword-submit input,
.resetpass-submit input {
background-color: #0073aa;
color: white;
border: none;
padding: 10px 15px;
border-radius: 3px;
cursor: pointer;
}
.lostpassword-submit input:hover,
.resetpass-submit input:hover {
background-color: #005177;
}
Feel free to adjust these styles to match your website’s design.
Step 7: Enhancing Security for Password Reset Forms
Security is important when dealing with password reset forms. Consider adding these enhancements:
// Add a CAPTCHA field to prevent spam
function add_captcha_to_lost_password_form() {
// Simple math captcha example
$num1 = rand(1, 10);
$num2 = rand(1, 10);
$_SESSION['captcha_answer'] = $num1 + $num2;
echo '<p class="form-row">
<label>Security Check: What is ' . $num1 . ' + ' . $num2 . '?</label>
<input type="text" name="captcha_response" id="captcha_response" required>
</p>';
}
add_action( 'lostpassword_form', 'add_captcha_to_lost_password_form' );
// Verify the CAPTCHA
function verify_captcha_on_password_reset( $errors ) {
if ( empty( $_POST['captcha_response'] ) || $_POST['captcha_response'] != $_SESSION['captcha_answer'] ) {
$errors->add( 'captcha_error', 'The security check was incorrect. Please try again.' );
}
return $errors;
}
add_filter( 'lostpassword_errors', 'verify_captcha_on_password_reset' );
This adds a simple math captcha to your password reset form. For a production site, you might want to use a more sophisticated solution.
Step 8: Customizing Password Reset Emails
The default WordPress password reset emails are functional but basic. You can customize them with this code:
function custom_password_reset_email( $message, $key, $user_login, $user_data ) {
$site_name = get_bloginfo( 'name' );
$message = __( 'Hello!' ) . "\r\n\r\n";
$message .= sprintf( __( 'You requested a password reset for your account on %s.' ), $site_name ) . "\r\n\r\n";
$message .= __( 'To reset your password, click on the link below:' ) . "\r\n\r\n";
$message .= network_site_url( "reset-password?key=$key&login=" . rawurlencode( $user_login ), 'login' ) . "\r\n\r\n";
$message .= __( 'If you did not request this, please ignore this email.' ) . "\r\n\r\n";
$message .= __( 'Thanks!' ) . "\r\n";
return $message;
}
add_filter( 'retrieve_password_message', 'custom_password_reset_email', 10, 4 );
This creates a cleaner, more friendly email message and directs users to your custom reset page.
Step 9: Testing Your Custom Password Reset System
After implementing these changes, it’s essential to test the entire password reset process:
- Try requesting a password reset with a valid email address
- Check that you receive the password reset email
- Click the link in the email and ensure it takes you to your custom reset form
- Set a new password and verify you can log in with it
- Test error scenarios (invalid email, incorrect reset key, etc.)
Testing all scenarios is crucial to ensure your custom system works correctly. Pay special attention to security aspects.
Troubleshooting Common Issues
If you encounter problems, here are some common issues and solutions:
- Reset emails not arriving: Check your server’s email configuration. Consider using an SMTP plugin for reliable email delivery.
- Redirect loops: Make sure your redirection code is correct and doesn’t create infinite loops.
- Style not applying: Check that your CSS selectors match the HTML structure of your forms.
- Security tokens not working: Ensure your code correctly handles the WordPress reset keys.
- Form submissions failing: Verify that form action URLs are correct and point to the proper WordPress endpoints.
Conclusion
Customizing the WordPress password reset and lost password forms without plugins requires some coding knowledge, but it gives you complete control over the process and appearance. This approach is ideal for developers who want to create a seamless user experience without adding the overhead of additional plugins.
Remember that working with code carries risks. Always back up your site before making changes, and test thoroughly before making your customizations live. If you’re not comfortable with code, consider using a user management plugin instead, as they provide similar functionality through a more user-friendly interface.
With the steps outlined in this article, you can create a professional, branded password reset experience that matches your website’s design and enhances the user experience for your visitors.
