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:
Well… I just figured out the answer to my first question that I asked you 🙂
I added another rule to the location under the Custom Fields plugin for Top Level Page (parent of 0).
I still do not know about my second question though… Some of my pages use the same header image so I’d prefer not to have to upload a new image each time I add a the header image. If there is a way for me to pick the image from the library that would be great.
I would use one of the plugins i linked to in the previous reply otherwise the code will need to be modified to your specifications.
Hi Brad. Thanks so much for this tutorial (and many others)!
I have added a header image to a Genesis site using child theme Minimum Pro and it worked just as it was supposed to, but now I’m having an issue where the custom header image meta box has stopped displaying whenever I add a new page so I can’t add the header image to new pages. Any ideas of what I could be doing wrong?
Also, on the pages that the custom header image meta box does show up, when I click to choose the image it only allows me to upload a new image (I can’t select one that already is added to the library). Is there a way to change that so I can select an image from the library?
Thanks so much in advance for any advice!
Hello Danielle
Have you considered using a plugin?
The 2 best custom header plugins are in this list http://wpsites.net/best-plugins/top-wordpress-plugins/
Any issues with the meta boxes relate to the plugin settings which determine where the meta boxes display.
Another option is to hand code the meta boxes which is more for theme Developers.
Hard to say what the issue is without logging in as its most likely an admin or plugin settings issue.
Hi Brad,
Thanks for your great tutorial.
I would like to ask you a question: Is there a way to remove the metabox to appear on every post form? I am using the events manager plugin and I would like to hide the Add Custom Header Image from there, permanently.
Any help would be greatly appreciate it.
Janeth
I think you have that option in the plugin settings to determine exactly where the meta box displays.
Hi Brad! Another question. How do you get the custom field to work on all posts? Basically, I’m trying to get a different header to show on the blog page and on all posts.
Thanks!
The plugin settings enable you to determine where the meta box for the custom field displays.
You can then add an image which is linked to any page in the meta box.
I did add some code which works specifically with Genesis which you may want to try. You can also add any conditional tag after the function in the code if needed.
Hi Brad!
Thanks for this tutorial! I was able to set a different header image for the blog page by following the steps you outlined. However, the image is not clickable, and the header right widget disappeared on the page. Is there anything I need to add to the settings to fix this? Also, how do I get it to show on all posts? Right now it’s showing on the blog page, but when I click on a post, the default header image shows up (but is also not clickable).
I’d appreciate any help. Thanks!
You could add any custom link to it when you add it or install a plugin to get the job done.
WP Display Header is one which is good and custom headers is another.
Otherwise you could use some different code (which i’ll add here later on) which adds a link to the header image using the custom field.
To remove the default header, you will need to add another code snippet which is included in the tutorial.
Hi Brad,
I am currently using the Genesis Framework and the Executive Pro child theme. I have added custom images in the ‘genesis_before_content_sidebar_wrap’ hook – using your tip I am able to insert the images – thank you.
I don’t know how to add images to the archive and category pages though. I tried to add an else statement saying that if it is a archive or category page, it must fall back to a “default” image but I can’t code so it didn’t work.
Any assistance would be greatly appreciated.
Hello Amanda
You can do this many different ways however the easiest is simply to add the HTML for each image to the Category Archive Settings > Archive Intro Text field.
Otherwise you can code multiple widget areas for each category archive or hook in an image for each category. http://wpsites.net/best-plugins/add-html-image-before-category-archive-posts/
Hi Brad,
In the end I added an if statement to the genesis_before_content_sidebar_wrap hook using the Simple Hooks Plugin which seemed to do the trick.
Thank you again for a very resourceful site and for replying to my question.
Amanda
Hi Amanda
Cool!
Hi Brad,
I love your tips and i am reading them alot!
I got my header images on my page now with the advanced custom fields plugin. But how can i center the image? I want to give my php code a div class or something i guess because i can’t find the class name custom_headers when i inspect my site.
Regards Bram
the code i used right now is :
There’s no class for custom_headers as its a custom field name.
You can simply wrap it in a new class.
Hi Brad, Thank you so much for this tutorial, I applied and it worked pretty good on my local site.
I just had one problem. My logo image appears only on my homepage and not in the rest of the pages. The logo image is inside header so I guess after removing header conditionally it took it away. This is the source code on the homepage:
and this is the source code on the rest of the pages:
and this is the function to set the header style on my functions.php file:
Any help would be greatly appreciated it.
thanks,
Janeth
Hello Janeth
What theme are you using?
The solution has been designed so that you need to add a unique header image for each page/post as the default will only display on the home page.
Hello Brad,
Sorry it took me a while to reply your message..
I am using Grind Theme from themedy.com : http://themedy.com/demos/?theme=grind
Thanks 🙂
Hello Brad,
Well, I ended up leaving this line of code and my logo came back on every page:
It is not repeating the header, so I guess everything is fine.
thank you very much again.
Janeth
Hi Brad, you have helped me out a lot in the lat 6 months while I was getting used to Genesis, thanks a lot, I appreciate it. I am happy I found this tutorial. Could you do me one favour? I want to create a custom field to allow a client to upload an image to the area above the article/page content and under the page/post title. I have successfully installed Advanced Custom Fields and I can see the image in the edit page view of WordPress. I guess I need to link the custom Field to some php like you have in the article. Can you give me any tips on how I should do it?
Thanks – Seb
Hi Seb
Simply change the hook to the after post title hook for child themes running the old loop hooks example: genesis_header to genesis_after_post_title
or
The new loop hooks and use a third parameter for positioning priority. genesis_entry_header
Hi Brad,
Does this rely on have the Genesis Simple Hooks plugin?
No Andy. The Simple hooks plugin merely outputs and executes PHP code in all the Genesis hook locations.
This code already includes the genesis_hook however you could modify the code and use it in the Simple Hooks plugin.