Set Header Image For Different Pages

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.

Register or login to access the PHP code for members.

Register for full access

Related Tutorials

Template For Custom Logo & Different Menu

Comments

Michelle Gustafson says

October 4, 2017 at 10:08 am
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.
```
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;
}
```
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/
Reply
- Brad Dalton says
  
  October 4, 2017 at 7:00 pm
  I just tested this and it works
  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; }
  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.
  Reply

Leave a Reply Cancel reply