Using WordPress’ Featured Image… Feature!

In WordPress 2.9, the dev team introduced a fantastic new feature called ‘Post Thumbnails’. Post Thumbnails provide WordPress users with the ability to attach an image to a post or page without actually entering it into the content area. This gives you the most amount of flexibility with using the image since you won’t be tied to the restrictions of the TinyMCE WYSIWYG.

For whatever reason, they decided to call it something different in the WordPress backend: ‘Featured Images’. If you are using a theme that already has them enabled, you’ll find it in the right sidebar when editing a post or a page.

featured-image

The Basics

If your theme doesn’t already have post thumbnails enabled, you’ll want to navigate to your functions.php file (located in your theme’s folder) and add the following:

if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
}

Pretty simple, right? Now you’ll get that fancy ‘Set featured image’ link shown in the image above. So you’ve enabled post thumbnails, you’ve uploaded your image and set it as a featured image. How do you get it to display on your website?

Open up single.php, page.php, index.php… or whatever template you are working with. Find your loop and place the following code wherever you want to display your image:

the_post_thumbnail();

Note #1: This code needs to be wrapped in php tags if not already. Note #2: This code needs to be used within the loop to function

The default size that it uses is the ‘Thumbnail’ size that you set under the ‘Media’ settings panel (Settings > Media). There are some other settings that you can use:

the_post_thumbnail('thumbnail'); // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');    // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large');     // Large resolution (default 640px x 640px max)

Advanced Uses

We don’t stop there! You can do a little more to customize your experience. Sometimes you are going to want to have different size settings for images posted in the content area than you will for your featured images. So let’s leave the Media Settings page alone and add some custom sizes to our functions.php file.

// add post-thumbnail functionality
if (function_exists('add_theme_support')) { add_theme_support('post-thumbnails'); }

set_post_thumbnail_size( 100, 100, true ); // Normal post thumbnails, set this to be your default size
add_image_size( 'custom-1', 125, 125, true ); // Custom size that will crop the image to fit the proportion
add_image_size( 'custom-2', 300, 200, false ); // Default is false, "soft proportional crop"

So let’s walk through this here:

add_image_size ( 'name', 'width', 'height', 'crop style' );
  • Name string: this is the name of the size that you are creating and what you will use to call this particular style of post thumbnail.
  • Width / Height int: The width and height that you would like your image to be, in pixels.
  • Crop Style bool: This one is important, as it will give you different results depending on the size of the image that you upload. true will crop the image so that it fits your width/height exactly. false will crop the image so that the height and width fit inside your restrictions (this is the default).

Calling your custom sized featured image is similar to the previous example, except this time you’ll be passing the name parameter through. In your loop:

<?php the_post_thumbnail( 'custom-1' ); ?>

Based on our settings set in functions.php above, this will output a cropped image at exactly 125px x 125px.

But what if we don’t want to set a limit on the height of the image, just the width? We can do that, too – this is starting to look really flexible! We would add this size to our functions.php file:

add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)

In this case, we aren’t declaring a crop style because the default is ‘false’ and we don’t need to change that. We’ve set a maximum width to 300px and an unlimited height (in this case, 9999px represents an ‘unlimited’ height).