Using Featured Images in Custom Post Types

Share on facebook
Share on twitter
Share on email
Share on facebook
Share on twitter
Share on email

Custom Post Types are one of my favourite features in WordPress nowadays, and I use the excellent Easy Content Types plugin for generating them.

Sometimes I need to include uploadable images within the the custom post types, and although the plugin mentioned allows file uploads, I still feel that some tweaking of the ‘Featured Image’ functionality provided by WordPress is still the most ideal method of doing this.

So at the end of this tutorial we will have something that looks like the screen below

This is a screenshot of the ‘Books’ custom post type I have running on this website. The custom post type is used to display the Resources > Books part of the site. As you can see we have a custom meta box with some specific details about each book, as well as a place where to upload a screenshot of the book. This last item is using featured images.

I am not going to go into the creation of a custom post type and custom meta box as those are covered in our previous article about custom post types. By following that article you should be able to create the custom post type you need and also any custom meta boxes with custom fields if required.

Then to add the image upload we need to install the Multiple Post Thumbnails plugin. When that is installed you can open up your theme’s functions.php and add the following code:


$thumb3 = new MultiPostThumbnails(array(
‘label’ => ‘Book Screenshot’,
‘id’ => ‘book-screenshot’,
‘post_type’ => ‘book’

This will create another featured image with name ‘Book Screenshot’ and associate with the ‘Book’ post type. And there you have it, that’s all you need from the admin side. On the front end, to display the image you can use the following code:

if (class_exists(‘MultiPostThumbnails’) && MultiPostThumbnails::has_post_thumbnail(‘book’, ‘book-screenshot’)) :
MultiPostThumbnails::the_post_thumbnail(‘book’, ‘book-screenshot’, NULL, ‘thumbnail’, array(‘class’=>’alignnone’) );

If you enjoyed this post, make sure to subscribe to WPMayor’s RSS feed.

Table of Contents
Our Sponsors
Our sponsors

Leave a Reply

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

Stay up-to-date with the Mayor
Sign up to receive one weekly email about our latest reviews, tutorials, giveaways and more.