Search
Close this search box.
Search

Customize your WordPress Website’s Login Page

Listen to this article

Customized Login PageIf 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?

 

Sumit Pore

Sumit Pore

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads