How to Add Featured Image Thumbnails to Your WordPress Theme

You may have noticed the “Featured Image” box when editing a post or page. It allows you to upload or select an associated image for the article. It generally appears as a thumbnail when viewing a list of posts, perhaps in a category index or search results.

Thumbnail support must be enabled within your theme. You could add it to a plug-in so it’s available to all themes but that may not be appropriate in every case. Therefore, you’ll need to open or create a ‘functions.php’ file within your theme folder (wp-content/themes/theme-name/).

To add thumbnail support for all post types, append this command somewhere after the opening <php:


add_theme_support('post-thumbnails');

Alternatively, you can enable thumbnails for just posts:


add_theme_support('post-thumbnails', array('post'));

or just pages:


add_theme_support('post-thumbnails', array('page'));

Setting Thumbnail Sizes

Default thumbnail sizes can be set in WordPress’s Settings > Media screen. However, you can also set a default height and width in functions.php, e.g.


set_post_thumbnail_size(100, 75);

This will produce thumbnails with 100px width and a 75px height (a pleasing 4:3 ratio). However, what happens when a user uploads an image with different aspect ratio — say 100 x 150? In this case, the whole image is proportionally reduced to fit the space and the resulting thumbnail is 50 x 75.

Alternatively, you can define hard-cropping by passing ‘true’ as a third argument:


set_post_thumbnail_size(100, 75, true);

This will crop the image so it matches the aspect ratio. The resulting thumbnail will always be 100 x 75, but the top and bottom or left and right edges will be removed.

WordPress Featured Image

The “Featured Image” box should now appear on your WordPress post/page edit screen. If it’s not there, check it’s enabled in “Screen Options” or review your functions.php code.

Using Thumbnails

Three main thumbnail commands can now be used within any WordPress loop. Typically, you’ll want to use them in files named index.php, category.php, archive.php, author.php, taxonomy.php or search.php:

  • has_post_thumbnail() returns ‘true’ if a thumbnail has been set
  • the_post_thumbnail() echos a string containing the thumbnail <img> tag
  • get_the_post_thumbnail() returns a string containing the thumbnail <img> tag

One of the simplest implementations is therefore:


if (has_post_thumbnail()) {
	the_post_thumbnail();
}

Or we could add a link and a default thumbnail if one isn’t available:


echo '<a href="', get_permalink(), '">';
if (has_post_thumbnail()) {
	the_post_thumbnail();
}
else {
	echo 
		'<img src="',
		get_bloginfo('template_directory'), '/images/thumb-default.png',
		'" width="100" height="75" alt="thumbnail" />';
}
echo '</a>';

Advanced Thumbnail Use

Two optional arguments can be passed to the_post_thumbnail() and get_the_post_thumbnail(). The first is the size — either:

  1. a string containing the text ‘thumbnail’, ‘medium’ or ‘large’ as set in in WordPress’s Settings > Media screen, or
  2. an array with new width and height dimensions, e.g. array(120, 90)

The second is an associative array containing the src, class, alt and title.

For example:


the_post_thumbnail(
	array(120, 90), 
	array(
		'src' => 'image.jpg',
		'class' => 'thumbnail',
		'alt' => 'post thumbnail',
		'title' => 'my custom title'
	)
);

results in HTML such as:


<img width="120" height="90" src="image.jpg" alt="post thumbnail" title="my custom title" />

That’s about as complex as it gets. Have fun adding thumbnail support to all your WordPress themes.

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like The Beginner’s Guide to Web Design with WordPress.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://pulse.yahoo.com/_Y7R2Q22GSPY7SE3WMIR5QBXJWE Roseann Chase

    I paid $32.67 for a XBOX 360 and my mom got a 17 inch Toshiba laptop for $94.83 being delivered to our house tomorrow by FedEX. I will never again pay expensive retail prices at stores. I even sold a 46 inch HDTV to my boss for $650 and it only cost me $52.78 to get. Here is the website we using to get all this stuff, LiveCent.com

  • http://gurusatap.wordpress.com/ guru satap

    tank’s. very good. I like this post…

  • Ian Luckraft

    Where in the database does WP store information about featured images?

    Thanks for the article

    • Craig Buckler

      The post itself (posts table) contains the article text which includes the img tag. You’ll also find references to attached images in the posts_meta table. WP also stores files in a specific location so there’s probably a few file look-ups too.

      I wouldn’t recommend direct table/file manipulation. Use the API if you can.

    • http://twitter.com/LeeTurley Lee Turley

      Without looking there is a field in something_meta table called thumbnail_id (if my memory is correct) and it just holds a number e.g. 123 which is the resource number of the attachment

    • http://twitter.com/LeeTurley Lee Turley

      Without looking there is a field in something_meta table called thumbnail_id (if my memory is correct) and it just holds a number e.g. 123 which is the resource number of the attachment

  • http://www.insurancegofer.com/auto Auto Insurance Online

    Thanks for the info… thumbnails really help

  • http://twitter.com/robgolbeck Rob Golbeck

    Just saw this article in today’s Tech Times. Great timing – I need to add thumbnails to a theme for site I’m working on. You’ve saved me a search – thanks! :)

  • Bren Faulknor-Murrell

    Great article, thanks Craig.

    You can also set various other thumbnail sizes outside of the standard three in WordPress (thumb, medium, large) by using the add_image_size() function in your themes functions.php file. It works the same as set_post_thumbnail_size but is prefixed by a further variable – the name by which you refer to the size:

    add_image_size( unique-thumbnail-name, width, height )

    eg:

    add_image_size(‘homepage-thumb’,400,999999)

    Then simply use the_post_thumbnail or get_the_post_thumbnail and use the string ‘homepage-thumb’ in place of thumb, medium or large. Really helpful if you have the need to display a thumbnail in lots of different dimensions. The downside is that each thumbnail size is stored in the uploads folder so this CAN cause issues if you don’t have much space in your hosting account!

  • D Excel19

    Custom fields is so much better, due to the amount of control it offers.

  • Tim Holt

    I have used featured images since it was first introduced but I never knew the extent of options that you have shown in the ‘advanced thumbnail use’ section. That’s great :)

    I have a project at the moment which calls for a second featured image for only one type of post. Is there a way of defining an additional ‘Featured Image’ so a second image can be added using the same modal/lightbox image management?

  • Karim

    Great post :-)
    Now will need to add some responsive styling to the thumbnail.

  • http://www.laokboke.net laokboke

    Great post,i will give it a try.
    Thanks

  • http://wordpressnotes.blogspot.com Anjali

    Nice post with clear description of the functions used to add featured image support.This is useful for the developers to know the internal functaionality.

  • http://www.dailytut.com Robin

    I have done this with a wordpress plugin. Auto post thumbnail. Been searching for some manual way to do that.

    Cheers.

    Robin.