It’s easy to ignore the WordPress login page, leaving it without customisation.
Why not spend a few minutes more and tailor the page?
I sought to change the logo. And ended by tailoring the page background and form appearance.
Interested to see how others had tackled this, a search of the Internet gave a review of plugins and code for the functions.php file to add CSS style text to the login page.
I wished to make any changes myself within the theme files, NOT via an additional plugin.
Adding style content to a page is worth avoiding where possible. Better to add it to an included file for caching. Although, as it’s only the login page maybe the usual practice can be ignored.
Inspecting the login page showed that the WordPress logo is referenced using:
body.login div#login h1 a
Set with a background image:
background-image: none,url(../images/wordpress-logo.svg?ver=20131107);
I chose to include the additional CSS within the main child theme CSS file.
function vntweb_login_scripts() {
$the_theme = wp_get_theme();
wp_enqueue_style( 'child-theme-styles', get_stylesheet_directory_uri() . '/css/child-theme.css', array(), $the_theme->get( 'Version' ) );
}
add_action( 'login_enqueue_scripts', 'vntweb_login_scripts' );
Shown above is the extra function to be added to the functions.php file. This will include the CSS file for the login page login_enqueue_scripts.
Including the extra references within the already pre-existing child theme CSS reduces the number of files.
Here’s my initial CSS to change the WordPress login logo.
body.login div#login h1 a {
background-image: url(../images/login-logo.jpg);
background-size:contain;
background-position:center;
background-repeat:no-repeat;
width:100%;
margin-bottom:16px;
height:200px;
}
Included above are extra entries modifying the height and margin after. It was a larger logo than the original WordPress logo.
Taking the modifications further I modified the appearance of the form
Shown below are the extra entries in the CSS added to cover the customisation of the login page.
/=======================================================/
/------------------------ Login ------------------------/
/=======================================================/
body{
font-family:var(--font-family-sans-serif);
background-color:#111;
color:#a6a6a6;
background-image:url(../images/background.jpg);
background-position: top center;
background-repeat:no-repeat;
}
body.login div#login h1 a {
background-image: url("../images/login-logo.jpg");
background-size:100%;
width:100%;
padding-bottom: 30px;
}
.login form{
background:transparent;
}
.wp-core-ui .button-primary{
color:#fc98bf;
border-color:#fc98bf;
text-decoration:none;background:transparent;
}
.wp-core-ui .button-primary:hover,.wp-core-ui .button-primary:active,.wp-core-ui .button-primary:focus{
background:#fc98bf;
color:#111;
border-color:#fc98bf;
}
With the addition of a conditional enqueue and a few extra lines in the theme’s CSS file the WordPress login page has been customised in keeping with the overall website styling.
