• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Monochrome Pro Image After Header On Single Pages

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 :

  1. # 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

  2.  

    Step 1

  3. # 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.
  4.  

    Step 2

  5. # 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.
  6.  

    Step 3

Register or login to access the download folder :

Download Folder

Related Templates

  • Use single.php Template On All Post Types In Monochrome Pro

After Header Image Gutenberg Monochrome Pro

Reader Interactions

Comments

  1. Shay Bocks says

    January 8, 2018 at 9:33 am

    Hey Brad! How would we make this work for the Blog page template?

    Log in to Reply
    • Brad Dalton says

      January 8, 2018 at 11:45 pm

      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.

      Log in to Reply
      • Shay Bocks says

        January 18, 2018 at 5:13 am

        Thank you! I’m trying to implement the first solution you recommend, but the download folder won’t open/expand. Could you check that?

        Log in to Reply
        • Brad Dalton says

          January 18, 2018 at 5:19 am

          I emailed you the files.

          Log in to Reply
    • Brad Dalton says

      January 18, 2018 at 10:00 pm

      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/

      Log in to Reply
    • Brad Dalton says

      January 23, 2019 at 12:10 am

      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/

      Log in to Reply

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.