This code displays the entry title over the featured image. The entry title is repositioned to the after header position and the featured image is also added after the header. The solution is coded to work with single page titles only however this can easily be modified to work with single posts or both. All you need to do is change the conditional tag.
If no featured image is added, a fallback image is displayed from your child themes images folder named after-header.jpg. You can change the fallback image in the images folder or change it using the WordPress customizer.
You can also use the code in your functions file with any conditional tag or in a single template file.
Optional Extras
The code also removes the breadcrumbs and displays them before the entry title. It then adds a call to action button which inks to any URL you add using a custom field. If no URL added, it links the button to a scroll point hooked into any Genesis hook location.
All the optional extras can be easily modified or removed.
The code also includes jQuery to control the size of the featured image. You can set the height for the image in the jQuery file named after-header.js or remove the file and use CSS to control the height of the image. This provides the best solution for making sure your images display perfectly on all screen sizes.
Demo Video
Here’s the instructions & code for logged in members:
Was This Tutorial Helpful?