Enabling Post Thumbnails in WordPress: A Step-by-Step Guide
In WordPress 2.9, the post thumbnails function was integrated into the post and write page panel, making it easier for users to add featured images to their posts using the image uploader. This eliminated the need to deal with custom fields. However, to make this work, you need to enable post-thumbnails support in your theme’s function.php file. In this article, we will show you how to enable post thumbnails for your WordPress theme, how to include the feature image in your posts, homepage, or anywhere else in your theme, and how to declare different thumbnail sizes.
Step 1: Enable Support for Post Thumbnails
To make the “Featured Image” box appear in your post/page editor page, you need to add the following piece of code to your functions.php file:
if ( function_exists( ‘add_theme_support’ ) ) {
add_theme_support( ‘post-thumbnails’ );
}
Step 2: Declare Post Thumbnail Image Sizes
Once you have enabled post-thumbnails in your theme, you will want to declare various sizes for use in your theme. By declaring various sizes in your functions.php file, WordPress will automatically crop images as they are uploaded to match the sizes you’ve defined. This way, you can call the different images within your theme files without having to use any external script, such as “TimThumb.”
Below is a sample of how to declare your sizes, which should be easy to understand and edit to fit your needs:
// featured image sizes
if ( function_exists( ‘add_image_size’ ) ) {
add_image_size( ‘full-size’, 9999, 9999, false ); // full-size image
add_image_size( ‘slider’, 920, 320, true ); // slider image
add_image_size( ‘post’, 150, 150, true ); // post image
}
Step 3: Using Featured Images in Your Theme
Now that you have enabled post thumbnails, a new meta box will show up in the post/page editor for those using your theme. This will allow them to set a specific image as the featured image for that post. But what good is it if these images aren’t showing up anywhere in your theme?
There are two methods for inserting your images into your theme. The first one will call the image and automatically create the HTML, while the second method will allow you to call the featured image in the loop and then make your own IMG SRC tag for greater control over the alt tags, title tags, and rel attributes.
Method 1:
Insert the following code where you want your featured image to appear (anywhere within the WordPress loop – make sure to change the name to match the image size declared in step 2):
Method 2:
Insert the following code right at the top of your Loop:
// get featured image
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), ‘post’);
Show your image (with conditional):
