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:

View this gist on GitHub

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.

24 responses to “Create a custom Featured Image box”

Vaishali Patil

July 17, 2016 at 2:22 pm

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.

Reply
1. Luis Beas
  
  August 26, 2016 at 8:24 pm
  
  add this “jQuery(“#listingimagediv img”).attr(‘srcset’,attachment.url);” When an image is selected, run a callback.
  
  Reply
Rico Mossesgeld

July 19, 2016 at 10:24 am

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.

Reply
Vaishali Patil

July 20, 2016 at 5:24 am

Thank you very much. This worked for me. It is now functioning exactly like WordPress Featured Image. Thanks!

Reply
Paty

August 26, 2016 at 8:33 pm

How can i get the image on the front of the page?

Reply
1. Mr – Đức Phạm
  
  August 31, 2016 at 12:06 pm
  
  You can get image follow this code :
  “img-responsive” ) ); ?>
  
  Reply
2. Mr – Đức Phạm
  
  August 31, 2016 at 12:15 pm
  
  $avatar_id = get_post_meta( $post_id, “_listing_image_id”, true );
  $image = wp_get_attachment_image( $avatar_id, “thumbnail”, “”, array( “class” => “img-responsive” ) );
  screenshot code : http://prntscr.com/ccg09u
  
  Reply
vittalvittu

October 20, 2016 at 2:08 pm

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

Reply
konsu

November 12, 2016 at 11:10 pm

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!

Reply
Florian Werner

December 8, 2016 at 5:23 pm

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?

Reply
1. Florian Werner
  
  December 8, 2016 at 5:25 pm
  
  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?
  
  Reply
  1. Aske Hippe Brun
    
    December 11, 2016 at 8:58 pm
    
    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.
    
    Reply
anil jangid

January 5, 2017 at 8:30 am

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

Reply
Classic Niall (@Quin452)

May 23, 2017 at 9:09 pm

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.

Reply
1. Pickles in yo face
  
  May 25, 2017 at 5:46 pm
  
  you sure the JS is loading? I’d start there.
  
  Reply
Pickles in yo face

May 25, 2017 at 5:45 pm

Awesome, just what I needed thanks!

Reply
Ferry Slot

June 16, 2017 at 4:28 pm

For the people who did have the Listed image box, but not clickable. try have a look if the javascript is loading well.
I added this code above the code in functions.php:

function add_admin_scripts( $hook ) {

global $post;

if ( $hook == ‘post-new.php’ || $hook == ‘post.php’ ) {
if ( ‘post’ === $post->post_type ) {
wp_enqueue_script( ‘myscript’, get_stylesheet_directory_uri().’/js/scripts.js’ );
}
}
}
add_action( ‘admin_enqueue_scripts’, ‘add_admin_scripts’, 10, 1 );

And then it was loaded at the post edit page. (it wasnt loading before)

Hope it helps people

Reply
Lucas

September 14, 2017 at 4:45 pm

Hi, this post has helped me a lot.

I have managed to create my featured image in a custom post. I can carry it and it is kept wondrous.

But I’m having trouble showing it on my home page. I have tried with the comments codes from above but they do not work for me.

Could you help me?

Thank you very much.

Greetings.

PS: I apologize for my English, is that I use the Google translator.

Reply
Naomi

September 21, 2017 at 6:59 pm

Hello, is there a way to auto-set the second image as featured image in this box?

Reply
ciaran gaffey

November 21, 2017 at 4:34 pm

Hi there, how do I display the listing image in my theme?

Reply
1. Tailgrimm
  
  February 8, 2018 at 10:00 pm
  
  This is exactly what I want to know too. This guide is fine, but it doesn’t specify what we need to display the listing image in the theme templates.
  
  Reply
maasoud

June 6, 2018 at 2:09 pm

Hi there, how do I display the listing image in my theme?

Reply
1. Florian Werner
  
  September 4, 2018 at 11:28 am
  
  Hi maasoud,
  To display the picture, just look at my old comment 🙂
  https://hugh.blog/2015/12/18/create-a-custom-featured-image-box/#comment-9107
  
  Reply
Francis

September 5, 2018 at 6:16 am

Great post!

Reply