Full Width Banner Image with Post Title Overlay

Setup

In this tutorial, we are going to add a full width banner image to all posts. The banner will pull the post’s featured image, if it has one, or a default custom image if not. We will add the title of the post as a caption on top of the banner. Finally, we will remove the default post title and post info using the Sandbox Addon.

Video Walkthrough

Tutorial Code

This tutorial includes some custom CSS for styling the banner image. It also used some PHP code in conjunction with the Sandbox Addon to remove the original post titles and post info. The code that we used is below:

Custom CSS

Sandbox PHP