How to customize the 2FA user experience

WP 2FA comes with a number of user experience customization options that allow administrators and WordPress website owners to customize the 2FA experience of their users.

In this how-to, we will be covering the user experience customization options included with WP 2FA to help you make sure your users receive the best 2FA experience possible.

Email Settings and Templates

WP 2FA can send 2FA users emails on four different occasions, depending on the user’s setup as well as actions the user may or may not take. The four occasions in which a 2FA user can receive an email are as follows:

  • When a user requests an OOB link
  • When a user requests a login code
  • When a user account is locked due to an expired grace period
  • When a user account has been unlocked

The plugin comes with templates for all four emails, all of which can be configured by an administrator.

To start configuring email options:

  • From the WordPress main menu, click on WP 2FA
  • From the WP 2FA menu options click on Settings
  • From the main page, click on the Email Settings & Templates tab
WP 2FA email settings and templates

Change the ‘from’ email address

By default, emails are sent from the administrator email address as configured in WordPress’ general settings. You can easily change the email address and the display name from which all 2FA emails are sent from here.

Use the email address from the WordPress general settings - Enable this option to keep sending emails from the email address configured in WordPress general settings.

Use another email address - Enable this option to enter a different email address and display. Enter the new values in the corresponding fields.

 To save changes, click the Save email settings and templates button located at the bottom of the page.

To confirm that the plugin can send emails from the configured address, click on the Test email delivery button located under the Email delivery test section.

Email Templates

Under the email templates section, you will find all four emails that the plugin can send. Each email template follows the same structure which includes a subject line and body. Both of these can be freely edited. You may also include any of the available template tags, which allow for dynamic information to be included in the email for an even more personalized experience. 

Template tags

Template tags are information placeholders that allow you to add content dynamically. For example, the {user_first_name} template tag will insert the recipient’s first name dynamically so you do not have to type it in each time. In all, there are nine template tags available across all four emails as follows:

  • {site_url} - Use this template tag to include the website URL as configured in WordPress settings
  • {site_name} - Use this template tag to include the website name as configured in WordPress settings
  • {grace_period}
  • {user_login_name} - Use this template tag to include the user’s login name as configured in WordPress
  • {user_first_name} - Use this template tag to include the user’s first name as configured in the user’s profile page
  • {user_last_name} - Use this template tag to include the user’s last name as configured in the user’s profile page
  • {user_display_name} - Use this template tag to include the user’s display name as configured in the user’s profile page
  • {login_code} - Use this template tag to include the 2FA login code or login URL. Can only (and needs to) be included in the Login OOB code and Login code emails.
  • {user_ip_address} -  - Use this template tag to include the IP address from which a 2FA request code originated. Can only be included in the Login OOB code and Login code emails.

Available email templates

  • Login OOB code email - This email is sent when a user using the Link via email (Out-of-band email) 2FA authentication method is trying to authenticate. Must include the {login_code} template tag as otherwise, the user will not receive the link and thus will not be able to log in.
  • Login code email - This email is sent when a user using the One-time code via email (HOTP) 2FA authentication method is trying to authenticate. Must include the {login_code} template tag as otherwise, the user will not receive the code and thus will not be able to log in.
  • User account locked email - This is an optional email sent to a user whose account has been locked. Check the Uncheck to disable this message option to enable this email to be sent and uncheck it to disable the email from being sent.
  • User account unlocked email - This is an optional email sent to a user whose account has been unlocked. Check the Uncheck to disable this message option to enable this email to be sent and uncheck it to disable the email from being sent.

Email subject - This is the subject line of the email

Email body - This is the body of the email

Send test email - Click the Send test email button to send a test email. The email will be sent to the email address of the administrator configuring the plugin, as set in the WordPress user account.

White labeling

WP 2FA White labeling offers extensive customization options over the look and feel of the 2FA code input page. You can use the WP 2FA white labeling options to change many of the elements that make up the 2FA code page, giving you the opportunity to match your branding colors, fonts, tone, and logo or create an entirely new experience for your users.

To start configuring white labeling options:

  • From the WordPress main menu, click on WP 2FA
  • From the WP 2FA menu options click on Settings
  • From the main page, click on the White labeling tab

Change the background color

Change the background color of the 2FA page by selecting the color that you would like to show. You can choose a color from the palette or by entering the HEX code in the available field.

Change the logo that appears on the 2FA page by uploading the logo that you would like to use instead of the existing one.

Change the text

Change the text that appears on the 2FA code input page by replacing the text available in the text field. Do note that only plain text is allowed here.

Change the font type

Change the font type used in the 2FA code page text by selecting an alternative font from the drop-down menu.

Change the button color

Change the color of the Log in button by selecting the color that you would like to show. You can choose a color from the palette or by entering the HEX code in the available field.

Change the button text

Change the text of the Log in button by replacing the text available in the text field. Do note that only plain text is allowed here.

Last updated on