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 :
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.
Register or login to access the download folder :
Hey Brad! How would we make this work for the Blog page template?
Hello Shay, this is the best method in my opinion https://wpsites.net/web-design/image-after-header-on-genesis-blog-page-template/
Or
If you want a simple solution, try these code snippets.
Thank you! I’m trying to implement the first solution you recommend, but the download folder won’t open/expand. Could you check that?
I emailed you the files.
Here’s the new solution which also works on the blog page template https://wpsites.net/web-design/monochrome-pro-image-after-header-on-any-page-type/
Also note, i just published this which adds the image in the same style as the single post image which is different to the above tutorial https://wpsites.net/web-design/monochrome-pro-archive-templates-for-image-after-header/