Just a quick and easy WordPress tip today to start the week!
While working on my latest WordPress website, I found myself requiring the functionality to assign more than one featured image to a post. I wanted one featured image to display on the website homepage, with the other featured image being displayed on the post’s single.php template. At first I thought I may need to start manually adding a new custom field (with an image upload feature). However, I decided to do a quick Google search to make sure someone hadn’t already provided a working plugin solution.
…turns out, someone had. You can’t beat the WordPress community!
Introducing: “Multiple Post Thumbnails”
To begin, open up your WordPress theme’s functions.php, and make sure featured images have been activated with the following code. I also added in an extra line declaring the default size I wanted the featured images to be.
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 210, 190, true );
Your first featured image is ready to roll (using standard WordPress built in functions). To display this featured image, I put this code in my index.php loop…
<?php the_post_thumbnail(); ?>
Now the second featured image needs to be set up. Download, upload, and install the plugin as usual.
Return to your functions.php. The second featured image then needs to be declared.
if (class_exists('MultiPostThumbnails')) {
new MultiPostThumbnails(array(
'label' => 'Second Featured Image',
'id' => 'second-featured-image',
'post_type' => 'post'
)
);
}
The “label” is what the image upload box will be called in your WordPress dashboard. The id is used as a reference so the correct featured image can be displayed in your template. While the “post_type” can be used to declare how you want the featured image to be used (“page” for Pages, “post” for Posts, or you can enter a custom post type – pretty nifty!).
You’ll then likely want to set a size for this second featured image. Paste this line in your functions.php (remember to change the id if you edited it in the code above!)
add_image_size('post-second-project-image-thumbnail', 714, 550);
The second featured image is now ready to include in your template layout. Open the file you require (I wanted to add it to single.php), and then place this code in there to display the image.
<?php if (class_exists('MultiPostThumbnails')
&& MultiPostThumbnails::has_post_thumbnail('portfolio', 'second-project-image')) : MultiPostThumbnails::the_post_thumbnail('portfolio', 'second-project-image', NULL, 'post-second-project-image-thumbnail'); endif; ?>
1. Make sure it’s in your loop!
2. Again, change any ID references if you’ve edited the ID previously.
That’s that! Your second featured image should work a dream. When adding a new post in your admin area, you will notice a new addition to the sidebar area, ready for you to use.
If you wish to add further featured images, repeat the previous process, adding new ID’s. Simple!
11:36 06/04/2011
How would I go about adding an arbitrary number of featured images?
12:47 13/04/2011
Hi Tom, sorry about the late response!
Unlimited featured images would be fairly difficult, as your template essentially needs to know which images to fetch using set IDs. If you want to present a very large collection of images, I’d probably advise looking at the gallery function in WordPress – http://codex.wordpress.org/Gallery_Shortcode
However, as mentioned in the blog, you can continue to manually add as many featured images as you want. If you had a certain post type which you’d be looking to add plenty of images to, then you can set a custom post ID.
Hope I’ve been of help!
14:41 13/04/2011
Hi Tom,
To further Jack’s comment, there is actually a really good plugin available for attaching images (or other filetypes) to a post. It is called “Attachments” and can be found here – http://wordpress.org/extend/plugins/attachments/
It has come in a lot of use for me, many times!
14:50 19/05/2011
Hi Jack
thanks for that, its exactly what i was looking for :)
16:20 20/05/2011
No problem Jakub!
18:32 27/05/2011
Great article! This is exactly what I was looking for. The only thing I am trying to figure out now is how to get the link to the full size image for the multiple featured images. I used the code below to link to the original featured image but now I want to be able to get the links of the rest. Anyone have any ideas?
“
18:35 27/05/2011
Actually, scratch that! I just figured it out!
23:42 31/05/2011
Hi Jack, excellent stuff! however for any reason I just can’t figure it out I cannot get the option on the panel :( First I tried with a different ID and didn’t work, then I just copy and paste your code and is not working neither :(, do you have any idea why?
00:15 01/06/2011
oh i think i got a little mistake… in the call code, you set ‘portfolio’ instead of post! regards!
07:55 01/06/2011
Cheers andrew, well done on working it out!
18:11 20/06/2011
Hi Jack,
I’m trying to use this on a custom post type. When adding a new custom post or editing an existing one, I never see any box for uploading the second featured image. When registering my custom post type, I did set some specific supports, so I’m wondering if that might be the problem. From my register_post_type array:
‘supports’ => array(‘thumbnail’,'custom fields’,'second-featured-image’)
If that is the issue, I’m just not sure what to put in there to make the box appear. Any ideas? Thanks.
07:55 22/06/2011
Hi Jon,
Have you edited the post type line when adding the second featured image in functions.php?
See below…
‘post_type’ => ‘post’
‘post’ should be changed to the ID of your custom post type.
08:28 28/07/2011
Hello Jack,
nice feature for a plugin, and works great – but I´m trying to get the link to a larger size of the new featured image, but I´m completely in a dead end now.
I´ll like to set the what size the larger image would be, not just the default large set in wp.
Hope you can help me out with this one.
18:01 18/10/2011
Love the power of Google, love WordPress and love reading stuff that solves my aaaaaaaahhh moments :P
Great stuff. I am going to check it out see how this turns out.