Add Unique Header Images Using Custom Fields

In this tutorial, i’ll show you how to create your own custom field which enables you to add different header images in Genesis.

I’ll also give you the code i’ve written and tested which you can use or easily modify to meet your own needs.

The tutorial involves 3 simple steps:

  1. Adding custom PHP code to your child themes functions file
  2. Creating a custom field using the Advanced Custom Fields plugin
  3. Using the plugin to create a custom meta box which displays on all edit screens

Steps 2 and 3 and are included together using the plugin.

Note: You can still use the built in custom header function that most themes include as well. This way, the default header image you upload on the Custom Header page, will display globally if you don’t add a unique header image using your new custom meta box.

Custom Field PHP Code

Add this code to the end of your child themes functions.php file.

add_action( 'genesis_header', 'before_single_post_image' );
function before_single_post_image() {
$image = get_post_meta( get_the_ID(), 'acf_image', true );
	 if( ! empty( $image ) ) {
	echo '<div class="acf-image">' . wp_get_attachment_image( $image, 'full' ) . '</div>';

The code creates a custom field which uses the genesis_header hook and only works using conditional tags which in this case work for single posts and pages. You could change the conditionals to work for archives and category pages if needed.

You could also use the ACF functions however these are dependant on the plugin being installed and won’t work if you deactivate it.

Removing The Genesis Header

You can remove the genesis header and markup if needed using this code:

remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 ) ;

Genesis Users

This code has been written specifically for Genesis users and includes the genesis_get_custom_field function to output your custom field.

Remove Header Conditionally

You’ll also need to remove the header image if using the custom field to add a different one otherwise 2 header images will display.

Next step is to create a custom field using the Advanced Custom Fields plugin

Create Custom Field & Meta Box Using Plugin

Once you install the Advanced Custom Fields plugin, you’ll need to create a new field using exactly the same field name as you use in the code. In this case its custom_headers.

custom field and meta box

The settings in the image are exactly what i used.

Custom Header Image Meta Box

Here’s what the new custom fields meta box looks like on all edit screens:

Add Custom Header Image

You can now upload an image or choose one from your media library to use on any post or page.

Custom Header Image

Note: The code does not include any function to resize or crop your header images so you will need to do this before uploading them.

You can find out the header image sizes by going to Appearance > Custom Header and see exactly what width and height you need. The height is flexible for each header image.

Other Options

You could also use this tutorial to create a custom field and meta box for a second featured image

Prefer a plugin to coding? The WP Display Header plugin enables you to display specific header images on posts, pages, custom posts types and archives pages. No coding skills needed however its not customizable either therefore not as flexible and powerful.

If you prefer CSS, here’s a post listing all the code you can use to display different headers images using CSS.

I’ll be writing more about how to use custom fields to customize your theme shortly.

Related Tutorials

Need More Help?

Join WP Sites to get full access to all tutorials & code.

  • Support for installation & modification of existing PHP code
  • Help with Genesis & StudioPress theme customisation
  • Access all tutorials & code snippets
  • Ask questions in the comments & get answers
  • Education - Request video explaining how the code works and what functions are included

Click Here to Learn More