Problem: We want to display a post’s title along with the featured image above the post content for every blog post. If the post does not have a featured image we want to do nothing.
Here’s a look at what we’re going to create,
This is similar to what we’ve done in a previous tutorial, however quite a few readers requested a way to add this image along with a post title.
We are going to get the post’s featured image along with the height of the large and medium sizes. We then check to see if we’re on a post and if the post has a thumbnail. If you wish for this to only work on pages you may is_single() to is_page(). If both of these conditions are met we remove the post title and it’s markup and then readd the new markup and post title in a custom hook we’ve built known as bw_featured_title.
Copy and paste the following code at the end of your funcions.php
Functions.php
The following code goes into your style.css file. You may have to adjust these styles to match your theme, but this will help center the post title text on the image.
One suggestion is to use a linear gradient above the background-image to darken the image and help show the text. There are a number of other techniques to accomplish this. Have a look at this article on CSS Tricks for tips on how to place text on top of images.
Style.css
Result
Do you have any questions or need help implementing this tutorial? Please leave a comment below.