This WordPress snippet allows you to customize the login page by replacing the default WordPress logo with your own. This is particularly useful if you want to brand the login page with your own company logo, or simply customize the look and feel of the login page to match your website’s theme.
The snippet works by adding a function to the ‘login_head’ hook, which allows it to insert custom CSS into the page’s head tag. The function itself uses the printf
function to print a CSS rule into the page that changes the background image of the login logo link (a
element inside the .login h1
).
You need to replace 'https://wpcoder.ca/wp-admin/images/wordpress-logo.svg'
with the URL of your own logo. The $logo_width
and $logo_height
variables should be adjusted accordingly to match the dimensions of your logo.
Note that the !important
keyword is used to override any potential conflicting styles. The order of priority is set to 990
to ensure that this function is executed after most others, again, to avoid conflicts.
add_filter( 'login_head', function () {
// Update the line below with the URL to your own logo.
// Adjust the Width & Height accordingly.
$custom_logo = 'https://wpcode.com/wp-admin/images/wordpress-logo.svg';
$logo_width = 84;
$logo_height = 84;
printf(
'<style>.login h1 a {background-image:url(%1$s) !important; margin:0 auto; width: %2$spx; height: %3$spx; background-size: 100%%;}</style>',
$custom_logo,
$logo_width,
$logo_height
);
}, 990 );