Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Set a Default Fallback Image for WordPress Post Thumbnails

Last updated on by
Elegant Themes
How to Set a Default Fallback Image for WordPress Post Thumbnails

WordPress has this very cool post thumbnail feature which was added in version 2.9. This feature basically allows you to add a custom image as a thumbnail that represents that post. This feature has become a standard for theme designers. But often, new bloggers forget to set a post thumbnail (featured image) which causes the template display to break. Second, it just looks unprofessional to have broken images or empty areas on homepage where the thumbnail was suppose to be. We believe that theme designers and developers should create a new standard of adding a default fallback image for WordPress post thumbnails in their themes. Popular frameworks like Genesis already has this type of option built-in where if the user does not specify a post thumbnail (featured image), then the first image attachment within the post will be displayed as the thumbnail. In this article, we will show you two different ways of adding a default fallback image for WordPress Post Thumbnails.

To utilize the tricks in this post, you have to enable the post thumbnails in your WordPress theme.

Adding a Branded Image as the Default Fallback

Often when creating a custom site for a client, they may have posts that has absolutely no image. So it is always smart for designers to create a branded image that is displayed for posts that has no thumbnail specified. The philosophy of this idea is similar to having a customized gravatar in WordPress. All you really have to do is open the theme file where you are going to display the post thumbnail, this can be (home.php, single.php, loop.php, index.php, archive.php, etc). Then simply paste the following code within the post loop.

<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/default-image.jpg" alt="<?php the_title(); ?>" />
<?php } ?>

Explanation: The code checks if the post has a specified thumbnail, and if there is, then it will display the post thumbnail. If there is no post thumbnail specified, then it will display ‘default-image.jpg’ image from your theme’s images folder.

This is the very basic example. You can obviously expand on it with thumbnail sizes, class and much more.

Adding the First Post Image as the Default Fallback

Often new bloggers add images to the post, but either they forget to specify a post thumbnail, or they simply do not know how to. Regardless of what the case is, we as developers should prepare in advance. So the trick that we have seen used specially in theme frameworks like Genesis is adding the first post image as the default fallback for WordPress post thumbnails. To do this, you have to open your theme’s functions.php file and add the following codes:

//function to call first uploaded image in functions file
function main_image() {
$files = get_children('post_parent='.get_the_ID().'&post_type=attachment
&post_mime_type=image&order=desc');
  if($files) :
    $keys = array_reverse(array_keys($files));
    $j=0;
    $num = $keys[$j];
    $image=wp_get_attachment_image($num, 'large', true);
    $imagepieces = explode('"', $image);
    $imagepath = $imagepieces[1];
    $main=wp_get_attachment_url($num);
		$template=get_template_directory();
		$the_title=get_the_title();
    print "<img src='$main' alt='$the_title' class='frame' />";
  endif;
}

Then open the theme file where you are displaying the WordPress post thumbnail, this can be (home.php, single.php, loop.php, index.php, archive.php, etc) and paste the following code:

<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
  echo get_the_post_thumbnail($post->ID);
} else {
   echo main_image();
} ?>

Explanation: First we create a function that gets the first image attachment for each post. In our theme file code, we check if the post has a thumbnail. If the thumbnail exist, then we display the thumbnail, and if it does not exist, then we display the fallback.

Source: Snipplr

This is just the start. You can get creative with the fallback images for WordPress post thumbnails. You can combine the two techniques mentioned above, create branded images for each category, and much more.

If you are a theme developer, then make sure you have this in your themes.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • Doop

    This is great except if you upload an image to a post and then decide to delete it, it will still be attached to the post.

  • darkpollo

    Will this work with external images too? Or only with the ones hosted on the same domain?

    Thank you

  • Byron

    Hi,
    I’m tying to set a default image for one of my custom post types. I’ve not been able to do this and have tried many of the plugin on the WP repository… Default featured image sets a featured image to All post types even Ubermenu.

    I need to limit this to one post type. Do you have any suggestions for me please?

    • http://www.wpbeginner.com/ WPBeginner Support

      Byron, does the custom post type you want to set the default thumbnail for has featured image support? If yes then using this code in your theme template should display the default post thumbnail.

      <?php if ( has_post_thumbnail() ) {
      the_post_thumbnail();
      } else { ?>
      <img src="<?php bloginfo('template_directory'); ?>/images/default-image.jpg" alt="<?php the_title(); ?>" />
      <?php } ?>
      
  • Paul

    Okay, that didn’t work…! The a href tag messed it up. How do I show you code?

    <a href="" title="" >

    Try that!

    • Paul

      Oh dear, Let me know how I can show code and I’ll show you what I mean! Thanks, Paul

      • http://www.wpbeginner.com/ WPBeginner Support

        try wrapping it in [php] [/php] or [html][/html]

  • Alejandro

    Excellent solution. Now, how I can use this to assign to a specific category and taking ramdom images from a folder?

    <img src="/images/default-image.jpg” alt=”” />

    Thank you a lot!

    • http://www.wpbeginner.com/ WPBeginner Support

      This requires a more complicated solution. First you would want to set an image for each category and upload them to a specific folder probably using category slug as the image file names. Then you need to get the category slug for each post and use it as the fallback image URL.

  • Konstantin

    I am having a small problem, when calling the image, it only shows the full image, not the ones I try to specify (small, medium, thumbnail, etc).

    Did anything change in wp3.7+? The images are there, and are being created, but they wont display :(

  • Thiago

    Thank you!!

  • Arthur Okonkwo

    please is there a plugin that can do this, cos i don’t want to mess with with my code.

    • http://www.wpbeginner.com/ WPBeginner Support

      We have not tried it yet but you can give Default Featured Image a try. Let us know how it works out for you.

    • Mahmod A. Issa

      You can keep a backup of your file in case you may mess up with your code, but this way is a good way to keep a default image to a client!

  • Susan Clifton

    Will this work with a custom post type? I’m building a Portfolio theme. Your tutorials are always so helpful. I don’t really know PHP but I’m comfortable with messing with it.

    • http://www.wpbeginner.com Editorial Staff

      Yes this should work just fine.

  • Tania

    Is there a way to show a default “image not available” image when the source image src is empty ?
    I’m promoting amazon products in my blog (using API) but most of the products do not have image. By providing a default “image not available” image, I can help my visitors to understand that the sellers do not provide any image.

    I prefer html, css or javascript solution.

    thanks and sorry about my english ;)

    • http://www.wpbeginner.com Editorial Staff

      The second option should work for you then. Just upload the image that says image not available.

  • Waheed Akhtar

    Hi Balkhi,

    I have some old posts where post thumbnail is not defined. Also may be for some posts there’s no image uploaded (did it manually through FTP and linked in the post). The result is I don’t see any featured thumbnail for the post.

    Is there a way we can grab the first image, resize it (e.g. 200 x 200) and show as featured image?

    Thanks.

    • http://www.wpbeginner.com Editorial Staff

      Waheed, what you are looking for is a bit tricky. You would have to parse the src element in each image tag, and make local copies of those. I do remember someone mentioning this plugin a while ago:

      http://wordpress.org/extend/plugins/add-linked-images-to-gallery-v01/ << Note: it hasn’t been updated in a while.

      However, it is worth a try.

      -Syed

  • Amin

    Thanks for this post. I’ve been searching for days to find a way to have an automatic default featured image. This saved me so much time! Thanks a lot.

    • Amin

      You can also try the Default Thumbnail Plus plugin. Works very well, and no coding necessary!

  • James

    I’ve tried to merge both options but failed.

    How would you Check for Thumbnail, but if none then check for First Post Image, but then if none then post Default Branded Image?

    • Rory

      Hi, have you found a way to do this? I’m still on the hunt for an answer, thanks.

      • http://www.wpbeginner.com Editorial Staff

        Try this:

        function get_fbimage() {
          if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
          $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '', '' );
          $fbimage = $src[0];
          } else {
            global $post, $posts;
            $fbimage = '';
            $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',
            $post->post_content, $matches);
            $fbimage = $matches [1] [0];
          }
          if(empty($fbimage)) {
        	
            $fbimage = //Define Default URL HEre;
          }
          return $fbimage;
        }
        
        • Vanessa K

          Hi :), great tutorial. I’m a somewhat beginner for a lot of wordpress code. I tried to follow this tutorial for setting up the fall back image a few months ago and failed :p but was able to successfully implement it just now. Yay me! haha. However I would really like to set it up in the way James mentioned…

          “How would you Check for Thumbnail, but if none then check for First Post Image, but then if none then post Default Branded Image?”

          Posting the code you offered in response to his request is only showing up with syntax errors for me in my functions file :/. I’m sure it’s me and not the code :p but any suggestions? Thanks! And Happy Thanksgiving!

  • jfwebdesignstud

    wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘full’ );
     
    can this be used somehow with this for including pinterest featured image

    • http://www.wpbeginner.com/ wpbeginner

       @jfwebdesignstud You can most certainly specify your thumbnail as the image for Pinterest.

  • CharlesUibel

    Yes But I don’t want to just display the fallback image, I want to assign the image to permanently be the featured image.

  • masoudgolchin

    great tutorial , thanks !

  • http://dirtekdesigns.com/ DirTek

    Great tutorial, mate. Been useful for my “related posts” section. Cheers!

  • leitseitenmacher

    how do you create a real fall back thumbnail?

    with the solution a post rhumbnail is shown but therefore not registerate in the backend.

    any solution

    • wpbeginner

      @leitseitenmacher The whole idea of a fallback is to show when nothing is selected at the thumbnails area in the backend… so NO you will not be able to see it in the backend….

      • leitseitenmacher

        @wpbeginner

        well i allready noticed that.

        but the question was: is it possible in wordpress to register a standard post thumbnail via php code so you can see it in the backend?

        • leitseitenmacher

          @wpbeginner

          don’t believe the hype.

          it#s possible as always check out this remarkable plugin.

          http://wordpress.org/extend/plugins/default-post-thumbnails/

        • wpbeginner

          @leitseitenmacher Great find. Again, there is no HYPE that we are trying to create. It is impossible to keep track of what exists in the plugin sphere of WordPress because there are thousands.Just tested out that plugin… It doesn’t register those thumbnails in the database of each post. It is just hooking and giving you a visual display of what you selected in the plugins setting.

          If that is what you want, then sure.

          The article above accomplishes exactly the same thing without going the extra lengths of visually displaying. In most sites the fallback is usually the site logo. So you don’t really need to see it. But we will do a writeup on the plugin you found. Thanks for the suggestion :)

  • gal1982

    Excellent solutions, i was looking for that for a while

    Is there a way to change the resize the image?

    I have tried for example:

    $image=wp_get_attachment_image($num, ‘medium’);

    But it doesn’t effects the image size. any idea?

    • Shakir

      I have same question. Size attribute does not affect.

      • http://www.wpbeginner.com Editorial Staff

        You have to use Regenerate Thumbnails and add new image sizes.

  • milohuang

    Nice tutorial. Have test the first method but it did not seem to work. Check the HTML and the default thumb does not exist (no img tag was found). However, if I use the Default Post Thumbnail plugin, it works. Any help? Running 3.2 locally. Thank you!

  • sebastianjthomas

    Great! But how do you set the main_image size without CSS (which stretches the image)

  • wp_smith

    Hello,

    I have written a plugin, <a href=”http://wpsmith.net/go/genesis-featured-images”>Genesis Featured Images</a>, that will do this for the <a href=”http://wpsmith.net/go/genesis”>Genesis Framework</a>. I’d love to hear your thoughts!?

  • sleepingsun

    Hello !

    Thanks a lot for this useful tip. How would I make the same function to work in RSS feeds please ? If a post thumbnail has been set : use it, otherwise : use the first image attached to the post.

    Any help would be much appreciated !

  • http://www.joptima.com Ayman Aboulnasr

    Thank you very much for the tutorial. I was actually thinking about this trick for a few days now.