How to Change the Custom Logo Depending on the Page in WordPress

How to Change the Custom Logo Depending on the Page in WordPress

A logo is part of your site identity. Ever since version 4.5, WordPress has had the ability for blog owners to set a custom logo for their site that can be displayed on every page depending on the theme. Older themes which don’t have support for custom logos, can be easily modified. We’ve written a blog post earlier on how to enable support for custom logos and how to display them with the appropriate sizes.

Due to the nature of logos, you will most likely want to leave it unchanged for various pages. However, there might come a time when you want to modify the logo depending on the page. Perhaps you want a new logo for a certain category. Or you’d like one logo for the home page, and another logo for single pages. By default, WordPress doesn’t allow this kind of modification. But in this tutorial, I’m going to show you how to do that without a plugin and with just a small piece of code.

Step 1: Upload Both your Logos to WordPress

Let’s get everything set up. First, select all the logos you want to display and upload them to WordPress using the media manager. In my example, I’m using just two logos and I’ve uploaded them as shown here:

Step 2: Set one of them as the Default

You need to let WordPress know that you’re using the custom logo feature. So you’ll need to set one of them as your site’s primary logo. To do this, go to your WordPress Dashboard and click “Appearance -> Customize” on the left hand side. Now select the tab called “Site Identity” as shown here:

And now, set your default logo in the space provided.

If you don’t see the facility for choosing a logo, it means your theme doesn’t support this feature and you’ll need to enable it using the tutorial I linked to in the first paragraph. The logo that you set here will be shown on all pages of your WordPress site by default. Save your changes and exit.

You can see in the screenshot below, that my custom logo appears at the top of my homepage:

Changing the Logo Based on the Page

Now we need to use a different logo for certain pages. Open up your functions.php or plugin where you enter custom PHP code and paste in the following:

function change_logo_on_single($html) {

      $html = preg_replace('/<img(.*?)\/>/', '<img src="" class="custom-logo" alt="" itemprop="logo" />', $html);

   return $html;


This code does two things:

  1. It checks to see if the page a “single page” using the function “is_single()”;
  2. It replaces the <img> tag of the custom URL with a new image tag and a new URL.

Replace the URL in bold with the URL of your own secondary custom logo. And change the conditional tag to match your own requirements. For example, if you want to display the logo for a particular category, you’ll need to use the “in_category()” function instead of “is_single”. Use this handy WordPress reference for all the different conditional tags you can use.

With the above code in place, my custom logo now changes to the second one whenever an individual post is being displayed. You can see that it works below:

Change the custom logo

This is a different logo from the one we say displayed earlier on the home page. You can continue this process and introduce more and more custom logos for various other conditions. You just need to add new “if/else” conditional statements one after the other to cover all the conditions you want.

So while the custom logo feature in WordPress is meant to have a consistent branding image throughout all your site pages, you can also modify it to customize the picture based on your needs.

17 Comments on “How to Change the Custom Logo Depending on the Page in WordPress”!

  1. Hi, thank you for the guide, its really useful for someone like me with little experience using .php! However when I copy the code into my functions.php It returns an area regarding the bracket on the second to last line saying ‘syntax error, unexpected ‘}’, expecting end of file’ Could you please help me fix this?

  2. Hi, great post! one question:
    Why if you want that user can change the logo image from admin panel instead to have the images hardcoded in php? is there any method to allow this? thanks in advance

  3. Hi, this is a nice code and it worked but it is resizing the new logo which is exactly the same size as the original logo but in a different color. It also changes the size of the header background that I have it in. Can you please help? Thanks! Kathy :)

  4. Hi Stephane, sorry the image I had put up was resized and I did not realize it until after. Problem solved.

    Thanks again for awesome script! Kathy :)

    • Hi Joe,

      There are multiple ways to do this but I think the easiest one would be to add a condition to the “add_filter” line. For instance, if the page ID is “100”:

      Or you could invoke the filter for an array of pages:

      Hope this helps.

  5. Avatar

    RE: How to Change the Custom Logo Depending on the Page in WordPress.
    Hi, what is the correct code for this? I get same error on line 11

  6. What if you want the logo to change based on the incoming url? For instance, a masked forward where the site can be seen under two different domain names based on the url you entered.

  7. Hi Stephane,

    I’m having trouble setting up the logo? I’ve inserted the PHP code, but unfortunately, nothing is working. Not sure what I’m doing wrong?

Leave a Reply

This Website is Hosted by

Powered by RamNode

Please wait...

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.