• 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

Add Different Image After Header in Genesis

This tutorial provides the code which enables you to display a different image after the header in any Genesis child theme. Tested using the Magazine Pro child theme by StudioPress.

You can add a unique image to any single post or single page as well as any archive page type like your blog listings page, author, category, search, and tag pages as well as any custom post type or custom taxonomy type pages.

When no image is added, a default is show which you can very simply upload to your child theme images folder.

Lets take a look at the demo video which shows exactly what we just referred to :

Video Demo

Simply shows different images being displayed after the header on different posts, pages and archives.

Note : This solution uses 100% pure code however you can install and use the Advanced Custom Fields plugin if you wish to achieve exactly the same result.

Change Image Height

Change the value for the height property in the CSS:

.after-header {
    min-height: 200px;
}

Code Installation

After downloading the files below, there’s 4 simple steps to install the code :

Step 1 : Add the 2 js files from the js folder to your child themes js folder.

Step 2 : Add the PHP code from the functions.php file to the end of your child themes functions.php file.

Step 3 : Add the CSS from the style.css file to the end of your child themes style.css file. Clear caching if needed.

Step 4 : Add a image named after-header.png to your child themes images folder. This is the default image displayed if no image is added.

Here’s the code for logged in members:

Register for full access

Related Tutorials

  • Unique After Header Images On All Pages In Atmosphere Pro
  • Content Over Unique Image On Single Pages
  • Responsive After Header Image Text & Button
  • Title Over Full Width Featured Image

After Header Image Magazine Pro Theme

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.