Brain Food for Web Developers

Custom thumbnails displayed next to post excerpts

Create Custom Thumbnails for WordPress Posts

Custom thumbnails displayed next to post excerpts

By using a post’s featured image you can display a custom thumbnail beside your latest posts.

Custom thumbnail size

Although WordPress creates thumbnail images automatically (small, medium, and large) you can tell WordPress to create custom thumbnail sizes.

Firstly of all, decide on the image dimensions that will best suit your page. For this example I’ve chosen a square of 75 x 75 px.

Now we make use of the WordPress function add_image_size(). Just add the following code to your functions.php file (or try the alternative to using the functions file):

add_image_size( 'tiny-thumb', 75, 75, true );

The parameters for this function are:

  • $name (string – required)
  • width (int – optional)
  • height (int – optional)
  • crop (boolean – optional)

For this example I’ve chosen to set the ‘crop’ boolean to true so that images are automatically cropped to my specified dimensions. This way I can make sure all my thumbnails will appear square.

Now just attach an image to your post using the featured image.

Note: Only images uploaded after you add this function will have the new cropped thumbnail size.

Adding thumbnails to your blog page

Now that you have these new thumbnail sizes you need to display them next to your posts.

To display the new thumbnails on your blog listings page open up your index.php file. If you want the thumbnails to appear on the full articles you can also edit your single.php file. Either way, look in ‘the loop’ for the entry div add some new code.

<div class="entry">
   <?php if(has_post_thumbnail()): ?>
      <a href="<?php the_permalink() ?>" title="Link to <?php the_permalink() ?>">
         <?php the_post_thumbnail('tiny-thumb');?>
   <?php endif ?>
   <?php the_content(); ?>

The second line in the code above tests to see if a thumbnail exists for each post. If one does exist, we create an anchor link to the main article using the_permalink() function and display our custom thumbnail inside it.

To style the new thumbnail image we can use the class ‘attachment-[thumbnail-name]’ that WordPress automatically generates for us (in my example this would be ‘attachment-tiny-thumb‘. Alternatively you can wrap the image in your own div and give it your own class.

You might want to add some margins and a float:

.attachment-tiny-thumb { 
   float: right;
   margin: 0 0 10px 10px;

I hope this tip comes in handy. Let me know if you found it useful or if you know of any improvements that can be made!

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

Comments are closed.