Using Different Header Images on Different Pages

Required: Genesis Framework, Genesis Simple Hooks plugin

This is for advanced users and can only be done with a Genesis theme.

First, set up your default header image as you normally would. Then go to the Genesis > Simple Hooks menu, find the Header Hooks section, and find the genesis_before_header hook. Paste the following code in the box and make sure to check the box next to “Execute PHP on this hook?” Adjust the page slug/permalink (this is the end of the page URL, after the domain name and the forward slash), header height (this needs to be manually set to the height of your alternative header image), and the header background image URL, accordingly.

<?php
if (is_page('home'))
{
  echo "&lt;style type='text/css'&gt;#header,
.header-image #header {height:200px;} ";
  echo ".header-image #header #title-area {
background-image:url('/files/2011/01/alt-logo.jpg');
background-repeat:no-repeat;}&lt;/style&gt;";
}
?>

This modification will override the header on the home page and display the normal header on all other pages. This can be adapted to override a different page, or more than one page, by adjusting the if statement.

For example, instead of using

if (is_page('home'))

you can use

if (is_page('about'))

to override the “about” page instead. You could use

if (is_page('home') || is_page('about'))

to override both the “home” and “about” pages. You could add more if statements (using elseif for each one after the first if statement), such as

<?php
if (is_page('home'))
{
  echo "<style type='text/css'>#header,
.header-image #header {height:200px;} ";
  echo ".header-image #header #title-area {
background-image:url('/files/2011/01/alt-logo-1.jpg');
background-repeat:no-repeat;}</style>";
}
elseif (is_page('about'))
{
  echo "<style type='text/css'>#header,
.header-image #header {height:200px;} ";
  echo ".header-image #header #title-area {
background-image:url('/files/2011/01/alt-logo-2.jpg');
background-repeat:no-repeat;}</style>";
}
?>

to override the “home” page with one header image, override the “about” page with another header image, and use the default header image on the rest of your pages.