If WordPress allows you to customize almost any feature, to tailor-make a website according to your detailed preferences, why leave the login page be. The login page provided by default, is definitely disconnected from the rest of your site. So how about revamping it up a bit? This tutorial will provide you a basic guide to change the logo on the login page, the background color, and tweak the login form styling a bit.
For the changes, you would have to add some code in your theme’s (or child theme’s) functions.php file, and add the styling in a custom stylesheet. So let’s continue.
[space]
Adding a Custom Stylesheet
WordPress does not load default styling for the login page. So we need to create a custom stylesheet. To customize the login page, you need to override certain classes in your custom stylesheet. Let’s create a stylesheet, ‘custom-login-style.css’ and save it in the current theme folder. To ensure that the stylesheet is picked up, add the following code in the functions.php of your theme:
[pre]function my_login_stylesheet() {
wp_enqueue_style( ‘custom-login-style’, get_stylesheet_directory_uri() . ‘/custom-login-style.css’ );
}
add_action( ‘login_enqueue_scripts’, ‘my_login_stylesheet’ );[/pre]
[space]
Changing the Login Logo
If your entire site features your business logo, why should the login page be any different. The logo is displayed as a background image on the login page, for a link ‘a’ tag inside the heading ‘h1’ tag. To change the logo just add the following in custom-login-style.css
[pre].login h1 a
{
background-image: url(‘../images/customlogo.png’);
background-size: 100px 80px;
width: 100px;
height: 80px;
}[/pre]
where ‘customlogo.png’, is a logo of your site, and is uploaded in the images folder of your current theme. The dimensions set should be as per your site’s logo. You can adjust additional properties such as padding, margin, overflow, etc.
Now, the logo is also a link (by default to wordpress.org). To change the logo link, add the following in functions.php
[pre]function my_login_logo_url() {
return home_url();
}
add_filter( ‘login_headerurl’, ‘my_login_logo_url’ );
function my_login_logo_url_title() {
return ‘Site Name’;
}
add_filter( ‘login_headertitle’, ‘my_login_logo_url_title’ );[/pre]
[space]
Customizing the Login Form
The login form fields and background can also be styled by overriding some of the css classes. To change the login form, you can use the following:
[pre].login form {
border: 2px solid #960000;
background: #f8f8f8;
box-shadow: 10px 10px 5px #e1e1e1;
overflow: hidden;
}[/pre]
The form fields text can be customized using ‘label’ class. To change the login button, you would have to override the ‘button-primary’ class.
Adding a Custom Background
Now the background color is, let’s face it, boring. So how about changing it too? And besides, this is probably the easiest to change, on your login page. Just override the ‘login’ class’ background property.
[pre].login
{
background-color: #ffffff;
}[/pre]
Bonus Tip! Changing the url from wp-login to login
So you have changes most of the things, why leave out the url? To change the login url from yoursite.com/wp-login to yoursite.com/login/, use a plugin, Better WP Security to help you.
That’s all for this article. Most web designers would not bother customizing the WordPress login page, but we feel it is important to style it, to maintain a continuity with the rest of the theme. What are some tips you have used to customize your login page? Are there any you would like to share with us?
