WordPress Child Theme Tip: Featured Image as background or default image as background

Recommended skill: child themes. some php understanding and definitely css

In today’s adventures in child theming I was asked to have either a default image or the featured image appear in the banner as a background image on individual blog pages for the Eptima Lite theme. I’m sure there are easier ways to do this but this particular solution worked extremely well after a few hours of reading and digging through multiple “ways” to do it. I always create a child theme when asked to make any changes to an established site. The client had picked their theme already and just wanted a few changes made, no need to create a theme from scratch with Bones  (which I’ve done in the past).

the following information is based on the assumption that you already have a child theme setup. If you haven’t already done so make a copy of the header.php from the main theme (in this case Eptima Lite) and put it in your child theme directory.

In your header.php add the following code:

A little explanation:

This code block here is saying IF the post has a featured image display it

Otherwise display a default image:

And this is where the image is converted to a background image (if you don’t include this line it’s added to the html as an img src which is difficult to stretch for a banner)

You will need to add padding or height for your image to display since it is now a background image 🙂

You can use background-size: cover as well to get the background image to fill your element.

I will add more to this post if I discover a better way to achieve the same thing.