Why customise the WordPress login screen?
By default every WordPress site greets administrators and editors with the familiar WordPress logo on the login page. While that is fine for personal projects, it can undermine confidence for clients who have paid for a professionally built website. White-labelling the login screen — at minimum replacing the logo — is a small change that makes a big difference to how polished your work appears.
Method 1: Inject CSS via the login_head hook
The quickest approach is to output a small CSS rule targeting the h1 a element inside the login form. WordPress fires the login_head action inside the <head> of the login page, making it the ideal place to insert a style override. Add the following to your theme's functions.php or a site-specific plugin:
function my_custom_login_logo() {
echo '<style>
#login h1 a {
background-image: url(' . get_bloginfo('template_directory') . '/images/custom-login-logo.png) !important;
background-size: contain;
width: 200px;
height: 80px;
}
</style>';
}
add_action('login_head', 'my_custom_login_logo');The image path uses get_bloginfo('template_directory') to build an absolute URL to your active theme folder, so place your logo inside the theme's images/ directory. Setting background-size: contain ensures the logo scales correctly inside its fixed container.
Method 2: Enqueue a dedicated stylesheet
A cleaner pattern is to enqueue a stylesheet so your CSS lives in a separate file and benefits from browser caching:
function my_login_stylesheet() {
wp_enqueue_style(
'custom-login',
get_stylesheet_directory_uri() . '/css/login.css',
array(),
'1.0.0'
);
}
add_action('login_enqueue_scripts', 'my_login_stylesheet');Then in /css/login.css:
#login h1 a {
background-image: url('../images/custom-login-logo.png');
background-repeat: no-repeat;
background-size: contain;
width: 220px;
height: 90px;
display: block;
margin: 0 auto;
}Method 3: Update the logo link and title text
By default the logo links to wordpress.org and its title attribute reads "Powered by WordPress". Both are noticeable — especially to clients. Override them with two additional filters:
function my_login_logo_url() {
return home_url();
}
add_filter('login_headerurl', 'my_login_logo_url');
function my_login_logo_title() {
return get_bloginfo('name');
}
add_filter('login_headertext', 'my_login_logo_title');After adding this, clicking the logo will take users to the site homepage, and hovering over it shows the site name rather than the WordPress branding.
Image preparation tips
For best results, use a PNG with a transparent background so the logo works against WordPress's default grey login page. Aim for a width between 180 px and 320 px at 2x resolution and set background-size to the intended display dimensions. Keep the file under 50 KB to avoid any perceptible delay on the login page.
Summary
Replacing the WordPress login logo is a straightforward but impactful customisation. The login_head hook lets you inject CSS inline, while login_enqueue_scripts gives you a cleaner, cached solution. Pair those with the login_headerurl and login_headertext filters and you have a fully white-labelled login screen that reinforces your client's brand from the very first interaction.