Full Width Image After Header With Overlaying Title

This template enables you to display an image after the header on single posts and single pages like this :

After Header Image

In this case, the featured image is displayed if added, otherwise, a default image named bg.jpg is pulled from your child themes images folder and shown by default.

The after header image is added for all single posts. It is only shown on single pages when the Page Template named After Header Image is selected as seen in the demo video.

Note : You can load the template on all single pages by default using the code from this tutorial. Make sure you swap out the is_front_page conditional tag with the conditional tag for single pages which is is_singular('page') as well as changing the file name from page_landing.php to single.php.

Demo Video #

Shows the full width featured image or default image named bg.jpg displayed after the header on single posts by default and after the header on single pages when the After Header Image template is selected on the Edit Page scree,

Tested using the Altitude Pro & Genesis Sample child themes by StudioPress however will work in most Genesis child themes.

Installation Steps

There’s 2 steps :

# Step 1 : Upload the file named single.php to your child themes root directory.

# Step 2 : Copy & paste the CSS to the end of your child themes style.css file and clear caching.

Download Folder

Note : If using this template in themes other than Altitude Pro, change the 3rd parameter on line 22 of single.php from 5 to 12 as Altitude Pro uses a custom function to modify the default post info output not used in other Genesis child themes.

Usage On Single Pages

# Step 3 : On the Edit Page screen, select the template named After Header Image from the Page Attributes box like this :

or

You can use this code to load it on all single pages automatically rather than having to select the template using the Page Attributes on every single page.

Related Templates

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.