• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

Header Image

Reader Interactions

Comments

  1. 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/

    Log in to 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.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags