How to allow users to configure 2FA from a custom website page

In certain setups, WordPress users may not have access to the WordPress dashboard area (wp-admin). For example, this is common when running a WooCommerce/eCommerce site, a membership website, or some form of custom solution in which users access a custom user dashboard or profile page.

In such cases, WP 2FA offers two solutions for administrators who want their users to configure and manage WordPress two-factor authentication – a frontend 2FA settings page and shortcodes. You should use the frontend 2FA settings page if you want WP 2FA to create the page from where users can set their 2FA. On the other hand, you should use the shortcodes if you want to add the 2FA setup form to an existing page.

Enabling the frontend 2FA settings page

If you’d like WP 2FA to create a 2FA settings page that allows users to set up their 2FA, kindly do the following:

1. Go to WP 2FA > 2FA Policies > Sitewide 2FA policies > User Access Settings tab.
2. Scroll down to Frontend settings page and turn on Enable frontend 2FA settings page.
3. Under Frontend 2FA settings page URL, type the URL slug you’d like to use (for example, 2fa-settings). WP 2FA will create this page automatically.
4. Optionally, set a Redirect URL in this same section to send users somewhere specific once they finish setting up 2FA from this page. This overrides the general redirect setting described below, but only for users who go through this particular page.
5. Click Save Settings.

Note: If a specific user role has custom policies enabled (WP 2FA Premium), that role gets its own Frontend settings page section under its own User Access Settings tab, which takes priority for users in that role.

Separately, further down the same User Access Settings tab, you’ll also find a standalone Redirect users after 2FA setup section with its own Redirect URL field. This is the general redirect used whenever a user finishes setting up 2FA. It’s left blank by default, which simply returns users to the page they started from.

Setting up the page

As soon as you save these settings, WP 2FA automatically creates the page at the slug you chose.

Click View Page from the same settings section any time you want to see it live, or Edit Page to open it in the block editor.

Here is an example of a page created:

Customizing the page

The page WP 2FA creates simply contains the plugin’s setup-form shortcode, so you’re free to customize it exactly like any other WordPress page. You can add your own text, images, or blocks around it as needed. 

For more ways to tailor the experience, kindly see the Further customizations section below.

Using the shortcode on an existing page

If you’d rather add the 2FA setup form to a page you already have, like your own custom user profile or membership dashboard, for example, add the following shortcode to that page’s content:

[wp-2fa-setup-form]

This drops in the same setup wizard used elsewhere in WP 2FA, styled to inherit your active theme. 

Here’s what users see before they’ve configured 2FA: a message letting them know they need to set it up, plus a countdown if a grace period is running.

Once they’ve configured it, that button is replaced with options to change their method, remove 2FA (if you allow that), and generate new backup codes – all without leaving the page.

Further customizations

WP 2FA supports a handful of shortcode parameters and CSS hooks so you can fine-tune how the form and its notices look and behave.

Customizing the text

To hide the form’s built-in introductory text and replace it with your own, add show_preamble="false" to the shortcode:

[wp-2fa-setup-form show_preamble="false"]

Hiding the currently configured methods

By default, the form displays the user’s currently configured primary and secondary 2FA methods. To hide this, add do_not_show_enabled="true":

[wp-2fa-setup-form do_not_show_enabled="true"]

Styling the form

The wizard automatically inherits your active theme’s styling, but you can also customize it directly with your own CSS. The wizard is wrapped in a .wp2fa-modal container; within it, kindly use the following selectors:

• .wp-2fa-button-primary – the primary action button (e.g. Continue).
• .wp-2fa-button-secondary – the secondary button (e.g. Go back).
• .wp2fa-modal h3 – step headings (not every step has one – the welcome step, for example, doesn’t).
• .wp2fa-modal p – the body/description text.
• .wp2fa-modal input – text fields, such as the verification code field.

Note: Older versions of this article referenced .wp2fa-modal .button as the button selector. That class no longer matches the rendered wizard – kindly use .wp-2fa-button-primary and .wp-2fa-button-secondary instead, as shown above.

For example, to style the primary button:

.wp-2fa-button-primary {
  padding: 13px 20px;
  background-color: #337ab7;
  color: #ffffff;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

And to style text inputs:

.wp2fa-modal input {
  padding: 13px 20px;
  border: 1px solid #cccccc;
}

Styling the 2FA setup notice

Users with dashboard access see a notice reminding them to configure 2FA (and by when) right in wp-admin. For users without dashboard access, add this shortcode to any front-end page to show the same notice there:

[wp-2fa-setup-notice]

Any user who visits that page and still needs to configure 2FA will see the notice, styled to inherit your theme.

By default, the notice’s Configure 2FA now button links to either the standard setup wizard or the custom frontend page you configured earlier in this guide, if one exists. To point it somewhere else instead, add the configure_2fa_url parameter with your page’s URL:

[wp-2fa-setup-notice configure_2fa_url="https://yourdomain.com/custom-page"]

Using the shortcode inside a template file

If you’d rather not add the shortcode to a page’s content area, for example, because you’re working directly in a theme template, use WordPress’ built-in do_shortcode function instead:

do_shortcode('[wp-2fa-setup-form]');

Note: If anything is unclear or you run into a snag, our team is happy to help – simply open a support ticket. Many thanks for trusting WP 2FA with your website's security!