How to create a default WordPress thumbail for post thumbnails.

I have been trying to create a default thumbnail for my blog. I just can’t get over that empty space that remains if there is no thumbnail defined. I could have let the post take up the entire width in case there is no thumbnail but i kept running into an issue where, on mobile devices everything turned out quirky. Either the thumbnail would take up the entire post or push the actual content out of view so that one would to constantly have to scroll sideways in order to read the post. So i would rather settle to set up an image that would show up in case i don’t have or don’t specify a thumbnail.

Well, easier said then done. I found some good information around the web including wordpress’s own support forums; however, none of the suggested solutions quiet suited me needs perfectly. For one, i want this to work as automatically and integrated as possible as i am actually working on this as a solution for a wordpress theme. This basically rules out any plugin as I would like it to incorporate with the theme itself. Also, plugins often, by nature, offer many more features then what I would have use for. I want to keep this as simple and functional as possible.

So my first thought was to add a simple “IF” “ELSE” and add a direct link to the image. Easy right? Yes it is, it is also not working. This would not have been an ideal solution since one would have to add the link to every new page created. Also, it have to code the link appropriately because you can not just go ahead and do something like this:

<a href="<?php the_permalink(); ?>" rel="bookmark"><img src="images/default-thumb.png" alt="thumbnail" /></a>

This did not work, so did this:

<a href="<?php the_permalink(); ?>" rel="bookmark"><img src="" alt="thumbnail" /></a>

The first example won’t work because wordpress won’t be able to find the directory specified, this is especially not usable for a theme because at this point we don’t really know where that directory is going to be. In the 2nd example we did specify the full path; however, this will work as a quick fix for someone with very few pages. Also not suitable for a theme  because every  person using the theme would have to change the path specific to their environment. That’s no good.

Unfortunately, all to often I saw people recommend this method  or similar methods to accomplish a quick and easy fix. I found a handful who took that approach and have at least done it right. If so, it should look something like this:

<a href="<?php the_permalink(); ?>" rel="bookmark"><div><?php echo '<img src="' . get_bloginfo('template_directory') . '/images/default-thumb.png' . '" alt="thumbnail" />'; ?></div></a>

What is different here? First of, we are calling the “template_directory”. This makes things much easier as we don’t have to specify the full path and can make sure that wordpress will look in and  find the right directory. So regardless where the wordpress installation is stored or deep it is buried in your file system it will always look in it’s own directory. Second, we can’t use the “template_directory” by itself. Not only is it not a free standing call function but we also still need the full path. The “get_bloginfo()” function can do that for us. The “get_bloginfo()” function basically holds all the basic information about your blog, everything is set up on under the “General Settings” in your wordpress admin panel. All the information, like the template directory, can be called up individually.

So now, with the right information in place, putting this snippit into your pages makes much more sense. I wanted to take this one step further. Instead of having to add this code snippit everywhere I would rather like to be able to call it up as a function or function parameter which leads us to the functions.php.

What I did was, set up a function in the functions.php dedicated to the default thumbnail handling. I ended up with this:

function default_thumbnail() {
echo '<img src="' . get_bloginfo('template_directory') . '/images/default-thumb.png' . '" alt="Default Thumbnail Placeholder" />';

See what I did here. Yeah, the link is pretty much the same. I just made it a function. This way I can just call on “default_thumbnail” and don’t have to remember the full link and so forth. We are not all done yet though. We still have to add the theme support like this:

add_theme_support( 'default_thumbnail' );

And all done. Now your new default thumbnail link will look like this:

<a href="<?php the_permalink(); ?>" rel="bookmark"><div><?php default_thumbnail(); ?></div></a>

And the full loop could look something like this:

<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<a href="<?php the_permalink(); ?>" rel="bookmark"><div class="entry-thumbnail"><?php the_post_thumbnail(); ?></div></a>
<?php else : ?>
<a href="<?php the_permalink(); ?>" rel="bookmark"><div class="entry-thumbnail"><?php default_thumbnail(); ?></div></a>
<?php endif; ?>