Use the coupon code WORDPRESS and save 30% OFF! Buy Now

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

Posted On
Customizing the WordPress Login Logo Using the Theme Customizer’s Logo WordPress template

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!

Screenshot WordPress customizer logo used in the WordPress login page

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.

2 responses to “Customizing the WordPress Login Logo Using the Theme Customizer’s Logo”

  1. Laurent says:

    Hi,
    I stumbled upon this article quite by chance! Very useful, thank you! Would it also be possible to replace the URL of the logo (which remains the wordpress.org URL) with that of the site by including it in this snippet?

    Thanks you !

    • Anastis Sourgoutsidis says:

      Not in the same code as above. You’ll need to filter the URL via the ‘login_headerurl’ filter.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get access to all WordPress themes & plugins

24/7 Support Included. Join 115,000+ satisfied customers.

Pricing & Sign Up

30-day money-back guarantee. Not satisfied? Your money back, no questions asked.

Back to top