How to Change the Custom Logo Depending on the Page in WordPress
Posted on Updated onA 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:
- It checks to see if the page a “single page” using the function “is_single()”;
- 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:
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.
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?
Hi Josh,
I have updated the code. It seems it was missing a bracket. Can you try again and let me know if it works?
Same error here, after update.
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
Some WordPress themes provide you with the possibility to customize it through the dashboard however, WordPress does not allow this natively.
I know there are some plugins that will add that functionality to WordPress but I don’t know how well they work with every theme. Here’s one for instance: https://wordpress.org/plugins/am-login-logo/
Hi,
Nice piece of code.
What would I need to do if I wanted to apply the change to ALL pages derived from a certain slug.
ie. I if I had the website http://www.example.com
and wanted to change the logo for all domains for a certain slug path ie. http://www.example.com/slug1/etc
but not for http://www.example.com/slug2/etc
Is the above possible?
Thanks in advance.
Sam
Is “slug1” a parent page or a category?
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 :)
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 :)
Does this work across any theme?
Hi Stephane,
How can I get this snippet to work for a specific Page ID?
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.
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
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.
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?
hello as i am confused what will be my full code as i want this logo http://www.clubband.com.au/radioclubband/wp-content/uploads/2019/06/Radio-Club-Videography-without-Logo-trans.png
to put on this page
http://www.clubband.com.au/radioclubband/wedding-video/
From what I can see, your website seems to use a custom theme. If you go to “Dashboard > Appearance > Customize”, do you see some options to change the logo?
I would like to change the logo for a page on my wordpress website
How can I do that
Thanks. This snippet saved me a lot of headaches. I saved the alternate logo file in a directory beneath the theme, instead of uploading it to the media library. I chose this implementation because I’m creating a custom theme for a client.
For those who want to implement it without the direct link, you can assign the image to a variable, especially if you’ve placed the image in a different directory than the uploads. Like so –
if ( ! function_exists( 'yourtheme_alt_logo' ) ) :
/**
* Display an alternate logo in the single post, search, blog, and archive page header.
*
* @see wp-includes/general-template.php get_custom_logo
*/
function yourtheme_alt_logo( $html ) {
/** Alternate logo not stored in wp-uploads */
$alt_logo = get_template_directory_uri() . '/yourimage/path/alt-logo-file.jpg';
/** For everything except static pages */
if( is_single() || is_home() || is_archive() || is_search() ) {
/** Replace image */
$html = preg_replace( '//', '', $html );
}
return $html;
}
endif;
add_filter( 'get_custom_logo', 'yourtheme_alt_logo' );
I followed the instructions on this article and the site I am working on went blank. I don’t have access to the Admin area. Any help? Here’s the site for reference https://stabus.co/