How to use a Fallback Image and set Default Post Thumbnail in WordPress
Most of us have beautiful, image rich, themes or custom pages for our WordPress sites. These designs rely on eye catching visuals to boost engagement and as designers we know this works well. Creating these media focused templates continues to be a growing part of the WordPress theme development world.
The designer relies on the author to include nice featured images with their posts to ensure there is something to show on the homepage along with the rest of the lovely eye-catching content thumbnails. But what if the author doesn’t include a featured image?
Why not just Set a Featured Image?
Titles are above the images in this screenshot. Notice that there is no image below the 12 months of gaming post. The missing image makes empty space appear at the bottom of the box and is very ugly. Not good for UX at all.
There are a few situations where a writer wouldn’t include a featured image so no post thumbnails would be created. Personally I don’t include one when I use the WordPress Android App to publish because there is no function to do so, or when I cross post my articles across different sites. There are a bunch of reasons why featured images are not set but as developers we must include methods of dealing with such situations. Sometimes it’s fine for us to simply say “No image? Won’t include one here then.” and not include an image with the post but other times, when the actual output depends on an image, that isn’t an option. To do this we should set default post thumbnails wherever we use post thumbnails.
Recently I was doing some work on Gaming Now creating a custom homepage template for the Twenty Twelve theme. I created a lovely little latest post box and added it to the homepage. It worked perfectly. Perfect until there was a post that didn’t have a featured image that is. Screenshot of the problem is shown to the right. One image is missing and it breaks the flow of the box completely.
How to Include a Default Post Thumbnail
Adding a set default post thumbnail to use in place of a featured thumbnail when one isn’t present is done from within the theme’s code – via the tried and tested method of a conditional statement.
WordPress has a lot of methods to use with conditional statements and today we will be using the has_post_thumbnail() method combined with an IF-ELSE to accomplish this. Navigate to the point where you include the thumbnails and you will find a line something like this: <?php the_post_thumbnail(); ?>
It might include the name of the custom thumbnail size that is used within the brackets or it may have nothing like the example above, if there is something in there then just leave it there or else you’ll use the default size of 150×150 and it could break your theme’s flow. If your unsure how to add more thumbnails sizes you should check out my post on it.
Default Post Thumbnail Code
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/default-image.jpg" alt="<?php the_title(); ?>" />
<?php } ?>
Code explanation – If the post has a thumbnail then we show it else we show another image in it’s place.
We use the bloginfo('template_directory') method to find out our theme’s directory because that is where your set default post thumbnail will be saved. You could, if you wanted, use an image from another place by simply pasting the url of the image but if this is a site/theme specific image then it makes sense to include it with the rest of the theme files.
