How To Add Fallback Featured Image In WordPress Theme

WordPress, as CMS, let’s you add featured images in your posts and pages by default. If you have created any of the custom post types then too, there is option of supporting the featured images for those too. But, what if your theme is displaying the blog post archive page in grid layout and you forgot to add featured image. Well, then, on this case, it is likely that the design will be off. So here we will learn about how to add fallback featured in WordPress theme. So, let’s move ahead and learn about how to do it, shall we?

What is featured image is WordPress?

First of all, you might need to know about what is featured image in WordPress and how it can be utilized for your site.

In general, featured image in WordPress is the main image of the article or page which you are currently creating. It can be used as the main image of the post/page to be shared on social sites as main image. It also can give you general idea about what the post/page currently holds inside it as content.

How to add fallback featured image in WordPress?

Now, since you know about the basic on featured image and its importance in WordPress, now you may want to add the featured images in your posts and pages created, right? But, how about if you mistakenly forgot to add the featured image? Well, we do sometimes mistakes on such however, here we will learn about how to add fallback featured image in WordPress to remedy such mistake displaying default featured image provided via the theme. So, let’s move ahead and learn it, shall we?

For this, you need to find the code within the theme, which you have used on your site, which displays the featured image. The code, which displays the featured image within your site is: the_post_thumbnail(). So, after finding that code within your theme, to add fallback featured image in WordPress, just add the below PHP code in it.

For eg: here we will take Twenty Seventeen theme as example. In this theme, it is displayed via the template file, which is located in: template-parts/post/content.php file.

Here, inside in file, you can find the code: <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?> which displays the featured image. So, we need to modify it as needed. Hence, let’s move ahead and add fallback featured in WordPress in this very theme.

To do so, modify that previously mentioned code with the below PHP code and you will be on target:

<?php
if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'twentyseventeen-featured-image' );
} else {
    ?>
    <img src="<?php echo get_template_directory_uri(); ?>/screenshot.png" />
    <?php
}
?>

Also, for this theme, you need to modify the code: <?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?> with this one: <?php if ( ! is_single() ) : ?> since it is preventing to not display image if no featured image is set.

Now, let’s move ahead and see about the application of adding fallback featured image in WordPress theme built, shall we?

Output of adding fallback featured image in WordPress theme

If you have applied the previously mentioned code properly within your site then, you can see the similar result as of ours in your’s case too:

The above screenshot if before applying fallback featured image in WordPress theme. Now, below shows you screenshot on after applying fallback featured image in WordPress theme.

Here, you can see in the output, we have took the screenshot of that very theme as fallback for the featured image for this theme.

You may also want to read:

1. Display Header Video In WordPress In Different Pages
2. Recover Forgotten Password From Local WordPress Install
3. How To Create Meta Box In WordPress
4. Integrate Bootstrap NavBar 4 Into WordPress Theme
5. Display Image Caption Under Featured Images In WordPress
6. Display Author Bio Without The Use Of Plugin

Conclusion

If you have followed this tutorial properly and became successful on adding fallback featured image in WordPress then, we can say that you are more familiar on this than before. However, if you are still confused on it then, do drop the comment below on the comment box and we will follow it up.