Adding Multiple Post Thumbnails/Featured Images In WordPress

As a WordPress user you might have tried a lot of tools and techniques for adding excellence to your website/blog. Proper image placement is one such approach that can aid in seamless growth of your site/blog. By ensuring appropriate dimension and resolution of page/post images, you can reduce the chances of any distortion with the same. It is here that the need for adding multiple featured post/page images is felt.

This tutorial will help you in understanding the steps involved with one of the finest methods for adding multiple post thumbnails/featured images in your WordPress blog/site.

Before discussing the process of adding multiple post thumbnails/featured images in WordPress posts/pages, it’s pivotal to know why a blog owner actually needs to add the same.

Let’s understand this better by taking up two separate scenarios as explained below:

Scenario No.1

On a WordPress blogging website when you want to show a thumbnail of different blog entries with a list of blog posts, you use a featured image with a specific size and dimension. However, using this blog post image(keeping the size and dimensions same) on the details page for the respective post may result into the image getting distorted depending upon the layout and design chosen for the page. It is here that the need for adding a second featured image is realized.

Let’s discuss this scenario with the help of a screen-shot:

In the above screen-shot, for example if the thumbnail image for the first post “Necessity of Using…….” is 125X125 pixels then using the same image(with same size) on the details page for the respective blog post wouldn’t be possible due to restriction in terms of size and dimensions.

Scenario No.2

For your WordPress blogging site, when you need to show featured image for a blog post in two different locations for example: the details page for the post and the home page slider, there is a possibility that the image size, resolution and dimension requirements on these two locations remain absolutely different, leading to image distortion. It is here that adding a second featured blog post image serves handy. For example, if the blog post image displayed on the details page is 450X160 pixels and the home page slider supports images with 600X220 pixels, then using the same image for the home page slider will result into image distortion. Thus, you need to add a new featured blog post image which would be displayed within the home page slider.

Irrespective of your reason behind the addition of a second featured blog post image, there is one result-proven method that would allow you to add more than one featured image/post thumbnail for your post.

Below, I’ve offered a detailed explanation of the very handy WordPress plugin called Multiple Post Thumbnails which enables you to add an additional featured image to your posts:

Step 1

Go to WordPress.org website and under the ‘plugins‘ tab find the plugin named as ‘Multiple Post Thumbnails’. Opt for downloading and installing the available version of the plugin into your WordPress blog/website.

Step 2

As per the second step, open your functions.php file and add the following code to it:

/* Add secondary thumbnail (featured image) in posts */
$thumb = new MultiPostThumbnails(array(
'label' => 'Secondary Image',
'id' => 'secondary-image',
'post_type' => 'post'
)
);

Step 3- Add a custom thumbnail size to the featured image

Although this is an optional step, it is better to implement the same to ensure that the newly added featured image gets resized automatically. Here, just open your functions.php file and add the below code to it:

add_image_size('post-secondary-image-thumbnail', 350, 250);

Step 4- Display the secondary image in the installed WordPress theme

For this, simply insert the below mentioned code in your post.php template file:

if (class_exists('MultiPostThumbnails')
&& MultiPostThumbnails::has_post_thumbnail('post', 'secondary-image')) :
MultiPostThumbnails::the_post_thumbnail('post', 'secondary-image', NULL, 'post-secondary-image-thumbnail'); endif;

In addition to inserting the above code in the post.php template file, you can also proceed ahead with passing a parameter along with arguments including a class or title. For this, just include the below mentioned code as the last line in the above code snippet:

array('class'=>'','title'=>'','alt'=>'')

Step 5- Add the secondary image to the post via the admin panel

Now, go to your WordPress blog/site’s admin dashboard. Here, you’ll see a new meta box named as ‘Secondary Image’ placed just below the ‘Featured Image’ meta box. Use it for adding the secondary blog post thumbnail just in the similar manner as you usually use the ‘Featured Image’ meta box.

Bonus information about Multiple Post Thumbnails Plugin

In order to use the Multiple Post Thumbnails plugin, you need to have a WordPress version 2.9.2 or higher. This plugin is compatible with all WordPress versions up to 4.0.1 and has been downloaded for 146,658 times till date. The Multiple Post Thumbnails plugin is currently available in version 1.6.4.

Summing it all up

Adding multiple post thumbnails to a post type is perhaps the best technique of sustaining the quality of an image irrespective of its location on the WordPress website. Hope the above tutorial would have helped you understand the easy method of doing so in a flawless format.