How to Add Thumbnails and Featured Images
A “thumbnail” is an image which is chosen as the representative image for Posts, Pages or Custom Post Types. It is a design feature of WordPress themes which allow you to label one image in each article as a “featured image”. It displays on the theme pages alongside the article links and post excerpts as they appear listed on other sites. In this article you will learn how to add post thumbnails in WordPress.
The Beginner’s Guide
To know whether your theme supports featured images or not, just go to the post editor. Create a new post and scroll down to see a meta box called “featured images” on the right-hand side of the screen (see the red arrow in the image below)
Adding Post Thumbnail or Featured Image
You need to click on the “Set Featured Image” link to add a featured image, which will open the WordPress Media Uploader. Here you can upload an image from your computer or can use an existing image from the media library if you’e already uploaded some in the past that you’d like to re-use. After selecting the image, just click on the Set Featured Image button.
You will get the image in the Featured Image meta box, like this:
The image may appear a little bit differently in your theme depending on how your theme handles the featured images. Some like to use smaller thumbnails along with post summaries on the main page, and a larger version on the single post view. Your featured image will automatically appear with your posts as you share them, depending on settings that have already been defined by your theme developer. But if you want to change the way your theme handles featured images and post thumbnails, you’ll need to have some knowledge of coding. Follow the instructions below.
Theme Developer’s Guide
Most of the currently available themes support featured images but it is still possible that your theme does not. In that situation, you can add featured image support to your theme yourself if you know to edit theme files and have an understanding of a little CSS.
First, open the functions.php file in your themes folder and paste the code below, which will enable theme support for both posts and pages:
add_theme_support( 'post-thumbnails' );
Now you should be able to see an option in your dashboard for featured images. However, the problem is that it will not display in your themes before adding the code in the theme. By using the following code you can display the thumbnail anywhere inside the Loop:
<?php the_post_thumbnail(); ?>
This is the basic function, but if you want to get advanced functions like specifying post thumbnail size, you need to open your functions.php file and paste this code:
set_post_thumbnail_size( 50, 50);
The dimensions are set in order; the first number defines width and the second defines height, both measured in pixels.
By adding the following line, you can add additional image sizes for your featured image:
// Image size for single posts
add_image_size( 'single-post-thumbnail', 590, 180 );
Here, the new image size single-post-thumbnail is showed with 590px width and 180px height. To use this image size you need to add it in the appropriate theme file. Checkout the guide on adding additional image sizes in WordPress to know more.
If your previously uploaded featured images are still appearing in some other size, then regenerate thumbnails and image sizes for older posts.
Later, you can call the specific thumbnail sizes in your post loop:
<?php the_post_thumbnail('single-post-thumbnail'); ?>
You can extend the functionality of featured images by setting a default fallback image for post thumbnails, displaying featured images with captions, or adding multiple post thumbnails or featured images.