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:
- Adding custom PHP code to your child themes functions file
- Creating a custom field using the Advanced Custom Fields plugin
- 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.
Custom Field PHP Code
Add this code to the end of your child themes functions.php file. Modify the conditional tags if needed.
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.
Or you could use this code which pretty much does the same thing:
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.
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:
You can now upload an image or choose one from your media library to use on any post or page.
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.
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.