How to Create a Custom WordPress Login Page

Do you want to customize the login page of your WordPress website? If you are running a WordPress membership site or a WordPress blog website and have given author accounts to different users, then the login page is visible to many users in this condition.

Read More: How to Install WordPress on Localhost?

If more than one user views your login page, you will want to customize your WordPress login page for a better user experience. The article on Customizing WordPress Login Page was written to improve user experience. In today’s article, we will discuss how we can customize the default WordPress login page and design it according to our needs.

In WordPress Login Page customization, we can remove the default WordPress logo add our custom logo, and change the background of the login form apart from this, we can change the font color, etc. as per our choice or our theme.

To customize your WordPress Login Page, you have to follow some steps which you are going to read further, so you should read this article till the end.

Why Customize WordPress Login Page?

A normal question arises in most people’s minds why should we customize the WordPress Login Page? What will be the benefit of this and if it is beneficial then how will it be?

First, let us talk about the default login page of WordPress, you must know that it looks something like this –

Now if we talk about customization, there can be many reasons for this – if your client does not want the default login page and wants a custom design instead, then in that case you will have to customize the WordPress login page.

Apart from this, you can also do customization to make your clients feel happy. Till here we have talked from our and our clients’ point of view but have not talked about the main reasons and benefits of customizing, so let us do it now.

If your website has more than one author account or you have more than one member who login to WordPress, then in that case, if you have customized the WordPress login page, it will increase the user experience, and people’s trust in your website will also increase.

Customize WordPress Login Page

We can customize the login page in 2 ways

1. Customize the WordPress login page without a plugin
2. Customize the WordPress login page with the plugin

Customize the WordPress login page without a plugin

In this method, you have to manually add the logo, background, and font color, for which you will have to go to the file and write the custom CSS code.

Change the WordPress login logo without the plugin

First, you have to upload your custom logo in the media library (Go to  Media » Add New ),

After that you have to copy the path of the logo image –

Now you have to paste the below code in function.php of the theme –

function add_admin_login_page_logo() { 
?> 
    <style type="text/css"> 
        body.login div#login h1 a {
         background-image: url(your logo image path);
         background-size: cover;
         height: 150px;
         border-radius: 50%;
         width: 47%;
        }
        html body{
            background: #f2f6fc;
        }
        body.login form{
            background: #f6f9ff;
            border: 0;
            box-shadow: 1px 5px 8px 1px #b6bfcf;
            border-radius: 15px;
        }
        body.login form input{
            border: 0;
        }
        body.login input[type="text"],body.login input.password-input{
            background: transparent;
            border-bottom: 1px dashed;
        }
    </style>
 <?php 
} add_action( 'login_enqueue_scripts', 'add_admin_login_page_logo' );

In this code, we have overwritten the function of the default login page with the help of our custom function and also overwritten the custom CSS code for design.

After adding custom function and custom CSS the output will look something like this-

Now we have talked about Customize WordPress Login Page without a plugin and now we are going to talk about Customize WordPress login page with plugin.

Customize WordPress Login Page With Plugin

To customize the WordPress Login Page with the help of a plugin, we have to install a plugin named Custom Login Page Customizer by Colorlib

After installing the plugin, you have to activate the plugin and then you will see the option of Login Customizer on the left side, simply click on it, and as soon as you click, you will see a new window something like this –

In this new window, you will see many options on the left side using which you can customize the default login page of WordPress as per your requirement or that of your client.

Conclusion

In today’s article, you learned to Customize a WordPress Login Page, customize a WordPress login page without a plugin, and customize a WordPress login page with a plugin.

I hope you found this article on Customize WordPress Login Page helpful and liked it. If you found this article helpful then do share it with your friends.