How to change the logo on the WordPress admin screen

You’ve built your client a beautiful new WordPress site, trained them on how to use it, and they love it – but every time they log in, they’re greeted with the impersonal blue W of the WordPress logo.

Wouldn’t it be great if you could quickly swap that out for their logo – or perhaps your agency’s logo?

Thankfully customizing the admin screen takes nothing more than some custom CSS. Just copy and paste the below code into your functions.php file, and be sure to change the URL of the background image to one that actually exists.

The width and height are optional, but you’ll probably want to include them, and adjust them to a size appropriate for your logo. WordPress’s default is 84px x 84px, so unless you’re including a square logo, their default isn’t likely to be suitable.

/**
 * Custom Admin Logo
 * Allows us to change the logo displayed on the WordPress admin screen
 *
 * @link https://rusticated.co/wordpress/how-to-change-the-logo-on-the-wordpress-admin-screen
 */
function custom_admin_logo() { ?>
   <style type="text/css">
      #login h1 a,
      .login h1 a {
         background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/img/assets/logo.svg);
         background-size: contain;
         height: 84px;
         width: 100%;
      }
      </style>
<?php
}
add_action( 'login_enqueue_scripts', 'custom_admin_logo' );
?>

A more sophisticated way to do it would be to make a small WordPress plugin. This way, if the client switches to a different theme in future, the logo change won’t vanish.

Making a small plugin is easy. Just create a new directory in /wp-content/plugins/, and call it something like admin-logo-change

Then, create an index.php file, and inside it paste the following:

<?php
/*
Plugin Name: Custom Admin Logo
Description: Allows us to change the logo displayed on the WordPress admin screen
Author: Rusticated
Version: 1.0
Author URI: https://rusticated.co/
*/

// custom login logo
function custom_admin_logo() { ?>
   <style type="text/css">
      #login h1 a,
      .login h1 a {
         background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/dist/images/logo.svg);
         background-size: auto 120px;
         background-size: contain;
         height: 84px;
         width: 100%;
      }
   </style>
<?php
}
add_action( 'login_enqueue_scripts', 'admin_login_logo' );
?>

Categories