WP SITES

2752

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

Unique Header Images in Genesis

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.

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:

Register for full access

Related Tutorials

Reader Interactions

Comments

  1. 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.

  2. 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!

  3. 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

  4. 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.

  5. 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.

  6. 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.

  7. 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 : 

      add_action( 'genesis_after_header', 'custom_header_image' );
function custom_header_image() {
if (is_singular( array( 'post', 'page' ) ) ) {
if( get_field('custom_headers') ):
?&gt;&lt;img src=&quot;" alt="custom_headers" /&gt;&lt;?php
endif;
}}

  8. 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,

        Well, I ended up leaving this line of code and my logo came back on every page:

        add_action('get_header', 'wpsites_remove_header');
function wpsites_remove_header() {
   if (is_single() || is_page() ) {
      remove_action( 'genesis_header', 'genesis_do_header' );
   }
}

        It is not repeating the header, so I guess everything is fine.

        thank you very much again.

        Janeth

  9. 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

    • 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.

Leave a Reply