• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  • Different Header Background Image On Any Page

Reader Interactions

Comments

  1. Danielle says

    June 27, 2014 at 2:23 pm

    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.

    Log in to Reply
    • Brad Dalton says

      June 27, 2014 at 2:26 pm

      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.

      Log in to Reply
  2. Danielle says

    June 27, 2014 at 2:13 pm

    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!

    Log in to Reply
    • Brad Dalton says

      June 27, 2014 at 2:21 pm

      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.

      Log in to Reply
  3. Janeth says

    March 21, 2014 at 2:23 am

    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

    Log in to Reply
    • Brad Dalton says

      March 21, 2014 at 12:33 pm

      I think you have that option in the plugin settings to determine exactly where the meta box displays.

      Log in to Reply
  4. Patricia says

    March 6, 2014 at 4:15 pm

    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!

    Log in to Reply
    • Brad Dalton says

      March 6, 2014 at 6:05 pm

      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.

      Log in to Reply
  5. Patricia says

    March 6, 2014 at 10:44 am

    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!

    Log in to Reply
    • Brad Dalton says

      March 6, 2014 at 12:17 pm

      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.

      Log in to Reply
  6. Amanda says

    February 28, 2014 at 9:43 am

    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.

    Log in to Reply
    • Brad Dalton says

      February 28, 2014 at 11:38 am

      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/

      Log in to Reply
      • Amanda says

        March 3, 2014 at 12:16 pm

        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

        Log in to Reply
        • Brad Dalton says

          March 3, 2014 at 12:23 pm

          Hi Amanda

          Cool!

          Log in to Reply
  7. Bram says

    February 15, 2014 at 3:22 pm

    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

    Log in to Reply
    • Bram says

      February 15, 2014 at 3:23 pm

      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;
      }}
      Log in to Reply
    • Brad Dalton says

      February 15, 2014 at 5:28 pm

      There’s no class for custom_headers as its a custom field name.

      You can simply wrap it in a new class.

      Log in to Reply
  8. Janeth says

    December 31, 2013 at 4:08 am

    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

    Log in to Reply
    • Brad Dalton says

      December 31, 2013 at 9:09 am

      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.

      Log in to Reply
      • Janeth says

        January 4, 2014 at 5:33 pm

        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 🙂

        Log in to Reply
      • Janeth says

        January 6, 2014 at 8:58 pm

        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

        Log in to Reply
  9. Seb Gates says

    August 17, 2013 at 12:23 pm

    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

    Log in to Reply
    • Brad Dalton says

      August 17, 2013 at 12:32 pm

      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

      Log in to Reply
  10. Andy says

    July 7, 2013 at 10:55 am

    Hi Brad,
    Does this rely on have the Genesis Simple Hooks plugin?

    Log in to Reply
    • Brad Dalton says

      July 7, 2013 at 11:19 am

      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.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.