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

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.