Adding a WordPress frontend login page to your website has two main benefits. First, it lets you control access to restricted content on your site, which is useful if you have a membership site with specific content only available to logged-in users.
And second, it’s good for user experience (UX). The default WordPress login screen is shown below. It does its job, but it’s generic, doesn’t reflect your brand, and might not include everything you want it to. Plus, using the default WordPress login screen users will be directed towards the back-end of your site. This is both inconvenient for site owners who don’t want people accessing their admin panel, as well as users from a usability point of view.
Adding your own bespoke WordPress frontend login page will help you give your users a better experience and make your membership site run smoothly. They will be redirected to the frontend login screen even when trying to access the default WordPress login. Here’s how your frontend login page could look:
To do this, you don’t need a dedicated login plugin. Instead, you can use Profile Builder Pro, the all-in-one user management plugin. Among its features is the ability to add a custom WordPress frontend login to your site, so that your users can access a login page like the one above.
Steps to Create a Custom WordPress Frontend Login Page
To create your custom login screen, you’ll need to work through three steps:
- Install and configure the Profile Builder Pro plugin;
- Create a page to use as your login page;
- Add the login form to your login page.
You can then add extra features to your login screen to make it more user-friendly and secure:
- Redirect from the default WordPress login screen to your custom login page;
- Add Recaptcha and other security features such as secure passwords;
- Allow users to register or reset the password from the login screen;
- Redirect users to a screen of your choice after they log in;
- Add extra features to your login screen with add-ons.
Let’s take a look at all of these steps in turn.
Installing the Profile Builder Pro Plugin
Start by installing the Profile Builder plugin and activating it on your site. Go to Plugins → Add New and click the Upload Plugin button.
Find the zip files for the main plugin and the Pro extension, which you can download from your account page, and install them both. Once you’ve done that, activate the plugin and you’ll see a new Profile Builder menu in your WordPress admin area.
Creating a Page for Your Custom Frontend Login Form
Now that you have the plugin set up, it’s time to create a page that will be used instead of users getting to the backend WordPress login page.
Create a page in the normal way: go to Pages → Add New in your WordPress backend.
Give the page a title (such as “Login” or “User Login”) and add the [wppb-login] shortcode to the content. You can also add any other content you’d like: maybe an explanation of why people would log in.
Now you have a basic form, displayed on a screen that looks like the rest of your site instead of being the default WordPress login page. If the user isn’t logged in, the login form will be shown. If they’re already logged in, they’ll see a logout option.
Adding Redirection to the WordPress Frontend Login Page
Once you have your login page set up, you need to redirect WordPress users to that screen instead of to the default wp-login.php WordPress login screen.
To do this, you have to set up redirection. Go to Profile Builder → Custom Redirects and scroll down to the Redirect Default WordPress Forms and Pages section.
In the Redirect Type dropdown, select Login. In the Redirect URL field, enter the URL of the frontend login page you just created. Click the Save Changes button. Now when someone tries to access the default WordPress login screen, they’ll be taken to your login screen instead.
Profile Builder lets you set up redirects for all default WordPress forms (registration, login, and lost password) making it easy for you to offer an improved user experience and keep your users from accessing the backend of your site.
Adding reCAPTCHA to Your Login Form
If you want to avoid bots trying to log into your site, it’s a good idea to add a reCAPTCHA field to your frontend login form. This way you’ll be less likely to suffer from malicious attacks via the login screen and eliminate spam registrations.
To do this, you’ll need to add an extra field to your login form for the reCAPTCHA. Go to Profile Builder → Form Fields, click in the Field field and select reCAPTCHA.
Find the reCAPTCHA Type field and select reCAPTCHA v2 for a visible reCAPTCHA or Invisible reCAPTCHA for reCAPTCHA v3, which happens in the background without the user having to select images or type anything in. This option is better for user experience and still gives you the security benefits of reCAPTCHA.
Next, you need to add a site key and secret key in the relevant fields. Follow this link to Google to get your keys and paste them into the relevant fields.
Now, go to the Display on PB forms section and check the PB Login option. You also might want to check the other options for the registration form and password recovery form.
Click the Add Field button to add this field to your form fields.
If you’ve selected Invisible reCAPTCHA, you won’t see anything on your login screen as it’ll work invisibly, but if you selected reCAPTCHA version 2, you’ll see a new reCAPTCHA field.
Adding Lost Password and Register Links to Your WordPress Frontend Login Form
The frontend login form won’t be complete without an option to register or reset your password.
If users have forgotten their password, it’s helpful to give them a password reset option. And for new users, adding a link to the frontend registration page will encourage new sign-ups and get you more user registrations. You can add lost password and registration links to your custom login form to make this easy for them.
In your login page, find the shortcode you added for the login form and edit it so it looks like this:
[wppb-login register_url=”/register” lostpassword_url=”/recover-password”]
Now, these links will be displayed below your login form. These links are the URLs of the pages that contain the frontend registration form and the password reset form.
Ensuring Security on Your WordPress Frontend Login Screen
It’s important to ensure that your frontend login is secure and only the people you want can use it to access your site. Some steps you can take include:
- Adding a reCAPTCHA field, which we’ve already done;
- Limiting user registrations in the Settings → Discussion screen in the WordPress dashboard;
- Enabling restricted content using the Profile Builder Pro plugin, via Profile Builder → Settings → Content Restriction;
- Forcing users to use strong passwords with the Profile Builder WordPress plugin;
- Installing a security plugin to monitor your site and keep it safe from breaches;
- Limiting login attempts with a security plugin or dedicated login limiter plugin.
Let’s take a look at how you can enforce strong passwords in your custom login and registration forms.
Go to Profile Builder → Settings. Scroll down and type in the minimum number of characters in passwords in the Password length field. Then in the Password strength dropdown, select the minimum strength that people must use for their passwords to register on your site.
Now, when people register, they’ll have to use medium or strong passwords to gain access to your site.
Redirecting Users after Login
After your WordPress users log in, by default, they’ll stay on the login page. But what if you wanted to send them to your home page, latest blog post, sales page, or your most popular content?
With the Profile Builder plugin, you can redirect your users to your chosen page after they log in.
To do this, go to Profile Builder → Custom Redirects.
Scroll down to the Global Redirects section, select After Login in the Redirect Type field, and type in the URL of the post or page you want to direct people to.
Click the Add Entry button to save the change, and from now on when users log in, they will be redirected to that page.
User Moderation
It’s helpful to be able to moderate users and manage the content they can access and the actions they can perform.
Profile Builder Pro’s Roles Editor module lets you manage users and user roles, and add extra features to your site, including:
This adds extra functionality on top of the default WordPress user management features and gives you more control over user moderation and management.
Adding a Registration Form to the Login Page
We’ve already seen how you can add a link to the registration page below your login form, but what about adding a registration form to your login page?
Adding a registration form means that if people don’t already have an account and want to log in, they can register in order to do so. This can help you get more registrations. You’ll only want to add this if your site is open to new registrations.
You can also add a registration form to the login page if your site is taking registrations from new members. To do this, add the [[wppb-register]] shortcode to your page. You could also add some information on what people get when they register.
This adds the default registration form to your login page.
This registration form is quite long so if you want to customize it, you can create a custom registration form using Profile Builder’s ability to create multiple registration forms.
Adding Extra Features to Your WordPress Frontend Login Form
Profile Builder Pro has add-ons you can use to add more customization to your frontend login, to help you improve user experience and brand your login screen. These include custom page templates for login, passwordless login, and the customization toolbox.
The Custom Login Page Templates add-on lets you choose from a range of pre-designed login page templates that help you make your login page stand out. You can customize the templates with your own logo or background image or use a ‘picture of the day’ for variety.
With the Passwordless Login add-on, your users can log in without a password. Instead, they provide their username or password and are then sent an email with a link that contains a unique token allowing them to log in. This way they don’t need to check ‘remember me’ or remember their password and your site is still secure.
The Customization Toolbox adds a new menu item to the Profile Builder interface with extra features. These include:
- Automatically generate passwords for your users;
- Allow or Deny certain email domains from registering;
- Redirect users to a specific page if they have empty required fields;
- Ban certain words from being used in the First Name, Last Name, or Username fields;
…and many more.
You can also add a custom login widget to the sidebar or footer of your site, meaning people can log in from anywhere on the site. Or try using the Customizer (via the admin bar) to add CSS to your custom login page and edit the colors or layout.
UPDATE: All the functionalities of the Customization Toolbox add-on are now included in the main plugin by default. You can access them by navigating to Profile Builder → Settings → Advanced Settings tab.
Combine Profile Builder Pro with Paid Member Subscriptions
You could even take this further by creating a paid membership site and combining Profile Builder Pro with the Paid Member Subscriptions plugin to monetize your membership site.
Paid Member Subscriptions lets you create multiple tiers of membership, meaning you can create content for specific member groups. Combine Paid Member Subscriptions with Profile Builder Pro and give members of your site a custom login that enhances your brand and makes it easier for them to access their user area.
Conclusion
Adding a custom user login form to your WordPress site allows you to brand your login page and provide a better user experience for your visitors. It also lets you customize the login form and add extra features like a reCAPTCHA for security.
Using the Profile Builder Pro plugin with your WordPress site you can customize your login form, manage your users, and add a redirect so that users go to a page of your choice after they log in. You can take things further by combining Profile Builder Pro with Paid Member Subscriptions and provide a professional login to your membership site.
Profile Builder Pro
Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.
Source: https://www.cozmoslabs.com/222236-wordpress-frontend-login/
