Shortcodes for custom user 2FA configuration page

In some instances, your WordPress users may not have access to the WordPress dashboard area (wp-admin). For example, this is common when running a WooCommerce / eCommerce site, or a membership website. In such cases, our usual profile based setup wizard is not available to users which can make enabling and configuring two-factor authentication for such users impossible.

For cases like this we have developed a front-end setup wizard in WP 2FA, which you can make available to your users on normal pages via a shortcode. In this article:

The Shortcode

You can add the below shortcode in between square brackets to any page or post you have on your website:

[wp-2fa-setup-form]

By using the above shortcode, you can add our handy setup wizard to your custom user profile pages, no matter what kind of setup you are running. Here is an example of how this form looks like when using the default twenty-twenty theme.

As you can see, the output includes a message, letting the user know the status of their 2FA setup, as well as a neat countdown. Once the user has set things up, they will see the following –

Users will be able to use the easy to use wizards to setup 2FA for the 1st time, reconfigure things, and even produce backup codes, all within the comfort of your custom member area.

Customizing the custom 2FA configuration page looks & feel

Using your own text

Looking to show just the buttons/forms so you can add your own text? No problem. Use the parameter show_preamble=”false” to hide the text, giving you even more control. For a full example of how this shortcode would look, see the example below.

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

Styling the form

Although we have tried to create our form to be as flexible as possible, to allow your theme to do what it should and control the styling, you can still apply your own custom styling. We will now detail some key CSS selectors and some examples of how you can style common elements, like buttons and inputs below.

To apply your own styling to the buttons which trigger the wizard, you could use the following:

.wp2fa-modal .button {
padding: 13px 20px;
background-color: #337ab7;
color: #ffffff;
letter-spacing: 0.4px;
text-transform: uppercase;
}

For text inputs, the following would work well – which of course you can tweak to suit your needs as you wish.

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

The user 2FA notification

If your users have access to the WordPress dashboard and have a 2FA policy applied to them, they see a notice informing them to configure 2FA within the configured grace period, such as the one shown below.

Whilst the above is useful if your users are able to access the back-end, if for example you are running an eCommerce store, users have no such luxury. So for this reason we have created the handy “2FA Notices” shortcode, which you can place in any page you wish. Let’s now take a look at the shortcode and see what it can do.

[wp-2fa-setup-notice]

Using the above shortcode, any user who visits the page (and of course if the user is applicable for 2FA) will see a notice just like the admin notice seen above, but only on your site’s user facing pages. Here is an example of the shortcodes output using the default twenty-twenty WordPress theme.

The content is identical to the admin notice, and we have purposefully left the styling at a minimum to let your theme handle presentation.

Changing the 2FA wizard link in the notification

By default the “configure 2FA now” button will lead to either a) the setup wizard we provide by default, or b) your custom user page created using this setting in the 2FA admin area (only if you have setup a page with this settings 1st of course).

If, however, you want to specify where the button should link to when outputting the notice via shortcode, we have created a parameter for just this task. Simply add your desired page URL via this parameter and you’re all set. For an example of the shortcode with this URL in place, see below.

[wp-2fa-setup-notice configure_2fa_url=\"<a href=\"http://domain.com/custom-page\">Configure 2FA</a>\"]

Just like you see in the example above, replace the sample URL with your custom page’s URL (typically the page where you have placed the

You must be logged in to view this page. Login here.

Using the shortcode within a template file

In some cases, you may not wish to add the shortcode directly to a pages content area. Instead you may want to use a bespoke template file or such. If this is the case you can use WordPress’ handy do_shortcode function to turn our shortcode into something more useful for you.

Please see below for an example of our shortcode, using the do_shortcode function provided by WordPress.

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