Creating custom login page styling for Wordpress

We recently launched a new website for Australian telecommunications infrastructure provider UCG (and New Zealand). We wanted a simple way to make a nice looking login page for their staff to enter the website which we can do with a little bit of custom CSS and a hook in the Wordpress functions.php file.

Add this to your theme's functions.php file:

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

`function my_login_logo_url() {
return get_bloginfo( 'url' );
}

// changing the logo link from wordpress.org to your site
function mb_login_url() {  return home_url(); }
add_filter( 'login_headerurl', 'mb_login_url' );


function my_login_logo_url_title() {
return 'Your Page Title';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

function login_error_override()
{
    return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );

OK, so now we have a link to a custom CSS file where we can style up the login page. That file is /custom-login-styles.css so make a blank file with this name and add it to your child theme.

Now we can style it. Here's what we're running for UCG.

body.login {
  background: #252525 url(/logo.svg) no-repeat center center;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.login h1 a {
  padding: 20px!important;
  background-size: 60% autoimportant;
  height: auto!important;
  width: auto!important;
}

.login #nav, .login #backtoblog a, .login #nav a { color: #999; }
.login #backtoblog a:hover, .login #nav a:hover { color: #fff!important; }

Now we have a custom branded login page for Wordpress without any plugins.

We are using it on:
Print Miami
Monster Tees
Sales Tax USA
Dark Fibre
HFC
FTTB
SFP