In this tutorial, i’ll show you how to display different sized header images on different pages using the Genesis 2.0 Sample theme.
Here’s what we’ll be using in this post on different pages:
- Header images which are different heights & widths
- Different background colors & textures
- Different full width header images & background colors
Here’s 2 simple examples:
Different Header Background Colors
Home Page Header – Full Width 262px height
All Other Pages Header – Full Width 164px height
In the above examples, i have used both the primary and secondary nav menu’s and repositioned the secondary menu to the before header hook position using 2 lines of PHP code.
Here’s the CSS code from the child themes style.css file that will make this happen for you:
.site-header {
background: #004A7F;
height: 164px;
overflow: auto;
margin: auto;
}
.home .site-header {
background: #FF6A00;
height: 262px;
overflow: auto;
margin: auto;
}Different Header Image Sizes
You can also use different sized header images on different pages, posts, archives and templates.
The code below uses the same width and a different height for the home page and all other pages on your site.
Home Page Header – 1080px width x 262px height
.home .site-header {
background: url("images/home-header.png") no-repeat scroll 0 0 transparent;
height: 262px;
width: 1080px;
overflow: auto;
margin: auto;
}Here’s what it looks like on the home page:
All Other Pages Header – 1080px width x 164px height
.site-header {
background: url("images/page-header.png") no-repeat scroll 0 0 transparent;
height: 164px;
width: 1080px;
overflow: auto;
margin: auto;
}Here’s what it looks like on all pages except the home page:
I uploaded 2 different header image sizes with unique names to the child themes images folder.
You can also change the width and height in the code to match your different image sizes.
Different Full Width Header Image Sizes
You can also display header images which are different heights on different pages and make them display full width.
Home Page Header – Full width x 262px height
.home .site-header {
background: url("images/home-header.png") scroll 0 0 transparent;
height: 262px;
overflow: auto;
margin: auto;
}Here’s what it looks like on the home page:
All Other Pages Header – Full width x 164px height
.site-header {
background: url("images/page-header.png") scroll 0 0 transparent;
height: 164px;
overflow: auto;
margin: auto;
}Here’s what it looks like on all pages except the home page:
Other Options
You can also add different header images and sizes to other pages on your site. Here’s some CSS code snippets you can use as a guide.
Find out what the best method is to add a single logo or header image to the Sample child theme by Genesis.
Next time we’ll take a look at using home pages widgets from other StudioPress themes on the Genesis 2.0 Sample Theme.
Subscribe for new Genesis Tutorials
Hi Brad, you helped me yesterday with the Genesis simply slider to set it only on the homepage, what i want now is on the other pages different images what you do like on this page.
The thing is i am hooked the slider in the Genesis_after_header, is that a problem when i am using this code at my bottom style.css file:
I Want to show different images on like my contact, about and blog pages. But this code that i am using right now doesn’t work. Do you got a clue what i am doing wrong?
Thanks for the help yesterday!
Regards,
Bram
Never mind this post, i tried it with php now and that worked 🙂
Glad to here you got it working Bram.
Thanks Brad!
I like this method, but it took me a while to figure out how to implement it on my site. I initially made the mistake of writing the properties for the “.home .site-header” class above the properties for the “.site-header” class in my CSS file. This of course caused the CSS I wrote for the home page to be immediately overwritten by the CSS I had intended the other pages because the “.site-header” class appears in both sorts of pages. The right way to do it is the way it is shown above, with the properties for the “.home .site header” class appearing below the properties for the “.site-header” class in the CSS file. As long as no other conflicting “.site header” properties appear below it, you’re good to go.
I had thought that the “.home” class wasn’t picking out the home page. It was, but the properties for the site header had been overwritten. Duh! But that’s how you learn I guess.
I also discovered that Brad is active in the Studiopress discussion forums (http://www.studiopress.com/forums) if you’re a member there. A very helpful guy!
Hi Leonard
That is how you learn and i get dozens of server errors every day on my local installation when testing different code.
That’s the great thing about PHP as opposed to CSS, it either works or it doesn’t making CSS code harder to trouble shoot in some ways.
I always copy the entire CSS rule and paste it at the end of the file as i know cascading style sheets work that way.
Thanks for sharing your experience.
Wow! This was just what I was looking for Brad. You’re timing couldn’t have been more perfect. I think that changing the header is a great way to visually guide users through a site without using unnecessary text.
I checked out your other post (the one with the header snippets) and I just wanted to clarify something. Do we need to upgrade Genesis to HTML 5 or has the .template-name approach always worked in Genesis?
Also, is that a feature of Genesis as a framework or does the class name CSS trick work with WordPress generally?
Hi Chris
The code in this post uses the new markup so the header selectors only work on HTML 5 enabled child themes.
You can simply change selector classes from .site-header to #header in the CSS code above and use it on child themes using the old XHTML markup.
This is custom coding that works with this theme only and may work with other themes with or without modification.