Custom Header Images With A Default

In this tutorial, i’ll show you how to easily add a different header to any page on your site.

If you don’t, a default image will display in its place.

This solution works well if you want to add unique header images for new posts and pages. If you only want a handful of different headers, then you could use CSS code instead.

I’ve already shown you one way to display unique headers using custom fields, however this method is slightly different as the code is different and generates a new editor rather than image field type for adding your custom header.

There’s 2 steps you need to take to make this happen:

1. Add a few lines of PHP code to your child themes functions.php file.
2. Install a plugin and use the exact same settings i’ll provide for you in a screenshot.

Here’s the code:

remove_action( 'genesis_header', 'genesis_do_header' );

add_action('genesis_header', 'header_image_custom_field');
function header_image_custom_field() {
if ( genesis_get_custom_field('custom_headers') ) 
echo '<div class="custom-header">'. genesis_get_custom_field('custom_headers') .'</div>';

else { echo '<div class="custom-header"><img src="http://example.com/wp-content/uploads/2013/09/logo.png" alt="page header image" /></div>';
  }
}

Make sure you replace the full url with the example url in the code above for your default header image.

All PHP code should be pasted at the end of your child themes functions.,php file using a text editor like Notepad++.

Next step is to install the Advanced Custom Fields plugin and use exactly the same settings as in this screenshot below.

Now you find a small Editor on all edit screens which you use to add a custom header to any page or post.

Styling

The styling is going to be different for each theme however the custom header and default header will be styled slightly differently by default.

If you use the solution in this tutorial, please share the CSS you add and the child theme you’re using. Thanks

Other Methods

• Plugin for Displaying Headers On Specific Pages