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.
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.
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.
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.
Show Default Header If No Custom Header Added
This solution shows the default header added using the custom header link in the customizer if no image is added using custom fields.
Demo Video
Here’s the code for logged in members:
Leave a Reply
You must be logged in to post a comment.