A simple way to add post thumbnails to your wordpress theme.
I’ve been doing a lot of WordPress Development for our clients, and thought I’d share a quick and easy way to add post thumbnails or a featured image to your theme – and create a recent post box that utilizes it. What is also nice about this tutorial is that I will provide some code to set a default image if no thumbnail is set.
Recommended knowledge base for this tutorial: HTML/CSS, PHP, experience with wordpress and template creation. Basic image editing skills (resizing and cropping). I’ll break everything down as the post develops for those looking for a learning experience. For those who just want to grab the code and run – scroll down to the bottom of the post!
When you’re in the WordPress backend and creating or editing a new post, some themes include the “featured image” box on the side beneath the publish button, and some do not. If your theme does not have this box, we’ll need to add it first.
To begin, you’ll need to open up your WordPress theme’s functions.php file.
All you need to do here is insert the the following code:
add_theme_support( ‘post-thumbnails’ );
*Make sure that it is inside the PHP tags (<?php CODE ?>) of the file and is outside any other pre-entered functions (be careful of anything inside {braces} ).
If you’re editing the file through the backend under the Appearances, Editor tabs, be sure to save the changes. If you’re using FTP to update your files, save and upload the file to the server. Now when you go into your posts, you should see the Featured Image box appears if it didn’t before. However, if you add an image in at this point, it won’t display anywhere on your site.
Now, say you want to display the 3 most recent posts in your sidebar, and you want a thumbnail accompanying each post, in addition to the title, date, and a short excerpt. You may be currently using the Recent Posts widget from the default WordPress install, but you’ll find that it doesn’t support the thumbnails. Remove that widget, and open up your sidebar.php file.
Start with a WordPress query. We need to identify the posts we want to call. For this tutorial, we’re going to take 3 posts from any category, but you can change this to a single category, or change it to 5 posts instead of 3, or any number of other rules you want. For more information on changing the query to meet your needs, visit the wordpress codex.
I’m going to begin with some HTML code, then plug in the PHP and WordPress functions inside it. The first block of code shows the sidebar HTML setup and the query code:
<div id=”sidebar>
<div id=”custom-recent-posts-with-thumbnail”>
<?php
query_posts( ‘posts_per_page=3’ );
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<div class=”post”>
</div><!– CLOSE POST –>
<?php endwhile; ?>
<!– Add something inbetween here for when there are no posts to display –>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div><!– CLOSE SIDEBAR –>
So that’s the basic setup. I set up a few divs to separate the content (you can apply CSS styles to it later), then added in the query to pull the most recent 3 posts, started the loop, and added in an area if your blog is new and there are no posts to display yet (leave it blank if you don’t want to show anything).
Now, we’ll add in the code to call up the post thumbnail, title, date, excerpt, and a read more button. You’ll see the permalink WordPress function appear a few times, and that is so if a user clicks on the thumbnail, title, or read more, it links directly to that post.
<div id=”sidebar>
<div id=”custom-recent-posts-with-thumbnail”>
<?php
query_posts( ‘posts_per_page=3’ );
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<div class=”post”>
<div class=”thumbnail”><a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail( array(80,80) ); ?></div>
<div><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></div>
<div><?php the_time(get_option(‘date_format’)); ?></div>
<div><?php the_excerpt(); ?></div>
<a href=”<?php the_permalink(); ?>”>Read More »</a>
</div><!– CLOSE POST –>
<?php endwhile; ?>
<!– Add something inbetween here for when there are no posts to display –>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div><!– CLOSE SIDEBAR –>
So now I’ve added in a few more classes so you can apply CSS to them later. You see the following WordPress functions: the_post_thumbnail(), the_title(), the_time(), and the_excerpt().
Some parameters appear inside the () of those – for the purpose of this tutorial, we’ll discuss the parameter added inside of the_post_thumbnail() only. The array(80,80) inside of the_post_thumbnail sets the maximum width and height *(in pixels) of your WordPress thumbnail.
I would recommend using a square image, but if you want a rectangular image you may have to play around with the settings. Always adjust both numbers to the largest side of the rectangle because putting array(150,100) doesn’t constrain the image to that size, but will instead make the image 100×100.
If both are set to 150, it will allow the length to be 150, but the height will automatically be left off (it won’t expand the image to fit 150,150). Obviously there are some issues with this, but you really should take time to edit and create a custom thumbnail that will follow any constraints you define beforehand. More information about other parameters and uses for the_post_thumbnail() can be found at the WordPress codex. For now, let’s stick with an 80×80 thumbnail.
The last thing we need to do is define a default thumbnail image to use if no featured image is set. I do this by creating a simple PHP if statement.
<div id=”sidebar>
<div id=”custom-recent-posts-with-thumbnail”>
<?php
query_posts( ‘posts_per_page=3’ );
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<div class=”post”>
<div class=”thumbnail”><a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail( array(80,80) ); ?>
<?php
$thumbcheck = get_the_post_thumbnail();
if ($thumbcheck == “”) { ?>
<img src=”<?php bloginfo( ‘stylesheet_directory’ ); ?>/images/default-post-thumbnail.jpg” width=”80″ height=”80″/>
<?php } ?>
</div>
<div><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></div>
<div><?php the_time(get_option(‘date_format’)); ?></div>
<div><?php the_excerpt(); ?></div>
<a href=”<?php the_permalink(); ?>”>Read More »</a>
</div><!– CLOSE POST –>
<?php endwhile; ?>
<!– Add something inbetween here for when there are no posts to display –>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div><!– CLOSE SIDEBAR –>
You’ll see that before the closing div of the thumbnail class, I add a few lines of PHP. I declare the “$thumbcheck” variable to search for the content of the thumbnail. If $thumbcheck is blank, then call up an image from a predefined location (the location I chose is the images file for the current theme).
Now, when you add an image to the featured post box, it will display in your sidebar. Take some time to style the divs we created appropriately to match your theme. We set out to create our own recent posts area that displays post thumbnails next to the title, date, excerpt, and a read more button. Enabling post thumbnails is fairly simple – just adding 1 line of code to your functions file. Another nice thing, is that if you want to call the post thumbnail elsewhere – you can add the_post_thumbnail() function anywhere in your template files to call the thumbnail for the desired post.
You can see working versions of these practices on this blog and on other custom built Pacer sites. Thanks and good luck!