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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Entry Title Over Featured Image On Single Posts

This fully responsive solution enables you to display your featured image before the content on single posts & pages and float your entry title over the image so its centered and displays perfectly on any screen size like this:

title-over-image

The code also enables you to add a fallback featured image which is displayed when no image is added manually to any single post or page.

no-featured-image

The fallback image can be added to your child themes images folder as long as its named toi.jpg.

images-folder

You can then change the fallback image via the customizer so there’s no need to edit any code:

fallback-image

Demo Video

Code Installation Instructions

After you login & download the files:

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

Step 2 : Add the background image named toi.jpg to your child themes images folder.

Step 3 : Upload the 2 .js files from the js folder into your child themes js folder. Create a js folder if your child themes doesn’t already include one.

Step 4 : Copy the PHP code from the customize.php file in the lib folder and add it to your customize.php file in your child themes lib folder.

Step 5 : Copy the CSS from the style.css file and paste it before the start of the CSS for Media Queries in your child themes style.css file. You can also integrate the CSS for Media Queries into your existing themes CSS for Media Queries.

You can download the files below:

Register for full access

Related Solutions

  • Add Text Overlay To Featured Image Hover On Single Posts
  • Archive Template With Featured Image Hover Overlay
  • Content Over Unique Image On Single Pages
  • Title Over Full Width Featured Image

Featured Image

Reader Interactions

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.