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.

16 Comments

  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.

    Liked by 1 person

  2. Thanks for this!

    Just a minor correction:

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

    should be:

    file_frame = wp.media.frames.file_frame = wp.media({
    title: button.data( ‘uploader_title’ ),
    button: {
    text: button.data( ‘uploader_button_text’ ),

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

    Like

  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” ) );

    Like

  4. hey! this is great, just what i was looking for. I am seeing the meta box in WP but when I click to set the imagen, the modal window isn’t opening…
    any advice?
    I just copied and pasted your code, also added and changed some suggestions in the comments, still not working….

    thank you!

    Like

  5. Hi I’ve problems to display this image, so I wrote additional code (functiosn.php):

    ID, $value, true);

    if (!empty ($image_id)) {
    return is_array ($image_id) ? stripslashes_deep ($image_id) : stripslashes (wp_kses_decode_entities ($image_id));
    } else {
    return false;
    }
    }?>

    So I can display the image in two Ways (In my theme, I wrote this into a custom page template, directly in the loop…):
    Only the URL so I/You can use the URL anywhere:

    The image with tags and WP-classes:

    So, I hope this helps somebody …. or is there any other possibility to show the image?

    Like

    1. Hi I’ve problems to display this image, so I wrote additional code (functiosn.php):

      function listing_image_get_meta ($value) {
      global $post;

      $image_id = get_post_meta ($post->ID, $value, true);

      if (!empty ($image_id)) {
      return is_array ($image_id) ? stripslashes_deep ($image_id) : stripslashes (wp_kses_decode_entities ($image_id));
      } else {
      return false;
      }
      }

      So I can display the image in two Ways (In my theme, I wrote this into a custom page template, directly in the loop…):
      Only the URL so I/You can use the URL anywhere:
      $imagething = wp_get_attachment_image_src( listing_image_get_meta(‘_listing_image_id’), ‘full’); echo $imagething[0]; //instead of ‘full’ you can use any featured/registered image-size

      The image with tags and WP-classes:
      echo wp_get_attachment_image( listing_image_get_meta(‘_listing_image_id’), ‘full’); //instead of ‘full’ you can use any featured/registered image-size

      So, I hope this helps somebody …. or is there any other possibility to show the image?

      Like

      1. Amazing code, however i ran into some issues when using this:
        I’d literally spent hours trying to get your code to work when i figured out that this website converts the standard coding apostrophe into the quote-looking apostrophe. If anyone else runs into problems with this code, try deleting the apostrophes and retyping them.

        Like

  6. I Have Try This code But still Not Working I don, t use Any Plugin . I Have Directly paste Code in Fuction.php and also Paste Script File .. So Please Tell me What I do … Thanks

    Like

  7. Maybe I’m missing something, but I cannot get it to work.
    I’ve got the meta box displaying, sort of. That works, and I’m enqueue-ing the script properly. However, “Set listing image” link does nothing; it just has the url of javascript.

    Like

Leave a Comment

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

WordPress.com Logo

You are commenting using your WordPress.com 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