Logo Changes Based Upon Page

October 23, 2015

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%
  • Ease of Use 78%
  • Wow Factor 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
<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 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 class="custom-logo" src="http://path-to-your-image" /><!-- Replace image path with the url to you image -->
		</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 class="custom-logo" src="http://path-to-your-image" /><!-- Replace image path with the url to you image -->
		</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 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
}	
?>

</code>

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):

<code>			
<?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 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> 
</code>

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

Pin It on Pinterest

Signup For Access To Free WordPress Tips & Resources

Signup For Access To Free WordPress Tips & Resources

Signup for our very occasional newsletter and get access to free downloads, as well as WordPress tips, tricks and resources.

You have Successfully Subscribed!