There’s many different methods you can choose from to display a different header image on all posts in a specific category.
In this post, i’ll show you 2 ways.
- The 1st is a custom function which pulls a unique header image from your child themes images folder and uses a conditional tag to display it on one specific category archive page as well as all posts within the same category. It then displays a default image for all other pages and posts.
- The 2nd method uses the template_include function in your child theme conditionally to display a custom header template for a specific category as wel as single posts assigned to that category.
Solution 1
Simply copy this PHP from the view raw link in the Gist and paste it at the end of your child themes functions file. Then you can add your images to your child themes images folder making sure they match the same file path, name and extension as whats in the code.
Solution 2
This code displays a unique header image on all posts in one specific category as well as the category archive page for the same category.
You can easily modify the conditional tag if you only want the unique header image to display either on the category page or only on posts in one specific category.
There’s 3 steps needed to make this work:
- Add a default header image
- Create a new custom header file
- Use a custom function to include the new custom header file conditionally
Step 1
Add your default header by going to Appearance > Header > Custom Header feature. You may need to modify the values for width and height in your child themes functions file. Here’s an example of what the code looks like:
//* Add support for custom header
add_theme_support( 'custom-header', array(
'width' => 1140,
'height' => 200,
'header-selector' => '.site-header .title-area',
'header-text' => false
) );Step 2
- Create a new file named custom-header.php.
- Copy the PHP code from the view raw link in the 1st Gist labelled custom-header.php and paste it into the new file which you can then upload to your child themes root directory.
Make sure the path, file name and extension to the header image in your child themes images folder matches whats in the code.
Step 3
Copy the PHP code in the Gist above labelled functions.php and paste it at the end of your child themes functions.hp file using a text editor.
Make sure you replace the slug in the conditional tag with the category or I.D slug of your own.
Style.css File Tweaks
Note: You may also need to change the width and height values under the Site Header section of your child themes style.css file to match what you use in your functions file for the custom header function.
Also look for the height and width values for the .header-image .site-title a classes.
Notes
- Tested on the Executive Pro child theme by StudioPress and may need tweaking for use on other themes
Also check out plugins like WP Display Header and Justin Tadlocks Custom Header Extended plugin.
Leave a Reply
You must be logged in to post a comment.