WordPress (WP) Custom Designed Login Logo gets truncated or cropped after WordPress is updated to 3.8+


It seems the custom-designed logo of the login form gets cropped or truncated if you update your WordPress installation to 3.8 or later.

Just for background & history of the WordPress login form, the logo was something rectangular in shape, as shown below:

Orginal WordPress Login Logo

My custom design of my Studio’s logo was the right fit & was working fine, as shown below:

WordPress Custom Login Logo Fix - Correct Custom Logo after code update

Problem Statement:

But when WordPress updated its codebase to version 3.8, it had the look of a round or circular jewel, As shown below:

WordPress Custom Login Logo Fix - Round 3.8

& that created panic in the WordPress community as all custom logos got cropped or truncated by circular masks, which was something looking like this:

WordPress Custom Login Logo Fix - Error Truncated & Cropped Custom Logo after 3.8 Update


But I later found the fix for this by just updating the custom login logo code in functions.php to this:

function mas_custom_login_logo() {
echo '<style type="text/css">
#login h1 a { background-image:url('.get_bloginfo('stylesheet_directory').'/inc/images/login/wp-ma-logo.png) !important; background-size: 300px 75px !important; height: 75px !important; width: 300px !important; }

add_action('login_head', 'custom_login_logo');

Note: change the width & height desired numbers & also change the path of the image URL & image name.

Again, after the update, everything was working fine with the expected & correct result.

WordPress Custom Login Logo Fix - Correct Custom Logo after code update

I hope the above code will help you to get the same result you expect & intended.

Thanks & Regards
Mandar Apte

Published by Mandar Apte

Mandar is a Mumbai-based multi-disciplinary designer with UX/UI, Logo, Symbol, and Brand Identity design expertise. He currently runs his Mudrkashar Linguistic Apple iPhone, iPad, and Mac app business in the heart of Mumbai city.

Leave a comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.