How to Create a Stunning Custom WordPress Login Page

No matter you are running an individual website or a membership-based site, you need to care about the login page design so as to bring both partners and yourself a good user experience. However, the default WordPress login page looks professional but a little boring, for which is monochrome and only makes up of blue and grey. Maybe now, you have generated the idea to make some change for the login page.

In fact, WordPress gives every user the right to customize the login page to make it unique and fascinating. In this guide, we introduce how to create a stunning custom WordPress login page using code in detail. And in the end, we also list some plugins designed for the creation of an elegant login page.

Create Custom WordPress Login Page Using Code

The use of code helps you make a change for the login logo, logo image URL and the stylesheet. You just need to add the following code to the theme being used. We’ve tried to make the demonstration as clear as possible to help you customize the login page with ease.

Before everything, you are required to build a new folder named as Login under the Theme folder, which is used to store CSS stylesheet and image. And then, find the functions.php file and open it in an editor. Now, we are going to customize the login logo.

Design an Eye-catching Login Logo

By default, the login logo is “WordPress” and its size is 80 pixels x 80 pixels. You need to make your own logo to replace the default one and save the image beforehand as mylogo.png in the Login folder. Note that, you can comply with the default size or customize the size as you want. The code shown as below is added at the bottom of the functions.php.

function customizeLoginLogo()
{
    echo '<style type="text/css">h1 a { background-image: url(' . get_template_directory_uri() . '/login/mylogo.png) !important; } </style>';
}

add_action('login_head', 'customizeLoginLogo');

The logo should be attractive and act in high definition. Besides, it must be related to your website and tells users who you are.

Change Logo Image URL

If you wish to change the logo image URL and stop it linking to WordPress.org, the code below can make a big difference for you. Here, we take HostingReview360.com as an example. You need to replace the example to your own website URL.

function customizeLoginPageImageUrl()
{
    return 'https://hostingreview360.com';
}

add_filter('login_headerurl', 'customizeLoginPageImageUrl');

You can also modify the title tag by making a small change to the code above. Check the solution as below.

function customizeLoginPageLinkText()
{
    return 'HostingReview360.com';
}

add_filter('login_headerurl', 'customizeLoginPageLinkText');

Customize a Unique Stylesheet

Once finishing the customization for login logo, you need to set about the change for stylesheet. Firstly, you are required to create a login_style.css file and then edit it in a preferred editor. And now, add the following code to the newly-built file.

.login h1 a { background-image: url('customized-logo.png'); width:213px; height:97px; background-size:213px 97px; }
.login label { color:black; display:block; margin-bottom:1em; font-weight:bold; }
.login form .input { font-weight:normal; }

The code enables you to customize the size and color of the background image, login label and login form. The included parameters are for reference only. You are allowed to modify the parameters according to your needs.

In fact, to bring the changes into effect, the following code should be added into the functions.php file.

function customizeLoginPageCssFile()
{
    wp_enqueue_style('login-styles', get_template_directory_uri() . '/customized-login-style.css');
}

add_filter('login_enqueue_scripts', 'customizeLoginPageCssFile');

Some WordPress Plugins Can Also Help You!

The use of code is an inflexible way to make a satisfied login page. However, some people regard it as a troublesome business and bother to do it. In this case, some WordPress plugins can be helpful methods, such as Custom Login, A5 Custom Login Page, MS Custom Login, and so on so forth.

Custom Login is created for the login screen customization, featuring User Hask Key logins, Email logins for usernames and 2-step Authentication. This plugin has been recognized as the most popular one for custom login.

A5 Custom Login Page works for users who wish to have a stunning login page. This plugin helps you design attractive logo and style the whole page as you want. Besides, the developers make a promise that the new version of A5 Custom Login Page enables users to copy and paste an entire stylesheet into this plugin.

MS Custom Login enables the customization for login logo, background image, color of Login button and many more. What’s more, the set of login form size is also available.