WordPress Customize Forgot Password Email

/

In this tutorial, we will walk you through a very simple process regarding Customize Forgot Password Email. By default, WordPress sends an email with basic information when someone fills in the forgot password form. Default email for forgot password looks something like this.

In general, we skip updating the email templates for this when creating a project for someone because we never consider this in our milestones. If you are the one who considers this as a milestone for the project and wants to Customize Forgot Password Email then this tutorial is for you and believe me it’s very simple.

Prerequisite

  • A WordPress installed
  • An active parent or child theme (as we will add the code to that)
  • Access to the files.
  • SMTP is configured to send and test the emails.

If you have all the above then let’s start!!!

Step 1 – Override filter for an email message

First of all, we need to override a filter called “retrieve_password_message“. To do so, add the following code to your active theme’s functions.php file:

<?php
/**
 * Filter to update the password reset email message
 * WordPress customize forgot password email
 */
add_filter('retrieve_password_message', 'techTutorialsOnline_retrieve_password_message', 10, 4);

Step 2 – Add a callback function

Now we have our filter added. The second parameter given “techTutorialsOnline_retrieve_password_message” is the name of the callback function so now our next step is to add the callback function to the same functions.php file

<?php
function techTutorialsOnline_retrieve_password_message($message, $key, $user_login, $user_data) {
    $msg = __('Hello!', 'techTutorialsOnline_lang') . "rnrn";
    $msg.= sprintf(__('You asked us to reset your password for your account using the email address %s.', 'techTutorialsOnline_lang'), $user_login) . "rnrn";
    $msg.= __("If this was a mistake, or you didn't ask for a password reset, just ignore this email and nothing will happen.", 'techTutorialsOnline_lang') . "rnrn";
    $msg.= __('To reset your password, visit the following address:', 'techTutorialsOnline_lang') . "rnrn";
    $msg.= site_url("wp-login.php?action=rp&key=$key&login=" . rawurlencode($user_login), 'login') . "rnrn";
    $msg.= __('Thanks!', 'techTutorialsOnline_lang') . "rn";
    return $msg;
}

Up to this, the email template/message has been updated. You can make changes to the above callback function to update the message.

See how easy it is and we always neglect this easy step while delivering the project to the client.

If you want the simple email, you can close from here, but if you are interested in sending some beautiful email using some HTML, you can proceed further and make some more changes to the code.

Customize Forgot Password Email with some HTML

For this, you have to neglect the above step 2 and use the following code as the callback function for your filter. Add the following code in your active theme’s functions.php file:

<?php
function techTutorialsOnline_retrieve_password_message($message, $key, $user_login, $user_data) {
    $resetLink = site_url("wp-login.php?action=rp&key=$key&login=" . rawurlencode($user_login), 'login');
    $GLOBALS["use_html_content_type"] = TRUE;
    ob_start();
    require (get_template_directory_uri() . '/emails/forgot_password.php');
    $html = ob_get_contents();
    ob_end_clean();
    return $html;
}

We have added the line to require a file from the emails folder [Line number 5]. This line means you have to create a folder with the name “emails” in your active theme and then create a file with “forgot_password.php”. After creating the file, add the following code to that file and save it.

<table cellspacing="0" border="0" cellpadding="0" width="100%" bgcolor="#f2f3f8" style="@import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700|Open+Sans:300,400,600,700); font-family: 'Open Sans', sans-serif;">
   <tbody>
      <tr>
         <td>
            <table style="background-color: #f2f3f8; max-width:670px;  margin:0 auto;" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
               <tbody>
                  <tr>
                     <td style="height:80px;"> </td>
                  </tr>
                  <tr>
                     <td style="text-align:center;">
                        <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width:670px;background: #1c1a17;border-radius:3px;text-align:center;-webkit-box-shadow:0 6px 18px 0 rgba(0,0,0,.06);-moz-box-shadow:0 6px 18px 0 rgba(0,0,0,.06);box-shadow:0 6px 18px 0 rgba(0,0,0,.06);">
                           <tbody>
                              <tr>
                                 <td style="height:40px;"> </td>
                              </tr>
                              <tr>
                                 <td style="padding:0 35px;">
                                    <a href="https://techTutorialsOnline.com" title="logo" target="_blank">
                                    <img width="" src="https://techTutorialsOnline.com/wp-content/themes/techTutorialsOnline/images/logo-techTutorialsOnline.png" title="techTutorialsOnline" alt="techTutorialsOnline">
                                    </a>
                                 </td>
                              </tr>
                              <tr>
                                 <td style="height:40px;"> </td>
                              </tr>
                           </tbody>
                        </table>
                     </td>
                  </tr>
                  <tr>
                     <td>
                        <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width:670px;background:#fff; border-radius:3px; text-align:center;-webkit-box-shadow:0 6px 18px 0 rgba(0,0,0,.06);-moz-box-shadow:0 6px 18px 0 rgba(0,0,0,.06);box-shadow:0 6px 18px 0 rgba(0,0,0,.06);">
                           <tbody>
                              <tr>
                                 <td style="height:40px;"> </td>
                              </tr>
                              <tr>
                                 <td style="padding:0 35px;">
                                    <h1 style="color:#1e1e2d; font-weight:500; margin:0;font-size:32px;font-family:'Rubik',sans-serif;">You have
                                       requested to reset your password
                                    </h1>
                                    <span style="display:inline-block; vertical-align:middle; margin:29px 0 26px; border-bottom:1px solid #cecece; width:100px;"></span>
                                    <p style="color:#455056; font-size:15px;line-height:24px; margin:0;">
                                       We cannot simply send you your old password. A unique link to reset your
                                       password has been generated for you. To reset your password, click the
                                       following link and follow the instructions.
                                    </p>
                                    <a href="<?=$resetLink ?>" style="background: #1c1a17;text-decoration:none !important;font-weight:500;margin-top:35px;color:#fff;text-transform:uppercase;font-size:14px;padding:10px 24px;display:inline-block;border-radius:50px;">Reset
                                    Password</a>
                                 </td>
                              </tr>
                              <tr>
                                 <td style="height:40px;"> </td>
                              </tr>
                           </tbody>
                        </table>
                     </td>
                  </tr>
                  <tr>
                     <td style="height:20px;"> </td>
                  </tr>
                  <tr>
                     <td style="text-align:center;">
                        <p style="font-size:14px; color:rgba(69, 80, 86, 0.7411764705882353); line-height:18px; margin:0 0 0;">© <strong>techTutorialsOnline</strong></p>
                     </td>
                  </tr>
                  <tr>
                     <td style="height:80px;"> </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

Code explanation

  1. Overall Structure:
    • The email is structured using HTML tables to ensure consistent layout across different email clients.
    • The outermost <table> tag sets the background color of the email to “#f2f3f8” (a light grayish-blue).
  2. Header Section:
  3. Content Section:
    • There are two main content sections, each enclosed in a colored box with rounded corners and a subtle shadow.
    • The first content section has a heading “You have requested to reset your password,” followed by a horizontal line and a paragraph explaining the password reset process.
    • The password reset link is dynamically generated using <?=$resetLink ?>, which suggests that this email template is intended to be processed by a server-side script that substitutes the actual reset link at runtime.
  4. Button:
    • A stylized “Reset Password” button follows the explanatory text. The button is designed with a dark background color, white text, and rounded corners.
  5. Footer Section:
    • The footer section contains a copyright notice with the text “© techTutorialsOnline.”
    • There is some additional spacing to provide visual separation from the content.
  6. Styling:
    • Inline CSS is used to apply styles to various elements. Styles include colors, font sizes, padding, margins, and box shadows.
    • The font styles are imported from Google Fonts, specifically the ‘Rubik’ and ‘Open Sans’ font families.

This is all you need to Customize Forgot Password Email