Dynamically Resize WordPress Post Thumbnails with Timthumb

Working with WordPress’ Post Thumbnail images is a great way to use an image to represent each post. Before the introduction of Post Thumbnails in WP v2.9 many theme authors utilized a custom field where users would have to copy-and-paste their featured image url in order for the featured thumbnail to work. This was not very user friendly and WordPress knew this and eventually released Featured Post Thumbnails.

In this article you will learn how to enable your theme to use post thumbnails, learn how to output the thumnail data and also how to use timethumb to crop the image. This will allow users to quickly upload images and enable them as their post thumbnail without having to mess around with custom fields or complicated cropping. Let’s get started!

Enable Post Thumbnails in Your Theme

Theme authors: open up your theme’s functions.php file and tell WordPress that you want to use post thumbnails:

1

2

// add post thumbnail support

add_theme_support('post-thumbnails');

Optional: Specify Thumbnail Size

You can specify to the width an height and true/false parameters for the resize mode of choice (box or hard-cropping).

Display it: Use the Thumbnail within the Loop

Place the code below within your WordPress loop where you want to display the Post Thumbnail.

1

2

3

4

5

6

<?php

if(has_post_thumbnail()):?>

<?phpthe_post_thumbnail();// the post has a thumbnail... display it ?>

<?phpelse:// the current post does not have a thumbnail, do something else ?>

<?phpendif;?>

Now you can see how easy it is to simply use the post thumbnail within a posting. Suppose you want to resize the images using timthumb or phpthumb; for this we will get a bit more creative with the code.

Thumbnail Code example with Complete Loop

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<div class="mainContentWrap">

<div class="blogWrap">

<?php$args=array(

'posts_per_page'=>5

);query_posts($args);?>

<?phpif(have_posts()):while(have_posts()):the_post();?>

<div class="post">

<?php

if(has_post_thumbnail()):?>

<ahref="<?phpthe_permalink();?>"title="<?phpechoget_the_title();?>">

<?phpthe_post_thumbnail();//the post has a thumbnail... display it ?>

</a>

<?phpelse://the current post does not have a thumbnail, do something else? ?>

Above is an basic example of how you can use the code to show the post thumbnail within the WordPress loop.

Use TimThumb with the Post Thumbnail

Dynamically resizing post thumbnails can provide a lot more ease-of-use for your theme’s users. I suggest you use timthumb to resize the post thumbnail. Timthumb is a custom image resizing script that is available open source and is very popular in the WordPress theme development community.

Once you have properly placed the appropriate timthumb files in place on your theme you’ll be ready to use the code below to get the source of the post thumbnail and resize the image using timthumb. Place the code below within your loop:

What the code above is doing in a nutshell is grabbing the source string and using that string with timthumb to output the resized image. Play around with the parameters to get it working how you would like.

Having Trouble?

Be sure to check out the timthumb page for more details on using the script. There’s a few directories that may need file permissions changed in order for it to work. Otherwise, leave a comment below and we’ll be sure to answer your questions. Have you liked WordImpress on Facebook yet?

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow Devin:

Stay Informed

Article notifications, coupons, and WordPress awesomeness all in one tidy email.