How to Add Support for Post Thumbnails - dummies

By Lisa Sabin-Wilson

Post thumbnails (or featured images) in WordPress take a lot of the work out of associating an image with a post and using the correct size each time. A popular way to display content in WordPress themes includes a thumbnail image with a short snippet (or excerpt) of text — the thumbnail images are all the same size and placement within your theme.

Prior to the inclusion of post thumbnails in WordPress, users had to open their images in an image-editing program (such as Photoshop) and crop and resize them. Or users had to write fancy scripts that would resize images on the fly; however, these scripts tended to be resource-intensive on web servers, so they weren’t an optimal solution.

How about a content management system that crops and resizes your images to the exact dimensions that you specify? Yep — WordPress does that for you, with just a few adjustments.

By default, when you upload an image in WordPress, it creates three versions of your image based on dimensions set on your Dashboard’s Media Settings page (choose Settings→Media):

  • Thumbnail size: Default dimensions are 150px x 150px.

  • Medium size: Default dimensions are 300px x 300px.

  • Large size: Default dimensions are 1024px x 1024px.

So, when you upload one image, you actually end up with four sizes of that same image stored on your web server: thumbnail, medium, large, and the original (full size) image you uploaded. Images are cropped and resized proportionally, and typically when you use them in your posts, you can designate which size you want to use in the image options of the uploader.

You can find the uploader on the Add New Post, Add New Page, and Add New Media pages on your WordPress Dashboard.

Within the WordPress image uploader, you can designate a particular image as the featured image of the post, and then, using the Featured Images function that you add to your theme, you can include some template tags to display your chosen featured image with your post. This is helpful for creating Magazine or News Style themes that are so popular with WordPress sites.

image0.jpg

Adding support for different image sizes other than the default image sizes that are set on the Media Settings page on your Dashboard is helpful when you have sections of your site in which you want to display a much smaller thumbnail, or a larger version of the medium size but not as big as the large size.

Adding post thumbnails to a theme

To add support for post thumbnails, add one line of code to your theme functions (functions.php) file anywhere before the closing ?>:

add_theme_support( 'post-thumbnails' );

After you add this line of code, you can use the featured image for your posts because it requires the Post Thumbnails function to be activated. You can then start designating images as featured using the built-in featured image found in the WordPress image uploader and on the Add New Post page, where you write and publish your posts.

After you start adding featured images to your posts, make sure you add the correct tag in your template(s) so the featured image appears on your site in the area you want it to. Open your index.php template, for example, and add the following line of code anywhere to include the default thumbnail-size version of your chosen featured image in your posts:

<?php if ( has_post_thumbnail() ) { the_post_thumbnail('thumbnail'); ?>

The first part of that line of code checks whether a featured image is associated with the post; if there is one, the image appears. If a featured image does not exist for the post, nothing returns. You can also include the other default image sizes — set in the Media Settings page on the Dashboard, — for medium, large, and full-sized images by using these tags:

image1.jpg

<?php if ( has_post_thumbnail() ) { the_post_thumbnail('medium'); ?>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('large'); ?>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); ?>

Adding custom image sizes for post thumbnails

If the predefined, default image sizes in WordPress (thumbnail, medium, large, and full) don’t satisfy you and you have an area on your site that you want to display images with dimensions that vary from the default, WordPress makes it relatively easy to add custom image sizes in your theme functions file. You then use the the_post_thumbnail function to display the featured image in your theme.

You aren’t limited on what sizes you can add for your images, and this example shows you how to add a new image size of 600px x 300px. Add the following line to your theme functions file (functions.php) below the previous function — add_theme_support(‘post-thumbnails’).

add_image_size('custom', 600, 300, true);

This code tells WordPress that it needs to create an additional version of the images you upload and to crop and resize them to 600px in width and 300px in height. Notice the four parameters in the add_image_size function:

  • Name ($name): Give the image size a unique name that you can use later in your template tag. The new image size is named ‘custom’.

  • Width ($width): Give the image size a width dimension in numbers. The width is defined as 600.

  • Height ($height): Give the image size a height dimension in numbers. The height has been defined as 300.

  • Crop ($crop): This parameter is optional and tells WordPress whether it should crop the image to exact dimension, or do a soft proportional resizing of the image. This has been set to true (the accepted arguments are true or false).

Adding the custom image size to your template to display the image you’ve designated as featured is the same as adding default image sizes, except the name of the image is set in the parentheses of the template tag. To add in the example custom image size, use the following tag:

<?php if ( has_post_thumbnail() ) { the_post_thumbnail('custom'); ?>