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:

/**
 * Filter to update the password reset email message
 * WordPress customize forgot password email
 */

add_filter( 'retrieve_password_message', 'tutsocean_retrieve_password_message', 10, 4 );

/**

* Filter to update the password reset email message

* WordPress customize forgot password email

add_filter( 'retrieve_password_message', 'tutsocean_retrieve_password_message', 10, 4 );

Step 2 – Add a callback function

Now we have our filter added. The second parameter given “tutsocean_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

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

function tutsocean_retrieve_password_message($message, $key, $user_login, $user_data){

$msg = __( 'Hello!', 'tutsocean_lang' ) . "\r\n\r\n";

$msg .= sprintf( __( 'You asked us to reset your password for your account using the email address %s.', 'tutsocean_lang' ), $user_login ) . "\r\n\r\n";

$msg .= __( "If this was a mistake, or you didn't ask for a password reset, just ignore this email and nothing will happen.", 'tutsocean_lang' ) . "\r\n\r\n";

$msg .= __( 'To reset your password, visit the following address:', 'tutsocean_lang' ) . "\r\n\r\n";

$msg .= site_url( "wp-login.php?action=rp&key=$key&login=" . rawurlencode( $user_login ), 'login' ) . "\r\n\r\n";

$msg .= __( 'Thanks!', 'tutsocean_lang' ) . "\r\n";

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:

function tutsocean_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;
}

function tutsocean_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;">&nbsp;</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;">&nbsp;</td>
        </tr>
        <tr>
         <td style="padding:0 35px;">
          <a href="https://tutsocean.com" title="logo" target="_blank">
           <img width="" src="https://tutsocean.com/wp-content/themes/tutsocean/images/logo-tutsocean.png" title="tutsocean" alt="tutsocean">
          </a>
         </td>
        </tr>
        <tr>
         <td style="height:40px;">&nbsp;</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;">&nbsp;</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;">&nbsp;</td>
        </tr>
       </tbody></table>
      </td>
     </tr><tr>
      <td style="height:20px;">&nbsp;</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>tutsocean</strong></p>
      </td>
     </tr>
     <tr>
      <td style="height:80px;">&nbsp;</td>
     </tr>
    </tbody></table>
   </td>
  </tr>
 </tbody>
</table>

<tbody>

<tr>

<td>

</tr>

<tr>

</tr>

<tr>

</a>

</td>

</tr>

<tr>

</tr>

</tbody></table>

</td>

</tr>

<tr>

<td>

</tr>

<tr>

<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>

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>

</tr>

</tbody></table>

</td>

</tr><tr>

</tr>

<tr>

<p style="font-size:14px; color:rgba(69, 80, 86, 0.7411764705882353); line-height:18px; margin:0 0 0;">© <strong>tutsocean</strong></p>

</td>

</tr>

<tr>

</tr>

</tbody></table>

</td>

</tr>

</tbody>

</table>

This is all you need to Customize Forgot Password Email