How to Create a Custom WordPress Login Page

Depending on the type of site you’re running, there are several reasons why you might want to create a custom WordPress login page.

Done right, it can help you minimize hacking risks and related security issues and improve privacy. And if you’re a design agency, you might need to white-label the login page for your clients.

In this article, we’ll show you how to create a custom WordPress login page using the Profile Builder Pro plugin. We’ll also walk you through a step-by-step process on how you can set up redirects and hide the admin bar.

Let’s put everything into context before we begin.

Why you should create a custom login page

As a WordPress site owner, you’re probably familiar with the default login page. In terms of design, it’s pretty generic.

WordPress' default login page

 

Users can log in by visiting the /wp-admin or /wp-login.php login page URL and entering their username and password. It’s also worth mentioning that, out of the box, it isn’t particularly secure.

Here are a few main reasons why you should create a custom login page for your WordPress.org website:

  • Improved user experience and security. If your customers, clients, or subscribers are logging into the WordPress Dashboard, then you can dramatically improve the user experience by offering a custom WordPress login page. It’s also more secure, as if you change the login page URL, “drive by” attacks won’t be able to find the login page.
  • Lots of people manage your website. If your WordPress website is managed by multiple people (such as editors, bloggers, and authors), you might consider making the login experience more user-friendly. For example, you could set up custom redirects based on where users are most likely to go after logging in. Or you could add social media OAuth login options.
  • You get a lot of website traffic. WordPress websites that get a lot of traffic regularly are more likely to get spam traffic, as well. This opens the door for hackers, spammers, and bots. Customizing the login page can help you improve security by protecting it from malicious scripts. One way to do this is by adding Google reCAPTCHA.
  • You want to white-label the login page. If you’re a freelancer, solopreneur, or design agency, you might want to white-label the login page for clients. For example, you could add branding elements (like logos) to the login screen or a personalized message. This makes it more personalized to your clients than the default WordPress logo and branding.

Of course, there are many reasons why you might want to customize the WordPress login page. In the following sections, we’ll explain how you can do everything from setting up redirects to hiding the admin bar and customizing the login screen.

Setting up a redirect from default WordPress login to front-end login

If you’re running a WordPress website that allows users (members, students, or subscribers) to log in from the front-end, you’ll need an easy way to redirect them to a specific page.

For example, you might want to redirect students to your main course page or homepage after a successful login. Or you might want to redirect members to the Edit Profile page if it’s their first time logging in after registration.

Redirecting users to a specific page after login also lets you keep them out of the WordPress back-end. This minimizes any chance of confusion and helps you deliver a more friendly user experience.

Profile Builder Pro’s Custom Redirects module makes it easy for you to control where users are redirected to based on their actions. Out of the box, the module offers the following redirect types based on user actions, including After Login, After Logout, After Registration, After Edit Profile, Dashboard, After Password Reset, and After Email Confirmation.

With the Custom Redirects module, you can also target specific users using various redirect filters. This is useful for when you need to redirect specific users or specific types of users. You can redirect users based on user roles, their username, or a user ID. The module also lets you set up global WordPress redirects.

How to set up a redirect from default WordPress login to front-end login

Using Profile Builder Pro’s Custom Redirects module, you can easily set up a redirect for the default WordPress login page. So, whenever a user tries to access to default WordPress login URL by going to your site’s /wp-admin or /wp-login.php pages, they’ll be redirected to a front-end login page instead.

Log in to the WordPress admin panel and head over to Custom Redirects from the Profile Builder menu item. Scroll down till you reach the Redirect Default WordPress Forms and Pages section. You’ll be prompted to select a Redirect Type and enter a Redirect URL.

Custom redirects settings screen

  • Redirect Type. Use the dropdown menu to select when you want users to be redirected. Since we want users who’re trying to access the login page to be redirected, we’ll select the Login (wp-login.php) option.
  • Redirect URL. Here, you need to enter the redirect URL i.e. the URL of the page you want to redirect users to. If your front-end login page’s URL is com/login, you would enter that here. This field can also contain dynamic tags including homeurl, siteurl, user id, user nicename, and HTTP referer.

It’s worth mentioning that this is also possible for other WordPress pages. For example, you can redirect users to the Register page or your Lost Password page based on their actions. Be sure to check out our tutorial on How to Redirect Users after Login & Registration in WordPress for more information.

How to hide the admin bar after login for certain user roles

With Profile Builder Pro, you can easily hide the admin bar after user’s login. This is useful for all sorts of membership sites, online course websites, training programs, as well as SaaS applications. It also lets you hide the admin bar for specific user roles such as subscribers, customers, and shop managers.

From the WordPress dashboard, head over to Settings from the Profile Builder menu item. Next, navigate to the Admin Bar tab. Here, you’ll see options for setting the visibility of the admin bar for the different user roles currently active on your WordPress website. All you have to do is choose which user roles can view the admin bar from the front-end of the website after logging in.

Hide admin bar settings screen

For example, if you want to hide the admin bar after login for subscribers, customers, and shop managers, you would simply set their visibility to Hide. Click the Save Changes button to continue.

How to customize the login screen completely

The WordPress login page is just like any other page on your website. This means you can customize its styling and colors using CSS. You can also add features to it and play around with the layout using HTML and PHP.

While you can certainly customize the WordPress login screen and login form manually, we recommend using a WordPress plugin considering it’s much faster and easier. Plus, you won’t have to mess around with any PHP files. It’s especially great for users who aren’t particularly tech-savvy or want to avoid the coding route.

Customizing the login screen URL

With Profile Builder Pro, you can easily customize the WordPress login URL by creating a new page in WordPress and adding the [wppb-login] shortcode to it.

WordPress text editor with shortcode

For example, if you’re running a membership website and want to create a custom WordPress login page for members, you might call it something like Member Login Page and change it’s URL to www.example.com/member-login. Once that’s done, simply add the [wppb-login] shortcode to the text editor and publish the page. You can also add this login shortcode to a sidebar widget. It will have a Remember me checkbox under the username and password field by default. Your site’s members can simply bookmark the login page for quick access.

Allowing users to recover their password

Profile Builder Pro lets you add a recover password section to your login page. This is a great way to improve your site’s user experience. All you have to do is add the

Please enter your username or email address.
You will receive a link to create a new password via email.

shortcode to the login page.

Recover password shortcode in WordPress text editor

It will look something like this on the front-end depending on which WordPress theme you’re using:

Preview of the front-end recover password screen

Your site’s users can simply enter their username or email to receive a link to create a new password.

Adding reCAPTCHA

You can add Google reCAPTCHA to improve your login page’s security. For this, you will need to generate keys (site key and secret key) from the Google reCAPTCHA website. Once you have the keys, go to Form Fields from the Profile Builder menu item. Use the Field dropdown to select reCAPTCHA.

reCAPTCHA settings screen

In the Form Field Properties section:

  • Enter field details (title and description).
  • Select a reCAPTCHA type (either reCAPTCHA V2 or Invisible reCAPTCHA).
  • Enter your site key and secret key.
  • Make sure the PB Login box is ticked next to the Display on PB forms

Click the Add Field button to proceed. The reCAPTCHA will automatically be added to your login form. Your login page will look something like this:

Preview of reCAPTCHA field

Letting users sign in with social profiles

You can use Profile Builder Pro’s Social Connect add-on to enable social login on your WordPress website. This lets users log in with Facebook, Twitter, Google+, and LinkedIn. Once you have the add-on activated, you can go into its settings by clicking Social Connect under the Profile Builder menu item.

Settings screen for Social Connect add-on

From the General settings section, make sure that the Profile Builder Login checkbox is ticked next to the Display on the Following Forms option. Once that’s done, simply fill out the Application Settings section for the social platforms you want to allow logins through. The add-on also lets you customize Appearance Settings from the same screen.

Social Connect front-end preview

Using custom login page templates

Profile Builder Pro comes with the free Custom Login Page Templates add-on that lets you completely change the look and feel of your login page.

Custom login page template preview

You can choose one of the available templates and customize it to fit your brand. It lets you:

  • Upload your logo.
  • Add a background image.
  • Enable the Picture of The Day
  • Tweak the design using custom CSS.

Enabling passwordless login

Profile Builder Pro lets you use the Passwordless Login add-on to let users log in to your WordPress website without entering a password.

It only asks users for their email or username on the login page. The plugin automatically creates a temporary authorization token which is valid for 10 minutes. It sends the user a link containing the token via email. The user can then click on the link to log in to their account on your website.

WordPress passwordless login shortcode

Once you’ve activated the add-on, simply add the [passwordless-login] shortcode to your login page. It will look something like this on the front-end:

Preview of WordPress passwordless login

Additional benefits of a custom WordPress login page

There are two additional benefits from creating a custom WordPress login page: security and branding.

If you’re running a community-powered website that requires users to login, having a secure login page that hides the admin bar after login is essential. This way, users won’t be able to access the WordPress admin area. This is great for membership sites, forums and discussion boards, and niche social network sites.

And if you’re a design agency, you can improve your service offering by white-labeling client login pages. This allows your clients to deliver a more consistent user experience to their site’s users and makes the overall experience more worthwhile.

Additionally, customizing your WordPress login page gives you many opportunities to improve user experience. For example, you can offer social logins or passwordless login options.

Now create your custom WordPress login page!

By customizing the WordPress login page, you can create a more welcoming (and secure) environment for users, members, students, and clients.

Let’s quickly recap some of the different ways you can customize the WordPress login page using the Profile Builder Pro:

  • Set up redirects from the default WordPress login page to a front-end login page.
  • Hide the admin bar after successful user login for specific user roles such as customers and subscribers.
  • Customize the login screen URL by creating front-end login on a separate page with a Remember me checkbox.
  • Allow users to recover their password from the login page by entering their username or email.
  • Add Google reCAPTCHA to your login page to protect against spammers and bots.
  • Let users login with their social profiles such as Facebook, Twitter, Google+, and LinkedIn.
  • Use custom login page templates that come with the Profile Builder Pro plugin out of the box.
  • Enable passwordless login options for a more secure login experience.

Get Profile Builder Pro!

How will you be customizing your WordPress login page? We’d love to hear from you so let us know in the comments section below.

Subscribe to get early access

to new plugins, discounts and brief updates about what's new with Cozmoslabs!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.