Using Different Headers On Different Pages Of The Genesis 2.0 Sample Theme

Aug 19, 2013

—

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:

Note: This code will repeat your header image so its really only suited to images where you want the text repeated or plain color/texture images without text.

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.

8 responses to “Using Different Headers On Different Pages Of The Genesis 2.0 Sample Theme”

Add Header Image Logo To Genesis 2.0 Sample Theme

May 24, 2015

[…] can also use different header images on different pages of your site even if they’re not the same […]

Loading…

Reply
Bram

February 15, 2014

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:
[code]
.contact .site-header {
background: url(“images/depurekeuken-1.jpg”) scroll 0 0 transparent;
height: 491px;
width: 960px;
overflow: auto;
margin: auto;
}
[/code]
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

Loading…

Reply
1. Bram
  
  February 15, 2014
  
  Never mind this post, i tried it with php now and that worked 🙂
  
  Loading…
  
  Reply
  1. Brad Dalton
    
    February 15, 2014
    
    Glad to here you got it working Bram.
    
    Loading…
    
    Reply
Leonard Flier

September 30, 2013

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!

Loading…

Reply
1. Brad Dalton
  
  September 30, 2013
  
  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.
  
  Loading…
  
  Reply
C. Moye

August 19, 2013

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?

Loading…

Reply
1. Brad Dalton
  
  August 19, 2013
  
  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.
  
  Loading…
  
  Reply