Are you looking for a WordPress custom login page builder? So that you can maintain the fresh look of your login page for your users. If so, then this guide is something you should read. Here at the TemplateToaster website builder blog, I have included the complete working of the best custom WordPress login page builder for you.

If you are running a membership site or blog, you may need a login page. A login page makes users to signup and login using their credentials. It allows them to visit, share and contribute to your site via posts, images, videos, or comments. But, WordPress provides a default generic login page. It doesn’t have any built-in options to add your own logo and change the feel of a page to match your theme. It is far behind to result in an ideal login page.

So, a WordPress custom login page builder will play an important role here. A custom WordPress login page builder is crucial to add your own branding to the site. You can add more fields to get more information from the users. Above all, it facilitates you to limit the admin panel access by specifying user roles. In short, a WordPress custom login page builder offers many benefits with a pleasing user experience.

Different Methods to Create a WordPress Custom Login Page

It is always a good practice to create a custom login page rather than using a boring WordPress login page. At the most, you can add your own logo and white label to the admin panel. But what about the admin panel access? So, if you don’t want to allow every logged-in user to be able to access the admin panel, create a custom login page. However, there are two basic methods to create your own custom login page. They are:

  1. Create a WordPress Custom Login Page Manually
  2. Create WordPress Login Page using Loginer.

1. Create a WordPress Custom Login Page Manually

You can make a WordPress custom login page by using code. However, you need basic skills in HTML, PHP, CSS, etc. You have to make changes to the “function.php” file of your theme. However, remember that you will lose these changes if you update WordPress. Whereas, on the other hand, knowing some ways to fix WordPress page updates not working can be beneficial for you.

The Basic Modifications to Customize a Login Page

There are some basic things that you would want to change in your custom login page. Some of the common modifications are as follows:

  • Add a custom background.
  • Add a custom logo.
  • Customize the look of the login form.
  • Change the login logo URL.
  • Remove the lost password link.
  • Remove the “Back to” link.
  • Hide the login error message.
  • Remove the login page shake.
  • Change the redirect URL.
  • Check the “Remember Me” option.

How Will You Proceed?

I assume you know how to install WordPress and how to install a WordPress theme because WordPress doesn’t load your theme stylesheet because the login page isn’t part of the WordPress theme setup. So, you have to make your own stylesheet for the custom login page. Before that, you need to create a new folder in your theme folder called Login. However, here we’ll make a new .txt file and save it as a ‘custom-login-style.css’ file.

Once you have a CSS for the login page, you are required to tell the WordPress to load it explicitly. For that, add the following code in the ‘function.php’ file.

function my_custom_login()
{
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-style.css" />';
}
add_action('login_head', 'my_custom_login');

The resultant WordPress custom login page will look somewhat like this.

resultant WordPress custom login page

Now, let’s see the particular CSS code to make specific modifications

  • Adding a Custom Background

You can add any background image to your login page. Just specify the correct name in the second line of your custom page CSS. The code to set the background is as follows.

Body.login
{
background-image:url("../image/login-page-bg.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
  • Adding a Custom Logo

Logo design is the most crucial step to mark a brand identity. You can add your own custom logo in place of the WordPress logo. Save the custom logo image to the Login/image folder.

#login h1 a {
background-image: url("../image/logo-1.png");
background-size: 75px;
}
  • Customizing the Login Form

Now, you need to modify the Login form to make it similar to your site appearance. You can set the padding, margin of the form. You may also like to change the background color, label, etc. And for that, you can refer to the following sample code.

.login form{
box-shadow:none;
padding:20px;
}
#login {
background: #FFF;
margin: 50px auto;
padding: 40px 20px;
width: 400px;
}
.login label {
color: #555;
font-size: 14px;
}
.login form .forgetmenot{
float:none;
}

Further to modify the submit button look, you can set margin, border, height, width, the color. However, you can include the following lines to your CSS to change it.

#login form p.submit{
margin-top:15px;
}
.login.wp-core-ui .button-primary {
background: #7B417A;
border-color:#7B417A;
box-shadow: 0 1px 0 #7B417A;
color: #FFF;
text-shadow: none;
float: none;
clear: both;
display: block;
width: 100%;
padding: 7px;
height: auto;
font-size: 15px;
}
  • Change the Login Logo URL

The Logo URL links to WordPress.org by default. You can redirect it to some other URL however you like. However, if you ever forget your WordPress Login URL there are ways to find that as well. Coming back to the logo URL you can do that as follows.

function custom_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

function custom_login_logo_url_title() {
return 'Default Site Title';
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' );
  • Remove the Lost Password Link

A lost password link is useful when you forget your password. But, at the same time, it can be misused by some users. Thus, you can remove it. You can simply add the following code to achieve this.

p#nav
{
display: none;
}
  • Remove the “Back to” link

The “Back to…” link help users to return to the homepage. However, if you want a simple clean look, you can even remove it. You may use the below-given code for the same.

p#backtoblog
{
display: none;
}
  • Hide the Login Error Message

Sometimes users enter the wrong information by mistake, it will result in generating Login error messages. Certainly, WordPress errors frustrate a lot. Whereas the reason for the login error message could be any, either the username is incorrect or the wrong password. This message is useful for users but creates a gap as hackers can crack the user login credentials. They can then gain access to your site. So, it’s better to change the error message in function.php file as follows.

function custom_login_error_message()
{
return 'Please enter valid login credentials.';
}
add_filter('login_errors', 'custom_login_error_message');
  • Remove the Login Page Shake

The login form shakes when the user submits the wrong login credentials. But if you don’t want this feature, you can remove this.

function custom_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'custom_login_head');
  • Change the Redirect URL

If you log into WordPress, it redirects you to the dashboard directly. You can redirect all to the homepage except the administrator as follows.

function custom_login_redirect( $redirect_to, $request, $user )
{
global $user;
if( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array( "administrator", $user->roles ) ) {
return $redirect_to;
} else {
return home_url();
}
}
else
{
return $redirect_to;
}
}
add_filter("login_redirect", "custom_login_redirect", 10, 3);
  • Set “Remember Me” to Checked

Remember Me box is unchecked by default. You can change it to checked state as follows:

add_filter( 'login_footer', 'default_rememberme_checked' );
}
add_action( 'init', 'default_checked_remember_me' );
function default_rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

So, this is how you can customize a login page with code. You can try out all the modifications to simple CSS code.

2. Create a WordPress Custom Login Page Using Loginer

If you don’t want to code or don’t have the required coding skills, you may opt for the more convenient way to create a WordPress custom login page using plugins. There are a number of plugins available in the WordPress repository to choose from. Whereas, I have picked up the best WordPress custom login page builder for you i.e. Loginer.

Creating a WordPress Custom Page Login using Loginer

Loginer is one of the most suitable WordPress custom login page plugins. Once you install and activate it, you can see it under the Loginer → Form Style option in your dashboard. While you either hover on the ‘Form Style’ option or click on the ‘Loginer’ you will the Loginer Setting Option page as shown below. The very first thing you must be seeing here is the Form Heading. Here you can select what Title you want to give to your pages. 

custom login page builder

Labels

The next thing is to set the Labels for all the fields. You can give Labels of your choice and click on the Save Changes button as shown below.

login page builder

Error/Success Messages

When a user tries to log in there are two possibilities that either the login will be successfully done or some error might occur. So, in that case, you can display your custom message to the users. And once you’re done writing your message click on the Save Changes button to confirm it as shown below.

how to create custom login page

Placeholders

The value in the placeholders helps users to understand what type of value is required in the field. You can assign any different values in the placeholder and click on the Save Changes button once you are done.

how to create custom sign up page

Form Style

There are many options given under the form style that lets you stylize your login page matching with your current WordPress theme as shown below.

wordpress login page styling

  • Input Box

Here you can set the Font Size, Background Color, Font Color, Focus background Color, Focus Text Color, Focus Border Color, Border (However, you can select the border Thickness, Color, Style, Radius, etc.) and this how you can do it.

  • Paragraph, Messages, & Label

You can Font Color and Font Size for the messages, paragraphs, and labels to be shown.

  • Heading

The heading of your Login page and other pages such as Registration page, Forget Password page, Password Reset page, and Sign Up page can be stylized here. There are options like Font Size, Font Color, Background Color, Border (Border Style, Thickness, Radius), Margin, Padding to give the desired look to your headings.

  • Button

By default, the button has a matching style similar to your current WordPress theme. However, you can anytime alter the look of the button with the help of given options. You can change the button Font Size, Background Color, Font Color, Hover Background Color, Hover Font Color, Border Thickness, Color, Style, and Radius.

  • Link

Whatever links are there on your login page or any other page, you can change their appearance as well. You may like to change the Typography, Font Color, Hover font Color, etc.

  • Required Field

By default the color of the asterisk symbol (*) would be much the same as the color scheme of your theme (This symbol represents that the field is mandatory and can not be left blank). However, if you want, you can change it too. And after doing all the custom styling you need to click on the Save Changes button to confirm your choice and move ahead as shown below.

➤ HTML Classes

The plugin allows you to add multiple classes and custom CSS to make the form more personalized.

Now you can move to the settings option. It is given in the left pane Loginer → Settings. It includes two major settings options i.e. general and pages. 

html classes

General

In the General settings, you have got three main sections and these sections will help you enhance the security of your website. The very first option is to Restrict Users From Dashboard. This lets you choose which users you want to restrict from your dashboard and who can access the dashboard.

Password Field: It let’s show or display the password field in the Registration form. You can easily choose whether you want to display the password field in the Registration Form or add a password strength meter.

Choose Minimum Strength: Setting the minimum password strength help you ensure security. So, select from the given four options i.e. Short, Bad, Good, Strong and hit the Save Changes button to confirm.

general login page settings

Pages

Here you can choose where you want to show the Login or Registration page and click on the Save Changes button to get ahead.

select login page

And finally, this how your WordPress Custom Login Page will look like.

wordpress login page

Some Other Popular Plugins to Create a WordPress Custom Login Page

Some of the other useful WordPress custom login page builders are as follows.

1. Theme My Login

Theme My Login is a top-rated WordPress custom login page builder. However, you can also create custom registration and profile pages, custom emails, etc. along with the login page. All you have to do is configure the TML login settings by clicking the TML menu. The relevant features will be enabled and visible under the TML option in the Menu. It also avails the custom login widgets. You can add a TML widget to the sidebar by visiting Appearance → Widgets.

Theme My Login plugin settings wordpress custom login page

  • Active Installs: 100,000+
  • Rating: 4.3

2. Admin Custom Login

Admin Custom Login is a powerful custom login page plugin. It provides you a lot of features to edit background color and image, login form color, font size and position and much more. You can also add a background slideshow and social media icons on the form. All the designs prepared with this plugin are mobile-friendly. It provides you a wide range of Google fonts and color schemes. It’s really simple to work in its setting panel.

settings panel of admin custom login plugin wordpress custom login page

  • Active Installs: 60,000+
  • Rating: 4.8

3. LoginPress

LoginPress is another great WordPress custom login page builder. It is coupled with many strong features to change the layout of the login page including logo image, width, height, padding, URL, and title, background image or color, login form image or color, width, height, padding, and border, etc.

loginpress plugin settings wordpress custom login page

It also provides features to modify login error messages, forgot error messages, registration error messages, forget password hint messages. You can do all modifications by opening up the Customizer that appears under LoginPress → Settings in the left main menu of the dashboard.

customizer settings of loginpress wordpress custom login page

  • Active Installs: 90,000+
  • Rating: 4.9

4. Custom Login Page Templates

Custom Login Page Templates plugin allows you to create a WordPress custom login page. You can upload your own logo and a full-width background image. However, it also has a feature that lets you attach your own custom CSS.

custom login page settings wordpress custom login page

It provides you 5 different custom login page templates as shown below.

different custom login page templates wordpress custom login page

  • Active Installs: 4,000+
  • Rating: 4.7

WordPress Custom Login Page Builder – In Conclusion

A custom login page plays a great role in social media engagement and email marketing. It should look like a part of the site layout. Putting efforts to customize a WordPress login page of your site is proportional to building your brand. It will give a personalized online experience to the users. So, paying attention to the custom login page may result in increased traffic. On the other hand, the above-discussed WordPress custom login builders are worth trying. Especially if I talk about Loginer, it may be a new plugin, however, the kind of results it produces is simply the best. So, in the end, I would only ask for your reviews about whatsoever plugin you use. I would love to hear about your customization experiences. Please share in the comment section below.

Related reading: WordPress 101 tutorial

Best WordPress hosting providers

How to check WordPress version

How to find WordPress login url

How to install WordPress

What WordPress theme is that

How to change WordPress language

How to create WordPress custom login page

How to create WordPress theme from scratch

How to fix WordPress page update not working