There’s several different ways you can display one header image on the homepage and another on all other pages.
- You can use php code with a conditional tag in the Genesis Simple Hooks plugin.
- You can write a custom function which includes a conditional tag.
- And you can use CSS code to get the job done as well which may be the best option for you depending on your needs.
Lets take a look at using PHP code and then we’ll look at how to use CSS code to get the job done.
PHP Custom Function
This is a better way to do it in my opinion if you want to use PHP code:
function specific_header_image(){
if(is_home())
echo '<div class="home-header"><img src="http://example.com/path/to/image.png" alt="home header image" /></div>';
elseif(is_page() )
echo '<div class="page-header"><img src="http://example.com/path/to/image.png" alt="page header image" /></div>';
}
add_action('genesis_header', 'specific_header_image');The only problem is, you will also need to tweak your CSS to make your images look their best. You can do this using the 2 classes generated by the above PHP code.
Using CSS To Display Different Header Image Sizes On Specific Pages
One the reasons you may choose to use CSS rather than PHP is the fact you’ll need to unhook the genesis_header in Simple hooks otherwise you’ll find both headers displaying on the same page.
When you unhook the genesis_header hook, you also disable the header right widget which may not be ideal especially if you use it to display something.
Simple modify this code and add it to the end of your child themes style.css file.
.home .site-header {
height: 262px;
background: url("images/big.png") no-repeat scroll 0 0 transparent;
}
.site-header {
max-width: 980px;
margin: 0 auto;
width: 100%;
height: 149px;
background: url("images/small.png") no-repeat scroll 0 0 transparent;
}Change the images/big.png and small.png to the full url to your different header images.
You can grab this from your WordPress media library.
The above code displays a unique header image on the home page whereas all other pages display a smaller header image.
But what if i want more than 2 header images to display on different pages, posts and archives?
What if the header images are all different heights?
You’ll need to use the body class or create custom classes for this.
Here’s another method which is the best in my opinion.
The Best Solution With CSS
Simply remove the PHP code from your child themes functions.php which adds support for a custom header to your theme:
/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array(
'width' => 960,
'height' => 120
) );Removing this code will NOT effect the header right widget.
Then add this CSS code to the end of your child themes style.css file.
.site-header {
background: url("images/home-header.png") no-repeat scroll 0 0 transparent;
height: 300px;
}
.page-template-default .site-header {
background: url("images/page-header.png") no-repeat scroll 0 0 transparent;
height: 120px;
}Here’s some working CSS examples that work based on different scenarios.
No need to unhook the header or do anything else if using this code.
Simply upload 2 images to your child themes images folder named page-header and home-header. Both should be the same width and you can easily modify the height in the above codes CSS which should match the actual height of each header image.
Plugin for Displaying Headers On Specific Pages
The WP Display Header plugin enables you to display specific header images on posts, pages, custom posts types and archives pages.
Leave a Reply
You must be logged in to post a comment.