Featured images also known as post thumbnails are a popular feature in WordPress themes. Today most WordPress photography themes, restaurant themes, church themes, and other types of themes have built-in support for post thumbnails. In this article we will show you how to add featured images or post thumbnails in WordPress.
You might be thinking why are we using featured image and post thumbnail interchangeably. Well, when this feature was first introduced in WordPress 2.9, it was called post thumbnails. However, in the next version it was renamed to featured image.
Beginners Guide to Featured Images in WordPress
Featured Images or Post Thumbnails is a theme feature. Most themes such as Genesis and others support featured images by default. An easy way to figure out whether your theme supports featured images is by going to the post editor. Simply create a new post and scroll down a little to see if there is a meta box called featured images on the right hand side of the screen.
Adding Post Thumbnail or Featured Image in WordPress
To add a featured image in a WordPress post, simply click on “Set Featured Image” link inside the featured image meta box shown in the screenshot above. This will open the WordPress Media Uploader. You can use that to upload an image from your computer or use an existing image from your media library. Once you select the image, simply click on Set Featured Image button.
The image will appear in the Featured Image meta box, like this:
It is important to note that the image may appear a little bit differently in your theme. It all depends on how your theme handles featured images. Some magazine themes use smaller thumbnails along side post summaries on the main page, and a larger version on the single post view. Depending on settings defined by your theme developer, your featured image will automatically appear with your posts. However, if you want to change the way your theme handles featured images and post thumbnails then continue reading.
Note: Everything below this will require coding knowledge.
Theme Developers Guide to Featured Image and Post Thumbnails in WordPress
Even though featured image is a popular feature supported by a large number of themes, it is still possible that you might be using a theme that does not support featured images. In that case, you can add featured image support to your theme. If you are comfortable editing theme files and know your way around a little CSS, then you can do it yourself.
To add featured image support in a WordPress theme, you need to add this line of code in your theme’s functions.php file:
add_theme_support( 'post-thumbnails' );
This code will enable featured image support for posts and pages. You can now go to posts or pages, and you will see featured image option enabled. However, when you set a featured image it will not automatically display in your WordPress theme. To display featured images in your theme, you need to edit your templates and add this line of code where you want to display the featured image:
<?php the_post_thumbnail(); ?>
The files you add the above code in will vary based on your theme. You will want to add the code inside your post loop.
The above code is the basic function that you need to add featured image support and display featured images in your theme. To set image size for featured images you upload, you need to add this line of code to your
set_post_thumbnail_size( 50, 50);
The parameters for set_post_thumbnail_size are in this order: width, height.
You can also set additional image sizes to use with the_post_thumbnail() function. For example:
// Image size for single posts add_image_size( 'single-post-thumbnail', 590, 180 );
In this example we have added a new image size called single-post-thumbnail with 590px with and 180px height. To use this image size in our theme, we will still need to add it in the appropriate theme file. Checkout our guide on adding additional image sizes in WordPress for more details.
If you have previously uploaded featured images, but they are still appearing in some other size, then you need to regenerate thumbnails and image sizes for older posts.
Below is an example of the featured image function with a specific image size.
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
This is broken down version of the full functionality. You can further extend the functionality of featured images. For example, you can set a default fallback image for post thumbnails, display featured images with captions, or even add multiple post thumbnails or featured images.
We hope that this article helped you learn how to add featured images or post thumbnails in WordPress. If you have any questions or suggestions, then please let us know by leaving a comment below.