How to create a custom WordPress login page

In this article we’ll look into creating a custom WordPress login page. First, we explore how the default WordPress login works. Then we look into the alternatives and the different ways you can customise and improve your login experience. Lastly, we find out how to filter users based on their login behaviour, using Users Insights.

Let’s get started!

custom wordpress login

How the WordPress login works by default

The default WordPress login page is probably meant to be used for the most part by collaborators. That’s because the WordPress login page is a branded WordPress form with no reference to your site.

By default, the WordPress login is found under yoursite.com/wp-login.php. But if you are logged out and try to reach any wp-admin page you will be redirected to the login. In addition, some other elements link to it, such when login is required for comments. This is how it looks like in all its glory:
Default WordPress Login

 

You may be wondering if there are any elements for widgets or custom page logins. Unfortunately, no. WordPress even has a “meta” widget. But that just links to your WordPress login page, which is again out of your control.

These design inconsistencies may represent an issue for your site. Let’s see its consequences now.

Why create a custom login page

The first issue with the default WordPress login page is its flow. Picture your average user. They go to your site and are used to a certain branding. Then, when they click to login they go to a page with the WordPress logo and almost no information.

This may be even more confusing if you consider that all WordPress sites have this same design. Thus, users log in with a page that appears to be the same, for completely different sites.

Going a bit further, you can consider other aspects such as usability. The login page is fairly hidden in a WordPress site, thus it may require too many clicks to be reached. You could easily link to a custom login page, saving yourself from most of these hassles.

A custom login for WordPress can be implemented in a couple of ways. If you are only concerned about the design aspect, you could simply brand the default WordPress. But if you want the best results in terms of usability and design, custom login pages are the ideal solution.

That’s because, with them, you can add your own menu, header, footer. You can add sidebar widgets, or any other theme element as well. For example, if you have sliders, call to action, buttons. All of that can be used, as the entire page is under your control.

Creating a custom login page with a plugin

There are many WordPress login plugins. Here we list two options, one to customize the default WordPress login, and another one to create custom login pages.

Custom Login Page Customizer

Plugin to customize the default WordPress login page

 

This plugin works from the WordPress customizer screen to change how your default WordPress login looks like. You are still bound to the WordPress login page, but you can completely change its appearance. Here are some of its features

  • Custom logo
  • Logo size setup
  • Custom background image and color
  • Form styling
  • Fields styling
  • Button styling

Theme my login

WordPress plugin to create a custom login page

 

This plugin allows custom WordPress login pages in your frontend. It allows you to create a custom login within your theme. Therefore, you can fix the design issues as well as usability issues with your own WordPress login page.

These are the main features of this plugin:

  • Frontend login
  • Set up log in with email and password, username and password or a combination of both methods
  • Frontend registration
  • Frontend password recovery tool
  • Custom slugs for the login, registration, password recovery and other pages
  • Allow user registration with email only
  • Allow users to add their own passwords
  • Auto-login after user registration

 

These plugins can be a great option for you. But it is possible to create your own frontend WordPress login with a few lines of code. Let’s see how to do that now.

Creating a custom login page with code using the wp_login_form()

WordPress has many built-in functions. And a lot of them can be used in creative ways, to solve big issues elegantly. This is the case for a custom WordPress login page.

Instead of worrying about the entire form, authentication, security, and HTML, you just need one function. That’s the wp_login_form() function.

We could simply hardcode this function in a page, and that would create a custom WordPress login for you. But we can find a better way. Now let’s create a shortcode to output our form. A shortcode is a great solution, as it is quite flexible and can be implemented on any page. Additionally, in case you want to change the form itself or its options, this can be done from your wp-admin.

You can add this snippet in your functions.php file. Even better if it’s in your child theme so you won’t lose it in future updates.

This code creates our login form with all its attributes. Thus we can use the simplest form [uilogin] or add other attributes, such as [uilogin redirect=“http://site.com/logged-in-page”].

Now we add this shortcode to our desired login page, like this:
Add the shortcode for custom login page in your WordPress site

Here our login redirects to a custom page. You can look at the attributes list and change all of them if you want. And this is our output:
Results of the shortcode application in a page

 

Analyze login activity with UI

Now we have our custom WordPress login page. Then we can analyze users based on their login activity. If you want a full guide, you can read the “How to check user login history in WordPress” guide. But let’s see some quick examples now.

You could filter users based on their last visit. You can do that by using the “last seen” filter. This allows you to check active users:
WordPress users last see date

 

Another simple option is to filter users by their number of sessions. This shows now just the most recently active users, but which users are more active in general. You can even filter only users who have more than 10 sessions, for example. Which can be useful to connect with your most engaged users:
WordPress user sessions is greater than 8

 

Lastly, let’s check how to measure the effectiveness of our new login page. As you saw, we set a custom login redirect page. Ideally, users would only visit that page once they login using the frontend form. Therefore, you can filter users who visited that page. This shows you not just the most active users, but visitors who used this new feature as well. That’s a good opportunity to get in touch with them and ask for opinions on your login form.
WordPress users who have logged in with the custom WordPress login page