How to Customize WordPress Login Screen

WordPress does not offer any native capability of customizing the looks of the theme. In particular, this means that the website administrators do not have any built-in way of adding the brand’s logo or styling to the login area of the website.

In this tutorial, I will show you how to make changes to the functions.php so that the website could have a customized login page.

Customizing the WordPress Login Page

Customizing the login page involves multiple modifications to the theme files. The steps in the process are:

• Addition of Custom Background.
• Replacement of the default WordPress logo with the brand’s custom logo.
• Customization of the looks of the login form.
• Change in the login logo URL.
• Removal of login page shake.

The important thing to understand in this context is that the login page is not really a part of the WordPress theme setup. Thus, whenever, you try to customize the login page, you will discover that WordPress would not load the custom theme’s stylesheet. to overcome this, a custom stylesheet must be created.

In the theme’s folder, create a new folder and name it login. go inside login and create a file named custom-styles.css. Once done, open the theme’s functions.php and add the following code:

[php]
function my_custom_login() {
echo ‘<link rel="stylesheet" type="text/css" href="’ . get_bloginfo(‘stylesheet_directory’) . ‘/login/custom-login-styles.css" />’;
}
add_action(‘login_head’, ‘my_custom_login’);
[/php]

Add Custom Background

To add a custom background, add the following code to custom-login-styles.css:

[css]
body.login {
background-image: url(‘/online.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
[/css]

Replace the WordPress Logo With a Custom Logo

To replace the default WordPress logo with the brand’s log, add the following code to custom-login-styles.css:

[css]
.login h1 a {
background-image: url(‘/hdr-logo.png’);
}
[/css]

Customize the Looks of the Login Form

To customize the looks of the login form, add the following code to custom-login-styles.css:

[css]
.login label {
font-size: 12px;
color: #555555;
}

.login input[type="text"]{
background-color: #efefef;
border-color:#000;

}

.login input[type="password"]{
background-color: #efefef;
border-color:#000;

}

.login .button-primary {
width: 120px;
float:right;
background-color:#17a8e3 !important;
color: #ffffff;
border: 1px solid #0d9ed9;
}

.login .button-primary:hover {
background-color:#17a8e3 !important;
color: #fff;
border: 1px solid #0d9ed9;
}

.login .button-primary:active {
background-color:#17a8e3 !important;
color: #fff;
border: 1px solid #0d9ed9;
}
[/css]

Change the Login Logo URL

By default, the logo links to the default WordPress website. this behaviour could be changed and the new logo could point to the website’s homepage. for this, add the following code to the functions.php:

[php]
function my_login_logo_url() {
return get_bloginfo( ‘url’ );
}
add_filter( ‘login_headerurl’, ‘my_login_logo_url’ );

function my_login_logo_url_title() {
return ‘Your Site Name and Info’;
}
add_filter( ‘login_headertitle’, ‘my_login_logo_url_title’ );
[/php]

Conclusion

In this article, I discussed several easy ways of customizing the design elements of the WordPress Login page. with these changes, the login page could be customized to conform to the website’s custom styling and logo.

If you have a question or would like to add to the discussion, please leave a comment below.