The Front End Login module lets you put a login form anywhere on your WordPress site, freeing you from the constraints of WordPress’ built-in login page. Use this module to create a login page that works with your organization’s branding and provides users with additional information or support. You can even place it side-by-side with a registration form to have a combined login + registration page, reducing the steps necessary for new users to create an account on your site.
The Front End Login module includes extensive customization options in its settings pane. Most are self-explanatory and won’t be covered here, but these are the most important options:
- Select Template: Choose the design template for the login form. Both templates support the same options.
- Login Page: Select the page you want to use as the login page for your site. This page must have the Front End Login Gutenberg block or [uo_login_ui] shortcode on it. When users attempt to access the default WordPress login page (/wp-login.php), they will automatically be redirected to this page instead.
- Manual User Verification: If enabled, users that register from the front end MUST be manually approved by an administrator before they can sign in. A “Verified” column will be added to the list of users in WordPress and any users listed as “Not Verified” cannot sign in. To verify a user, navigate to the user’s profile and look for the “Verify User” label. By selecting this field and saving the page, the users will be able to sign in. On verification, users will also be notified by email that the account has been verified and access has been granted. The Login Page setting (above) must set for user verification to work.
- Show Register Link: If enabled, a text link will appear below the form using the text in the Register Link Text field and linking to the URL in the Register Link field. This link can be to any page you want; even an external CRM (for example).
- Hide All For Logged In Users: If enabled, logged in users will see nothing where the login form was previously displayed.
- Message For Logged In Users: This content is displayed to logged in users (as long as Hide All For Logged In Users is not enabled).
- Google reCAPTCHA Settings: When the Site Key and Secret Key fields are populated with valid reCAPTCHA keys, a reCAPTCHA anti-bot widget will be displayed on the Login and Forgot Password forms. Users will be required to validate that they are not bots to enable form submission.
Important: Make sure that your login page is not cached. If you see password reset errors, redirect errors or users can’t sign in properly, check this first. Your host may also have server-side caching enabled for your login page (WP Engine and Siteground are known to do this, as are many others), so check with them if you’re not sure.
The Front End Login module includes two shortcodes.
This shortcode displays the Front End Login form with the template and options selected in the Front End Login module settings.
This shortcode displays a default WordPress login form with no styling or settings applied, and also supports content for logged-in users with the syntax:
[uo_login sample='sample']content if logged in [/uo_login]
Overriding the login template
For advanced developers, there’s a filter available to override the login template file with a file of your own. Here’s how you could replace the default template file with one in your child theme folder:
add_filter( 'uo_login_ui_template', get_template_directory() . '/my_template_file.php' )
If You Lock Yourself Out
If invalid settings have been made and saved, then after logout with invalid settings you find yourself locked out, take these steps immediately so that you can sign back in:
- Connect to your site by FTP.
- Find the folder for the Toolkit plugin in the plugins folder under /wp-content/.
- Rename the Toolkit folder temporarily to disable it.
- Log in now as an admin from the default WordPress login page.
- Change the folder name back by FTP and activate the Toolkit while you’re still signed in.
- Correct any settings from the Modules page and test the login page again in an incognito window or another browser so that you don’t accidentally lock yourself out again.
This type of scenario is possible if you turn on a maintenance mode or sitewide protection plugin that blocks access to the page set as your login page. If you do use a plugin that redirects access on a sitewide basis, make sure you exclude your login page from the redirect behaviour.