Home Knowledge Base WP 2FA How to customize the WP 2FA user experience

How to customize the WP 2FA user experience

The white labeling settings in WP 2FA let you replace the plugin’s default text, styling, and logo on every user-facing 2FA screen, so the 2FA login page, the setup wizard, notices, and the user profile area all match your brand. You will find all of them under WP 2FA > White labeling.

Note: On plans other than Enterprise, you can customize only the text fields on the 2FA code page. The Enterprise plan unlocks the full set of white labeling and customization options covered in this guide.

Customize the 2FA code page

The 2FA code page is shown after a user submits their username and password, asking for their verification code. To customize it, go to WP 2FA > White labeling > Customize 2FA code page. The section has two tabs: Edit content and Edit styles.

Edit content

Here are the fields that you can customize on the 2FA code page:

FieldWhat it changes
2FA code page textThe main message shown on the 2FA login screen, prompting the user to enter their verification code.
Customize code page textChoose between one generic prompt for everyone and a message specific to each user’s 2FA method.
Send backup code via email link textThe link on the 2FA code page that sends a backup code by email.
Use backup code link textThe link on the 2FA code page that switches to using a backup code.
Backup code page textShown on the backup-code screen, asking the user to enter one of their backup codes.
Text for logged out users trying to access the 2FA configuration pageShown to logged-out users who open the 2FA setup page.
Email backup page textShown on the email-backup screen, asking the user to enter the code sent to their email.

Most of these fields accept plain text only.

Selecting Show a message that is specific to the method that the user is using under Customize code page text reveals one field per method:

The table below shows which field you need to edit for each 2FA method, that is shown when a user logs in using that specific method.

FieldShown when
2FA via appThe user logs in with an authenticator app.
2FA code over emailThe user logs in with a code sent to their inbox.
2FA code over email (zero-setup email method)The user logs in with the zero-setup email method.
2FA link over emailA login link is emailed and the user must click it to confirm the login.
2FA code over SMSThe user logs in with a code sent to their phone.
2FA with Push Notification – IntroThe user is told to approve the login request in their app.
2FA with Push Notification – Awaiting ResponseThe plugin is waiting for the user to approve the push request.
2FA with Push NotificationThe user opts to enter the code manually instead of approving the push.
2FA with YubicoThe user logs in with a YubiKey.

Here is an example of a customized message shown when a user logs in with a 2FA app verification code:

Edit styles

This section requires the Enterprise plan. By default, the 2FA code page uses the plugin’s own styling, the Customize styling settings adjust or replace it.

You’ll see the following options you can edit:

SettingWhat you can edit
2FA background colorSet the background color of the 2FA code page.
Change logoReplace the logo on the page. Click Select logo to upload an image. Recommended dimensions are 120x120px; larger images will be resized to fit.
Logo linkSet the URL the logo links to.
Font typeSet the font used on the page, chosen from a list of web-safe fonts.
2FA button background colorSet the color of the login button.
Button text labelSet the button text.
Login Custom CSSAdd your own CSS to the code entry screen.
Disable Login CSSThe Disable ALL WP 2FA styling from login page checkbox removes the plugin’s styling entirely so you can style the page yourself.

To verify the result, click Save settings, log out, and log in with a user account that has 2FA configured. The 2FA code page appears after you submit the username and password.

Basically, you can change every aspect of the 2FA login page to fit your branding guidelines, here is an example:

Customize the 2FA setup wizard

This section requires the Enterprise plan. Go to WP 2FA > White labeling > Customize 2FA setup wizard.

The section has five tabs: Welcome Message, 2FA Setup, Backup Method, Reconfiguration, and Customize Styles.

Welcome Message

Under Welcome, initial and generic messages, check Enable “Welcome & initial message” to add an extra slide at the start of the setup wizard, then enter its text in Optional welcome content.

This is optional, but it is a good place for legal disclaimers or support information.

Other generic wizard steps hold two further messages that you can customize: 

  • Prompt when user tries to cancel the wizard – text that is used when the user closes or cancels the wizard
  • Wizard completion – Backup codes not available – text shown when setup is complete, and backup codes are not available.

2FA Setup

Customize 2FA Setup labels and messages contains a General Labels section, which includes 2FA method selection. This is the message shown when a user configures 2FA for the first time.

It supports the placeholder {available_methods_count}, which displays the number of 2FA methods available to that user.

Below, you will see the Method selection label, which lets you rename each method as it appears on the method-selection screen.

Each 2FA method has its own settings, which you can expand to customize the label users see when choosing that method and, where available, the hint text shown with it.

The example below shows the settings for Link via email, where you can edit the method label and the additional guidance displayed to users.

Available methods include: Link via email, Push notification via Authy app, One-time code via SMS (Twilio), One-time code via SMS (Clickatell), One-time password via YubiKey, Zero setup One-time code via email, One-time code via email, and One-time code via 2FA app.

Backup Method

This tab holds the messages users see once the primary method is set up, grouped into three sections:

  • Backup 2FA methods & final steps: Customize the messages shown to users after they set up their primary 2FA method. These options let you edit the text for choosing a backup method, completing backup-code setup, and introducing email backup when email 2FA is available.
  • Backup codes generation: Here you can customize the text shown during backup code setup, including the Backup codes generation intro, Backup codes generated message, Backup email selection option, and Backup code selection option.
  • Wizard completion: shown when 2FA has been configured and no further actions are available.

Reconfiguration

Use these settings to customize the messages users see when they change or reconfigure their existing 2FA method from their profile page.

Each available 2FA method has its own Reconfigure [insert 2FA method] intro field, where you can edit the instructions shown before the user starts the reconfiguration process.

For some methods, such as Authy, Twilio, Clickatell, Link via email, and YubiKey, you can also customize the Service unavailable message shown when that method cannot be used.

These fields support the placeholders {reconfigure_or_configure} and {reconfigure_or_configure_capitalized}, which adapt the wording depending on whether the user is configuring or reconfiguring.

Customize Styles

In the final tab, Customize 2FA setup wizard > Customize Styles, you can configure the following settings:

SettingWhat it does
Enable stylingControls how the 2FA setup wizard is styled. When enabled, the wizard uses WP 2FA built-in styling. When disabled, it uses the styling inherited from your WordPress theme.
Display logoDisplays your logo in the 2FA setup wizard. This option becomes available after you add a logo under Customize 2FA code page > Edit styles.
Help iconAdds a help icon to the 2FA setup wizard. Users can click it to see additional guidance for configuring their 2FA method.
Custom CSSLets you add your own CSS to further customize the appearance of the 2FA setup wizard. Only plain-text CSS is supported, avoid using !important unless necessary.

Four selectors are listed below the Custom CSS field for reference: .wp-2fa-button-primary, .wp-2fa-button-secondary, .wp2fa-modal h3, and .wp2fa-modal p.

To verify your changes, open your own profile page and launch the wizard. Click Configure 2FA if the account has no 2FA yet, or Change 2FA Settings if 2FA is already configured.

Here is an example of a customized 2FA setup wizard with a logo added and the H3 heading font styling changed using Custom CSS:

Customize the 2FA user prompts and notifications

This section requires the Enterprise plan. To customize the messages users see when 2FA is required, approaching the end of the grace period, or needs to be reconfigured, go to WP 2FA > White labeling > Customize 2FA user prompts and notifications.

Only plain text is allowed in these fields:

  • 2FA mandatory notice is shown to users who are required to set up 2FA, warning them to configure it before the grace period ends. Here is an example of the edited text of the 2FA mandatory notice displayed when a user logs in.
  • 2FA reconfiguration mandatory notice is shown to users who must reconfigure their 2FA before the grace period ends. For instance, if an administrator made changes in 2FA policy settings, then the affected users will see this notice:
  • 2FA method unavailable reconfiguration mandatory notice is shown when a user’s current 2FA method is no longer available, asking them to reconfigure 2FA.
Note: The 2FA mandatory notice and 2FA reconfiguration mandatory notice support the {grace_period_remaining} placeholder, which automatically displays how much time the user has left to configure or reconfigure 2FA. Keep the placeholder instead of entering a fixed number of days.

Customize the 2FA user profile page area

This section requires the Enterprise plan. Go to WP 2FA > White labeling > Customize 2FA user profile page area to change the 2FA section that every user sees on their profile page:

  • User profile 2FA configuration area title is the heading shown above the 2FA section. Plain text only.
  • User profile 2FA configuration area description is the short text shown under that heading. Plain text only.
  • Backup codes learn more link is shown next to the “Generate list of backup codes” button when no backup codes are available.

To verify these edits, save your changes and open any user profile page to see the updated section.

Emails and SMS templates

To customize WP 2FA email or SMS templates, go to WP 2FA > White labeling > Customize emails & SMS templates.

The section has three tabs: Email settings, Email templates, and SMS templates. Please note: Email settings are available on the Free plan, while Email templates and SMS templates are available on the Enterprise plan.

For a full guide to customizing the email templates, check our guide on how to change the email templates and text in WP 2FA.

Troubleshooting

Why is my custom 2FA code page message not showing at login?

Go to WP 2FA > White Labeling > Customize 2FA code page > Edit Content and check Customize code page text. If Show a message that is specific to the method that the user is using is selected, WP 2FA will use the message for that specific 2FA method instead of the generic 2FA code page text. 

Edit the field that matches the user’s 2FA method, save the changes, and test again. If the correct message is still not showing, clear your website or server cache and retest in a private browser window.

Why does the 2FA setup wizard not match my website design?

By default, the setup wizard uses WP 2FA’s own styling. To make it inherit your website theme’s styling, go to WP 2FA > White Labeling > Customize 2FA setup wizard > Customize Styles and disable the checkbox Enable our CSS within user wizards.

If you want more control, use the Custom CSS field in the same section to style specific wizard elements.

Why is my logo not showing in the 2FA setup wizard?

The Display logo option uses the logo configured under WP 2FA > White Labeling > Customize 2FA code page > Edit styles. First, upload or select a logo there. 
Then return to WP 2FA > White Labeling > Customize 2FA setup wizard > Customize Styles and enable Display logo.

Why does the White labeling page say the settings are disabled?

This usually means access to the WP 2FA settings has been restricted to a specific administrator, and you are signed in with a different account.

Ask the administrator who has access to either make the change for you or update the restriction settings.

Why are 2FA emails not being delivered or arriving from the wrong address?

Go to WP 2FA > White Labeling > Customize emails & SMS templates > Email settings and run the Email delivery test.
Also check that the configured From address is correct and matches your website domain where possible.

If the delivery test fails, the issue may be related to your site’s email configuration, such as SMTP or hosting mail settings. It is also worth checking whether another security plugin or your hosting provider is blocking outgoing email.

If the issue persists, contact the Melapress support team and include as much detail as possible. For email delivery problems, please include the From email & name you configured, the result of the Email delivery test, and whether other WordPress emails from the site are delivered successfully.

Close the CTA
Were you able to find what you were looking for?