This code enables you to display either a custom image or the featured image after the header on any single page. It also displays the single page title over the image like this :

Note : If you’re wanting to replicate the image on single posts, use this tutorial.

Video Demo

The video shows how you can add a featured image to display after the header and float the entry title over the image. You can also add a image URL to a custom field named image which replaces the featured image.

Code Installation

There’s 2 – 3 steps :

# From the download folder, upload the file named image-after-header.php to the Monochrome Pro themes root directory. You can select the template named Image After Header from the Template drop down menu on any single page edit screen.

If you want to load the template on all single pages, paste this code at the end of the Monochrome Pro themes functions.php file and change the file name in the locate_template function to image-after-header.php

# From the download folder, copy and paste the CSS from the style.css file to the end of the Monochrome Pro themes style.css file and clear caching.

# New versions using Gutenberg. If your version of Monochrome Pro uses gutenberg, it won’t include the backstretch files so you’ll need to upload both the backstretch.js and backstretch-set.js file to your Monochrome Pro themes js folder.