Displaying Thumbnails in your WordPress Website Design

These days, it is common to want to show thumbnails next to your post in WordPress. There are a few ways of doing this, but as of version 2.9 of WordPress, they have made it very simple for you – as long as it is enabled within your theme files.

Enable Thumbnails in WordPress

Open up functions.php within your theme folder ( if it isn’t there then just create it). Then add this line to enable thumbnails for pages and posts:

add_theme_support( 'post-thumbnails' );

It’s as simple as that. If you want to enable it for only posts or only pages, then you can do one of the following in your functions.php file:

add_theme_support( 'post-thumbnails', array( 'post' ) ); // Add it for posts
add_theme_support( 'post-thumbnails', array( 'page' ) ); // Add it for pages

After you have enabled thumbnails, you can define the size of them in two modes – re-size or hard crop.

Resizing your thumbnails will always maintain the aspect ratio and show the full image that you upload, where as hard cropping will re-size it by either width or height, and “crop out” the rest of the image.

I prefer the crop method, but I’ll let you decide:

set_post_thumbnail_size( 100, 100 ); // 100 pixels wide by 100 pixels tall, box resize mode
set_post_thumbnail_size( 100, 100, true ); // 100 pixels wide by 100 pixels tall, hard crop mode

So, to add a thumbnail to your page or post, it’s as simple as going in to your wordpress back end, clicking Posts -> Add New (or Pages -> Add New). You will now see a Thumbnail section at the bottom of the right hand sidebar. Click Set Thumbnail, this will bring up the familiar Add Media screen. All you need to do is browse for a file to upload, once the file has uploaded (or you have selected it from your existing media library) just click Use as Thumbnail. You will see the image appear within the Post Thumbnail section, where you can remove it and the reset a new thumbnail if you so wished.

Steps of Adding a Thumbnail to your WordPress Post or Page

Now you have enabled thumbnails for posts or pages, and set there default size – let’s show you how to bring them in to your WordPress loop!

Displaying WordPress Thumbnails

To show your newly added thumbnail on the front end of your WordPress theme, you will need to add the following code to any of the WordPress loops, whether it is in archive.php, single.php, index.php or any other loop.

<?php the_post_thumbnail(); ?>

That will now show your 100 x 100 thumbnail in whichever loop you have added it to. But what if we want different sizes in different loops? Say, for example, a large thumbnail in the single post (100 x 100 or our default size), but a smaller thumb in the archive listing (50 x 50). Not a problem, let’s run through it quickly.

Different Thumbnail Sizes in WordPress

You will need to go back to your functions.php file and add the following line after set_post_thumbnail_size:

add_image_size( 'archive-thumbnail', 50, 50 );

Now to call out that thumbnail in your archive.php loop, just use the following code:

<?php the_post_thumbnail( 'archive-thumbnail' ); ?>

Job done! You can now show a default sized thumbnail for your post, or add specific sizes to show in your website design. Have fun!