Featured image is a popular feature in WordPress themes. It is also known as post thumbnails. Today most built-in WordPress themes support post thumbnails. In this article I will show you how to add featured images in WordPress.
Most themes supports featured image by default. You can easily check whether your theme supports featured images by going to the post editor. Simply create new post and scroll down, if the theme supports featured image you will see a meta box called featured images on the right side of the screen.
If your theme do not support featured images, it is still possible that you can add this option in your theme.
First of all you have to enable featured image support for post and pages. For that you need to add this line of code in your theme’s functions.php file:
add_theme_support( 'post-thumbnails' );
Now you will see featured image option enabled in your posts or pages. 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(); ?>
Based on the themes, the template file will vary. You have to add this code inside your post loop.
The code above is only the basic function to enable featured image support and display featured images in your theme. If you want to add specific size for featured images you upload, you need to add this line of code to your functions.php file.
set_post_thumbnail_size( 400, 280);
Here the parameters will set the featured image size in this order width and height.
Registering Additional Image Sizes
You can also add additional featured image sizes with the function add_image_size(). The usage of add_image_size function is like this: add_image_size( ‘name-of-size’, width, height, crop mode );
There are 3 different types of crop mode such as unlimited height, soft crop, hard crop. Lets cover each example and how it works.
Example 1: Unlimited Height Mode
// Image size for Single Posts add_image_size( 'single-post-thumb', 660, 9999 );
In this example I added a image size called single-post-thumb with width 660px and height 9999px. Here the height specified is 9999px which may not cross an image height, so that it taken as unlimited height.
The main use of this sort of image size is on infographic posts. Infographics tend to be very long and full of information. It is not good idea for using hard cropping such image on a single post. Infografics are naturally wider than the content width which may break your design, for that specify a width and leave the height to be unlimited. So all of infographic can be shown without any distortion.
Example 2: Soft Crop Mode
// Image size for Archive Page add_image_size( 'archive-thumb', 220, 110 );
In this example I added a image size called archive-thumb with width 220px and height 110px.
This crop method resizes the image proportionally without distorting it. Usually it matches the width dimension and the heights are different based on each image’s proportion.
Example 3: Hard Crop Mode
// Image size for Sidebar add_image_size( 'sidebar-thumb', 120, 120, true );
In this example I added a image size called sidebar-thumb with width 120px and height 120px.
Here you can see a value “true” added after the height. It is telling WordPress to crop the image to the size that we have defined. This method is used in most theme designs to make sure everything is proportionate, so that the design looks good. This function will automatically crop the image either from the sides or from the top and bottom depending on the size.
You can manually adjust the image at the time when you have uploaded an image and before you insert into post, you can click on ‘edit image’ and from there change the thumbnail or the whole image, scale, rotate, or flip the image , and for the thumbnail select the exact portion of the image you want.
Display Additional Image Sizes in your Theme
Now lets take a look how to display the desired image sizes in your theme. Open the theme file where you want to display the image and give the following code with the desired image name.
<?php the_post_thumbnail( 'your-specified-image-size' ); >
Note: You have to add this code inside the post loop.You probably should wrap it around with the styling that fits your need.
If any post images that were added prior to the inclusion of this function will not have the new size. So you need to regenerate thumbnails and image sizes for older posts. You can easily regenerate the images for older post by the plugin Regenerate Thumbnails.
If you have any questions or suggestions, then please let us know by leaving a comment below.
