Set Header Image For Different Pages

Oct 3, 2017

—

The code in this tutorial enables you to set a different header image based on any condition(s).

In this example, the code displays a different image based on category and a default image for all other pages as seen in the following demo video.

Demo Video

Shows a custom header image displayed for different categories and a default image shown for all other pages.

Simple Installation

There’s 2 simple steps :

Step 1 : Copy & paste the PHP code to the end of your child themes functions.php file.

Step 2 : Add 2 images to your child themes images folder. Name one financial.png and the other accounting.png.

Assumes you have added your default header image via Header Image setting in the customizer.

Usage With Custom Post Types

Swap out the conditional tags in the code with the following for usage on single custom post type pages:

is_singular( 'add-cpt-name-here' )

For usage with a custom post type archive :

is_post_type_archive( 'add-cpt-name-here' )

Based on this question from a member of the Genesis community :

I need to set a custom logo on a per page and CPT basis.

Comments

2 responses to “Set Header Image For Different Pages”

Michelle Gustafson

October 4, 2017

Conceptually this is what I’m looking for, however for any “financial” page I want a different logo, otherwise it’s the default image. Below is how I changed the code (hoping it would work) but it’s not.
[code]
add_filter( ‘theme_mod_header_image’, ‘filter_custom_header_image’ );

function filter_custom_header_image( $url ) {

if ( is_page( 88 ) ) :

$url = sprintf( ‘%s/images/wc-financial-planning-logo.png’, get_stylesheet_directory_uri() );

return $url;

else :

return $url;
endif;
}
[/code]
I actually tried an is_page array at first but that broke the site so thought I’d start with a single page and work from there.

This is the page which should be showing a different logo
http://luminatelocal.com/whiteco/our-firm/

Log in to Reply
1. Brad Dalton
  
  October 4, 2017
  
  I just tested this and it works
  
  [code]
  add_filter( ‘theme_mod_header_image’, ‘filter_custom_header_image’ );
  
  function filter_custom_header_image( $url ) {
  
  if ( is_front_page() ) {
  
  return $url;
  }
  
  if ( is_page( 973 ) ) :
  
  $url = sprintf( ‘%s/images/financial.png’, get_stylesheet_directory_uri() );
  
  return $url;
  
  else :
  
  return $url;
  endif;
  }
  [/code]
  
  Make sure you check the path to your image and clear caching.
  
  Also note, you can use this page template in replace of the code. Swap out the path to the image and match the menu name in the code.
  
  If you still get stuck, please send me FTP details and i’ll install it for you.
  
  Log in to Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.