How can I show different logos for different pages? I’ve been asked this several times. This time I’ll show you how to achieve this in the Divi theme.

Compatibility 90% 90%
Ease of Use 78% 78%
Wow Factor 65% 65%

You’re an IDIOT if you don’t use a child theme.

Wang Chung

Chinese Philosopher

Step 1

Open header.php in the child theme folder. If it does not exist, copy header.php from the Divi theme folder into your child theme folder.

Step 2

Before we go crazy here, take a look at the WordPress codex page that details the methods to be employed. I won’t judge you if you choose not to 🙂 When you’ve steeled your nerves, pop open the toggle to reveal the code we’ll be adding to header.php.

Code

	<style type="text/css">/* suggest removing this style and adding to the child theme style.css. Edit to suit your needs */
img.custom-logo {
    max-height: 54px;
    position: relative;
    top: 15px;
}</style><?php
	// This is targeting the front page as set in Dashboard => Settings => Reading and uses the logo as setup in Divi Options.
	if ( is_front_page( )) {    
	
 ?>
	<?php
		$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
			? $user_logo
			: $template_directory_uri . '/images/logo.png';
	?>
		<div class="logo_container">
			<span class="logo_helper"></span>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<img decoding="async" src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
			</a>
		</div> 

 <?php
	 //This is targeting the page with the slug page-name-slug.
	} elseif ( is_page( 'page-name-slug' ) ) {	
?>

	<div class="logo_container">
		<span class="logo_helper"></span>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
			<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" class="custom-logo" data-src="http://path-to-your-image" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?> />
		</a>
	</div> 

<?php
	 //This is targeting the page with the id 724.
	} elseif ( is_page( '724' ) ) { //can use page id or slug
?>

	<div class="logo_container">
		<span class="logo_helper"></span>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
			<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" class="custom-logo" data-src="http://path-to-your-image" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?> />
		</a>
	</div> 

<?php
	 //This is what we show if previous conditions are not met. In this case, it defaults back to the logo as set in Divi options.

} else { 
?>
<?php
	$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
		? $user_logo
		: $template_directory_uri . '/images/logo.png';
?>
	<div class="logo_container">
		<span class="logo_helper"></span>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
			<img decoding="async" src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
		</a>
	</div> 
	
<?php
}	
?>

Copy the code in the toggle above and paste it in, replacing the following code that exists. Find in header.php, starting around line 92 (yours may be different):

Grab The Files

Take the easy road to success by grabbing header.php here and dropping ‘er into your child theme folder. Note: if you have edited your existing header.php, you won’t want to use my file 🙂

Download

15 Comments

smsgator on 24th May 2017 at 5:09 pm
AWESOME! — thanks
Additional feature – what if you want to do for all POSTS (vs pages)… any suggestions?
- Flash on 30th May 2017 at 6:53 am
  You can edit single.php, which controls how posts are displayed. In that file, tell it to call a custom header.php that you creat.
Luis Casanova on 28th May 2017 at 2:58 pm
I followed all the instructions and it didn’t work with a newer version of Divi… I copied the header.php from the Divi theme to my child theme and changed the code as shown in the video.
- Flash on 30th May 2017 at 6:56 am
  The code is PHP dependent, not Divi dependent. The code will work in Divi or any other themes. PHP can be tricky to work with. One missing comma, semicolon, bracket, parenthetical, or curly brace and you are hosed.
Mark Savage on 6th July 2017 at 9:39 pm
Any idea if it’s possible to do this for Woocommerce Product Pages?
- Flash on 7th July 2017 at 7:52 am
  Yes, absolutely.
Elmarin Adam on 6th February 2018 at 2:39 am
Thank you so much for this! It is great. Any suggestions on how you would resolve it for mobile? Mine works 100% in desktop, but on mobile it is not great.
I had to set my logo to 110 pixels high for desktop, but then require it to be 54px high for mobile on only those specific pages?
- Flash on 6th February 2018 at 5:35 am
  Easy way is to use CSS. Find the selector by using your browsers inspector tool, then something like this in your child theme’s style.css file (you ARE using a child theme aren’t you?):
  @media only screen and (max-width: 768px) {
  #headerLogo {
  height: 75px;
  width: 75px;
  }
  }
Catalin on 8th February 2018 at 11:43 am
Great solution, thank you very much!
Kika Sorell MUnar on 7th January 2019 at 4:03 am
Great! Thanks!
But, can I change the logo in 6 pages?
- Flash on 7th January 2019 at 9:53 am
  Yes, of course! Copy and paste the elseif section or add an array:
  is_page( array( 42, ‘about-me’, ‘Contact’ ) );
  Read More…
Simon on 16th October 2019 at 6:58 am
The code in the toggle has gone or is broken.
- Flash on 16th October 2019 at 8:16 am
  YIKES! Problem solved.
Douguedroit Juliette on 11th November 2020 at 12:52 pm
Hello, is it possible to change the direction page of the logo ? Like the logo on my home redirects to home and the logo on the page downloads redirects to downloads ?
Thank you so much !
- Aidan Ashby on 11th November 2020 at 5:07 pm
  Now Divi has theme builder functionality a better way of doing this would be by creating unique headers for each page. That will allow you to link each header’s instance of the logo wherever you want.

Logo Changes Based Upon Page