• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

WP SITES

2468

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Subscribe
  • Register
  • Videos
  • Log in

Need Help? - Get Coding Support Now

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

home header backround color

All Other Pages Header – Full Width 164px height

page header

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:

big home header

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:

small page header exclude 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:

full width home header background image

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:

full width page header background image

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.

Subscribe for new Genesis Tutorials

Primary Sidebar

Recently Coded

  • Infinity Pro – Change Team Page From 4 To 3 Columns
  • Infinity Pro Vertical Menu
  • Genesis Sample Theme – Custom Archive Page Template With Different Hero Images
  • Foodie Pro – Reposition Search Box Before Nav Menu
  • Showcase Pro – Use Custom Image As Single Post Entry Header Background

Brad Dalton Specializes In Genesis child theme customization & code modification.

Advertise · WPEngine · Genesis · Log in

  • Membership
  • by Theme
  • Contact
  • RSS
  • Newsletter ( Twice Weekly )