Multiple Featured Images for 1 WordPress Post

Follow @tristarweb

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!

About Jack

Howdy... I'm Jack. I have interests in various areas of web design, but mainly you'll find me playing with Wordpress, Magento, and the latest developments in languages such as HTML5 and CSS3. I'm also a keen movie watcher, and regularly watch Newcastle FC lose at the weekend. Check out my blog posts and get ready to be blown away...

14 Responses to Multiple Featured Images for 1 WordPress Post

  1. Tom says:

    11:36 06/04/2011

    How would I go about adding an arbitrary number of featured images?

  2. Tristar Author

    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!

  3. 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!

  4. Jakub says:

    14:50 19/05/2011

    Hi Jack
    thanks for that, its exactly what i was looking for :)

  5. Tristar Author

    No problem Jakub!

  6. Matt says:

    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?

  7. Matt says:

    18:35 27/05/2011

    Actually, scratch that! I just figured it out!

  8. andrew says:

    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?

  9. andrew says:

    00:15 01/06/2011

    oh i think i got a little mistake… in the call code, you set ‘portfolio’ instead of post! regards!

  10. Tristar Author

    Cheers andrew, well done on working it out!

  11. Jon Wilcox says:

    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.

  12. Tristar Author

    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.

  13. André says:

    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.

  14. Marco Berrocal says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please wrap all source code with [code][/code] tags.

Follow Tristar on Twitter