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.

Open for Editing 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" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?> /><!-- 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" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?> /><!-- 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>
Copy Paste Text in header.php

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 🙂

Pin It on Pinterest