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. 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.

Frequently Asked Questions (FAQs) about Adding Featured Image Thumbnails to Your WordPress Theme