Siteground WordPress Hosting

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

Posted on Updated on

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:

<?php
function change_logo_on_single($html) {

   if(is_single()){
      $html = preg_replace('/<img(.*?)\/>/', '<img src="https://webhostinghero.org/wp-content/uploads/2017/05/Logo-2.jpg" class="custom-logo" alt="" itemprop="logo" />', $html);
   }

   return $html;
}

add_filter('get_custom_logo','change_logo_on_single');
?>

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.

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

Leave a Reply

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