Customizing the WordPress Login Logo Using the Theme Customizer’s Logo

When setting up a WordPress website for a client, it’s the little touches that make a difference. One easy change that adds a personal touch is swapping out the standard WordPress logo on the login page for the client’s own logo. By using the logo they’ve already added in the WordPress Customizer, you can give their login page a familiar feel. This guide will help you do just that!

Always back up your theme before making any changes. Directly editing theme files can be risky, and a minor oversight might cause issues with your website’s functionality.

We are going to add the following code snippet in our active theme’s functions.php file.

Accessing the theme’s functions.php file

• Navigate to your WordPress Dashboard.
• Go to Appearance > Theme Editor.
• On the right side, find and click on the functions.php file. This is where you’ll be adding the provided code.
• Add the following code snippet.

function customizer_login_logo() {
    if ( ! has_custom_logo() ) {
       return;
    }

    $custom_logo_id = get_theme_mod('custom_logo');

    $logo = wp_get_attachment_image_url($custom_logo_id, 'full');

    echo '<style type="text/css">
          #login h1 a {
                background-image: url(' . esc_url( $logo ) . ');
                background-size: contain;
                width: auto;
                height: 120px;
          }
    </style>';
}
add_action( 'login_head', 'customizer_login_logo' );

If you don’t see the Theme Editor option under Appearance it means that you are using a Full Site Editing theme. We will cover this scenario in an upcoming tutorial.

And that’s it!

Now every time you change your website’s logo through Appearance > Customize > Site Identity the logo on your WordPress login page will also be updated.