While WordPress excels in its powerful user management system by allowing users to create accounts for your membership, multi-author or e-commerce website, by default the WordPress login page isn’t very exciting and is actually quite boring.

It lacks any of your own branding, which if you run a membership, multi-author or e-commerce website is quite important, as you’ll want your visitors or clients to recognise that it is your website with its own brand logo and design.

While there is an abundance of WordPress plugins that you can install from the WordPress repository to customise your WordPress login page, it is relatively easy to customise using your WordPress functions.php and some CSS styling.

In this guide, we will show you how to easily customise the look of your WordPress Login Page with your brand using CSS styling. By branding your WordPress login page, you’ll give your website a more professional appearance and make it feel like your own individual platform.

Once we have finished the customisation, you will have a login page that looks very similar to the image below.

How to Customise the Login Page

Firstly, we will need to setup a WordPress function in the functions.php file. We will place our customisations between the opening tag <style type="text/css> and the closing tag </style>.

function vpsb_login_styles() {
?>
	<style type="text/css">
		/* ADD ALL CSS CODE HERE */
	</style>
<?php
}
add_action('login_enqueue_scripts', ' vpsb_login_styles');

Change the Background Colour

In order to change the to change the background we need to adjust some CSS styling. In our image of the completed customised login page above you will see we have used a blend of colour to produce our background, these are call CSS Gradients which allow you to display smooth transitions between two or more specified colours. We have used linear gradients which means the colours go up, down, left, right or diagonally. This is the CSS code required to change the background colour:

body {
    background-image: linear-gradient(to right top, #001f7e, #474497, #726caf, #9c96c7, #c6c2df, #d1c6e5, #ddcaeb, #eaceef, #eba4d2, #ed76a4, #e64567, #cf0921)!important;
}

If you want to change the background image to one single colour then you would need to change the background-image: code. For example, you change the background colour to Red you would need to find the relative hex colour code #cf0921 and then change the above code to:

body {
    background-color: #cf0921!important;
}

Change the Logo and URL Image

Now we’ve changed the background colour of the WordPress Login Page, we need to change the logo. In order to change the Login Logo you will need to upload your required Logo to your WordPress child theme directory. Now you could just drop the image file in the child theme directory but to keep things organised we recommend you create a new folder structure to store anything related to images, CSS or JS. So in your child theme directory create a new folder called assets, then inside that folder create a new one called img. Now you can put the image file in your newly organisaed folder structure. In this example we have used the file name wp-login-logo.png.

.login h1 a {
	width:150px;
	height:150px;
	margin-bottom:0px;
	display:inline-block;
	background:url('<?php echo get_stylesheet_directory_uri(); ?>/assets/img/wp-login-logo.png') no-repeat!important;
}

This code will only replace the WordPress logo and does not change the logo link URL which will still point to WordPress.org. Using the function below, your custom WordPress logo on your login page will now point to your website’s home page. Don’t forget to replace Your Site Name and Info with your website’s name and info. You can add this code right below the function’s closing PHP tag you added earlier.

function vpsb_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'vpsb_login_logo_url' );
 
function vpsb_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'vpsb_login_logo_url_title' );

Change the Form Styling

So far, we have change the default WordPress logo to our own and change the colour of the Login Page background using either CSS colour gradients or single hex colour. Now we need to style the login form and labels. To change the form styling just copy and paste the following code:

.login form {
	border-radius:3px;
}
.login label {
	font-size:16px;
	color:#6a6a6a;
}
.login form .input {
	height:40px;
	padding:0px 10px;
	box-shadow:none;
	border-radius:3px;
	border-color:#e2e2e2;
	background:#f2f2f2;
	font-size:14px;
}
.login form .input:hover,
.login form .input:focus {
	border-color:#54b1a9;
}

Change the Button Styling

Now we need to style the button on the WordPress Login Page. You can change the button background colour by changing the code background: #001f7e; to your own hex colour. You can also change the colour of the button when it is hovered over by changing the code background:#70cbc3; to your own hex colour under the .login .button-primary:hover { line. To change the form styling, just copy and paste the following code:

.login .button-primary, .login .button-group.button-large .button, .login .button.button-large {
    height: 40px;
    padding: 0px 20px;
    display: inline-block;
    box-shadow: none;
    border: none;
    background: #001f7e;
    font-size: 16px;
    border-radius: 25px;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
}
.login .button-primary:hover {
	background:#70cbc3;
}

.login .forgetmenot {
	margin-top:10px;
}

Change the Link Styling

Now we need to change the styling of the links below the login form as the links are not aligned to the edges of the login form. To change the link styling, just copy and paste the following code:

.login #nav,
.login #backtoblog {
	margin:20px 0px 0px;
	padding:0px!important;
}
.login #nav a,
.login #backtoblog a {
	text-shadow:0px 1px 0px rgba(0,0,0,0.2);
	color:#fff;
}
.login #nav a:hover,
.login #backtoblog a:hover {
	text-decoration:underline;
	color:#fff;
}
.login #nav {
	float:right;
}
.login #backtoblog {
	float:left;
}

That’s it. You have successfully customised your WordPress login page using CSS styles without the need for a plugin. You can find below the complete code for your functions.php file. If you want to customise the WordPress Login page further see the Further Reading section below for details on the CSS selectors used and there purpose.

function vpsb_login_styles() {
?>
<style type="text/css">
    body {
        background-image: linear-gradient(to right top, #001f7e, #474497, #726caf, #9c96c7, #c6c2df, #d1c6e5, #ddcaeb, #eaceef, #eba4d2, #ed76a4, #e64567, #cf0921)!important;
    }
    .login h1 a {
        width:305px;
        height:36px;
        margin-bottom:0px;
        display:inline-block;
        background:url('<?php echo get_stylesheet_directory_uri(); ?>/assets/img/wp-login-logo.png') no-repeat!important;
    }
    .login form {
        border-radius:3px;
    }
    .login label {
        font-size:16px;
        color:#6a6a6a;
    }
    .login form .input {
        height:40px;
        padding:0px 10px;
        box-shadow:none;
        border-radius:3px;
        border-color:#e2e2e2;
        background:#f2f2f2;
        font-size:14px;
    }
    .login form .input:hover,
    .login form .input:focus {
        border-color:#54b1a9;
    }
    .login .button-primary, .login .button-group.button-large .button, .login .button.button-large {
        height: 40px;
        padding: 0px 20px;
        display: inline-block;
        box-shadow: none;
        border: none;
        background: #001f7e;
        font-size: 16px;
        border-radius: 25px;
        color: #fff;
        text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
    }
    .login .button-primary:hover {
        background:#70cbc3;
    }

    .login .forgetmenot {
        margin-top:10px;
    }
    .login #nav,
    .login #backtoblog {
        margin:20px 0px 0px;
        padding:0px!important;
    }
    .login #nav a,
    .login #backtoblog a {
        text-shadow:0px 1px 0px rgba(0,0,0,0.2);
        color:#fff;
    }
    .login #nav a:hover,
    .login #backtoblog a:hover {
        text-decoration:underline;
        color:#fff;
    }
    .login #nav {
        float:right;
    }
    .login #backtoblog {
        float:left;
    }
</style>
<?php
}
add_action('login_enqueue_scripts', ' vpsb_login_styles');

Further Reading

As we have learnt above, each element of the WordPress Login Form has a specific CSS selector, for example the Logo uses .login h1 a. By using these CSS selectors, we can target the styling of each area of the login form individually. Below is a table of the various CSS selectors and the CSS element it modifies.

If you require more information on how to customising the WordPress Login Page you can refer to the WordPress Codex for further information.