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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Custom Header Images With A Default

In this tutorial, i’ll show you how to easily add a different header to any page on your site.

If you don’t, a default image will display in its place.

This solution works well if you want to add unique header images for new posts and pages. If you only want a handful of different headers, then you could use CSS code instead.

I’ve already shown you one way to display unique headers using custom fields, however this method is slightly different as the code is different and generates a new editor rather than image field type for adding your custom header.

There’s 2 steps you need to take to make this happen:

  1. Add a few lines of PHP code to your child themes functions.php file.
  2. Install a plugin and use the exact same settings i’ll provide for you in a screenshot.

Here’s the code:

remove_action( 'genesis_header', 'genesis_do_header' );

add_action('genesis_header', 'header_image_custom_field');
function header_image_custom_field() {
if ( genesis_get_custom_field('custom_headers') ) 
echo '<div class="custom-header">'. genesis_get_custom_field('custom_headers') .'</div>';

else { echo '<div class="custom-header"><img src="http://example.com/wp-content/uploads/2013/09/logo.png" alt="page header image" /></div>';
  }
}

Make sure you replace the full url with the example url in the code above for your default header image.

All PHP code should be pasted at the end of your child themes functions.,php file using a text editor like Notepad++.

Next step is to install the Advanced Custom Fields plugin and use exactly the same settings as in this screenshot below.

custom fields settings

Now you find a small Editor on all edit screens which you use to add a custom header to any page or post.

add custom header

Styling

The styling is going to be different for each theme however the custom header and default header will be styled slightly differently by default.

If you use the solution in this tutorial, please share the CSS you add and the child theme you’re using. Thanks

Other Methods

  • Plugin for Displaying Headers On Specific Pages

Reader Interactions

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.