Create a custom Featured Image box

When building a UI for adding meta data to a post in WordPress it’s always best to stick to the WordPress styling as much as possible. So, if you’re adding an image upload field to a post, it’s often a good idea to use a known UI element such as the Featured Image meta box. This especially useful if you are asking for a ‘secondary’ featured image – such as one that could be used as a post header image, while keeping the default featured image separate for blog listings, etc.

I did exactly that in a recent project where the posts needed a landscape listing image to be displayed in blog listings while the featured image was reserved for social sharing and viewing inside the single post content.

In order to achieve this I needed to add a custom meta box (with markup copied from the core Featured Image box) along with some Javascript to handle the media upload and general on page functions. You will find all of the code for this below and it works 100% correctly as is:

The PHP code simply needs to be added to your theme’s functions.php file (or better yet, a custom plugin) and the Javascript needs to be loaded on the post edit screen and you’ll be good to go with a new meta box that looks and works exactly the same as the default Featured Image box.

8 thoughts on “Create a custom Featured Image box

  1. Thanks for the wonderful code Hugh! I tried to use it in one plugin I am developing. One thing I am not getting. If I set a listing image and click on remove image, without updating the post, it is not working as the original featured image behavior of WordPress Posts. Please suggest.


  2. Thanks for this!

    Just a minor correction:

    file_frame = ={
    title: jQuery( this ).data( ‘uploader_title’ ),
    button: {
    text: jQuery( this ).data( ‘uploader_button_text’ ),

    should be:

    file_frame = ={
    title: ‘uploader_title’ ),
    button: {
    text: ‘uploader_button_text’ ),

    This allows the labels you’ve defined in the meta box to get passed along to the upload media box.


  3. If above code not working use this one
    $avatar_id = get_post_meta( get_the_ID(), ‘_listing_image_id’, true );
    $image = wp_get_attachment_image_src( $avatar_id, “thumbnail”, “”, array( “class”=> “img-responsive” ) );


Leave a Comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s