Add Your Own Branded Image Logo to the WordPress Login Screen

Applies to Version(s): WordPress

Branding is a key element for any site owner. Whether you own a large company, or are one person blogging, your brand is your identity.

Even if you’re the only person who regularly sees your WordPress Login screen, adding your logo is easy and rewarding.

Pop quiz! What does the below default login do for you or your brand?

Default WordPress Login Screen with WP Logo

The above is the default WordPress login page. We’ve all seen it. This logo brands WordPress. But here’s an idea — let’s work with just one image, and one simple PHP function… and let’s make this work for your brand!

Adding Your Custom Login Image

You don’t need much to make a big visual impact here. You need an image, and you need a quick function.

Beginning with the image, our recommendation is to make it 312px wide and as “tall” as you like. There’s plenty of white space to use on the WordPress login page, so while we won’t suggest a skyscraper image, the options are wide open.

Your image can be any format, where a PNG is a good choice for its general flexibility and color faithfulness. This will be the image we’ll work with for this example — it’s 312 pixels wide and 100 pixels high.

Example of a Custom WordPress Login Image Replacement

Once you have your new WordPress login image ready, use your Control Panel or FTP client to place it into the Thesis /custom/images folder.

With our login image placed on our host server, now we can edit the custom_functions.php file contents to request our image instead of the WordPress login default image.

function change_my_wp_login_image() {
echo "
<style>
body.login #login h1 a {
background: url('".get_bloginfo('template_url')."/custom/images/new-login-logo.png') 8px 0 no-repeat transparent;
height:100px;
width:320px; }
</style>
";
}
add_action("login_head", "change_my_wp_login_image");

What the above does is to leverage the Thesis “upgrade resistant” custom_functions.php file to target the login page, and while the function is php, the contents are css formatting changes. In short, the default WordPress login background image is replaced with one you’ve chosen.

Note the assumption that your image was named “new-login-logo.png” — if you chose a different image filename, change it in the PHP above.

Also assumed is the location of your new login image; as stated previously, it should reside in the Thesis /custom/images folder.

Finally, the height and width of the image are defined in this function’s css contents — if you used dimensions other than 320 x 100, change these values to avoid artificial distortion of your login header image.

If you’ve done the above, you should now see this as your login screen:

Custom WordPress Login Screen Branded Image Logo

Whoa! For one image and one small function, that’s a huge difference!

From now on, whenever you — and your guest authors, other administrative staff, or your registered visitors and commentators — visit the login page on your WordPress-powered site, the login logo image presented is no longer the WordPress default logo.

Instead, you’re greeted warmly by your very own — custom, branded, colorful, and awesome — WordPress login image.