WordPress' Post Thumbnail 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:

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.

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

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

Is your WordPress Running Slow?

Milliseconds are money. Website speed is extremely important. We highly recommend WP Engine. Why? Because they make a sluggish WP site fast, support is great and they have excellent uptime.

WP Engine Logo
  • Jim

    Didn’t work for me until I change the timthumb part from /timthumb.php?src=<?=$ to /timthumb.php?src=<?php echo $

    • http://twitter.com/innerwebs Devin Walker

      Hmm, I just tested and worked fine for me.

  • Jim

    Didn’t work for me until I change the timthumb part from /timthumb.php?src=<?=$ to /timthumb.php?src=<?php echo $

    • http://twitter.com/innerwebs Devin Walker

      Hmm, I just tested and worked fine for me.

    • http://www.facebook.com/gbutiri George Butiri

      Sounds like you’re not using Short Tags. It’s an apache / php setting in your case.

      • http://www.wordimpressed.com Devin Walker

        Good call, I should update that…

  • tsdiokno

    How do I make it *not* show anything for posts without thumbnails, instead of a broken image link?

  • tsdiokno

    How do I make it *not* show anything for posts without thumbnails, instead of a broken image link?

  • http://www.facebook.com/adamluz Adam Luz

    Thanks worked great

  • http://www.facebook.com/adamluz Adam Luz

    Thanks worked great