• 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

Responsive Image After Header On Single Pages in Genesis

This post contains 2 code snippets which enable you to add a unique image after the header on any single page.

Here’s how the 2 solutions work :

Solution 1 – Your image is only displayed when one is added via a custom field named after_header

Solution 2 – If no image is added, a default named after-header.jpg is pulled from your child themes images folder.

Solution 3 & 4 support ACF and display the image if added and ACF is inactive. Assumes ACF settings for return field are :

Here’s the demo video showing how it works :

Demo Video

Shows the default image added after the header on single pages only and a continue image added when URL added to custom field named after_header. Also shows the image resize on smaller screens.

Tested using the Atmosphere Pro child theme by StudioPress however will work in most Genesis child themes without modification.

Installation

Add 1 of the code snippets from the download folder to the end of your child themes functions file.

Add Image

Add your image URL to a custom field like this :

Note : Includes 2 code snippets. Solution 3 & 4 support ACF & WP custom fields meaning your image will display if you deactivate ACF.

Register or login to access the download folder :

Register for full access

Related Tutorials

  • After Header Parallax Image

After Header Image Atmosphere Pro Theme Custom Fields

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.