Featured Images in an Admin Column and in Quick Edit
In this tutorial I am going to show you how to do two things at the same time:
- Add an admin column for WordPress featured images of any post type.
- Add a quick edit option for featured images.
In order to show you how it all is going to work and look I am going to provide you a screenshot.

I totally believe that you’ve done that guys, but just in a case, let’s activate feature images for your theme by adding the code below to your current theme functions.php
file.
add_action( 'after_setup_theme', function() {
add_theme_support( 'post-thumbnails' );
} );
Once you did that, we can proceed to our custom functionality of feature images column and quick edit.
1. Featured Images Column
And yes, we are going to begin with a column. You might wonder if you really need that in case you came to this tutorial just for Quick Edit functionality. And I have a great news for you – if you want featured images in Quick Edit, you will need a custom column for that. One can not exist without another. It is just how it works, guys.
The code for a custom column:
<?php
// This action hook allows to add a new empty column
add_filter( 'manage_post_posts_columns', 'rudr_featured_image_column' );
function rudr_featured_image_column( $cols ) {
$cols = array_slice( $cols, 0, 1, true )
+ array( 'featured_image' => 'Featured Image' ) // our new column
+ array_slice( $cols, 1, NULL, true );
return $cols;
}
// This hook fills our column with data
add_action( 'manage_posts_custom_column', 'rudr_render_the_column', 10, 2 );
function rudr_render_the_column( $column_name, $post_id ) {
if( 'featured_image' === $column_name ) {
// if there is no featured image for this post, print the placeholder
if( has_post_thumbnail( $post_id ) ) {
// I know about get_the_post_thumbnail() function but we need data-id attribute here
$id = get_post_thumbnail_id( $post_id );
$url = esc_url( wp_get_attachment_image_url( $id ) );
?><img data-id="<?php echo $id ?>" src="<?php echo $url ?>" /><?php
} else {
// data-id should be "-1" I will explain below
?><img data-id="-1" src="placeholder-image.png" /><?php
}
}
}
- Our goal is to add our custom column at the very beginning – just after the checkbox but before the title, so I use
array_slice()
PHP function here. But if the column order really doesn’t matter for you, you can use just$cols[ 'featured_image' ] = 'Featured Image'
. - A couple words about escaping – we are going to print an image ID and URL as HTML-attributes of
<img>
tag. The question is – can we trust get_post_thumbnail_id()
andwp_get_attachment_image_url()
functions? Ok, guys, technically we can not trust anyone and anything but if you inspect the source code of both these WordPress functions, you will notice thatget_post_thumbnail_id()
can be hardly altered, butwp_get_attachment_image_url()
can – so Iesc_url()
only its output. - Also to make our column to look neat, let’s add some CSS:
#featured_image{
width:120px;
}
td.featured_image.column-featured_image img{
max-width: 100%;
height: auto;
}
Once done, you should get something like this:

2. Add Featured Image Option to Quick Edit and Update it With JavaScript
I am going to use the standard WordPress media uploader of course. More about working with it you can read in a separate tutorial.
Enqueue Scripts
First things first, media uploader scripts may not be included to Posts page. But you can do it with the code below:
add_action( 'admin_enqueue_scripts', 'rudr_include_myuploadscript' );
function rudr_include_myuploadscript() {
if ( ! did_action( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
}
Maybe you also would like to check what current page it is with get_current_screen()
function.
Add Quick Edit fields in HTML
Here I am not diving deep into the details, you can read about it in Quick Edit tutorial.
<?php
add_action( 'quick_edit_custom_box', 'rudr_featured_image_quick_edit', 10, 2 );
function rudr_featured_image_quick_edit( $column_name, $post_type ) {
// add it only if we have featured image column
if( 'featured_image' !== $column_name ){
return;
}
?>
<fieldset id="misha_featured_image" class="inline-edit-col-left">
<div class="inline-edit-col">
<span class="title">Featured Image</span>
<div>
<a href="#" class="button rudr-upload-img">Set featured image</a>
<input type="hidden" name="_thumbnail_id" value="" />
</div>
<a href="#" class="rudr-remove-img">Remove Featured Image</a>
</div>
</fieldset>
<?php
}
When you add your custom fields to the Quick Edit, usually you have to update the field values in save_post
action but in this case I use _thumbnail_id
value for the field name attribute, so it is the default field name for featured images:
- when I pass a number to it, the attachment with the specific ID will be set as featured image
- when I pass
-1
, the featured image will be removed.
So, there is no more action required here 🙃
Including media uploader using JavaScript (jQuery actually)
You can paste the code below to a custom .js file, or using admin_footer
action hook.
jQuery(function($){
// add image
$('body').on( 'click', '.rudr-upload-img', function( event ) {
event.preventDefault();
const button = $(this);
const customUploader = wp.media({
title: 'Set featured image',
library : { type : 'image' },
button: { text: 'Set featured image' },
}).on( 'select', () => {
const attachment = customUploader.state().get('selection').first().toJSON();
button.removeClass('button').html( '<img src="' + attachment.url + '" />').next().val(attachment.id).parent().next().show();
}).open();
});
// remove image
$('body').on('click', '.rudr-remove-img', function( event ) {
event.preventDefault();
$(this).hide().prev().find( '[name="_thumbnail_id"]').val('-1').prev().html('Set featured Image').addClass('button' );
});
const $wp_inline_edit = inlineEditPost.edit;
inlineEditPost.edit = function( id ) {
$wp_inline_edit.apply( this, arguments );
let postId = 0;
if( typeof( id ) == 'object' ) {
postId = parseInt( this.getId( id ) );
}
if ( postId > 0 ) {
const editRow = $( '#edit-' + postId )
const postRow = $( '#post-' + postId )
const featuredImage = $( '.column-featured_image', postRow ).html()
const featuredImageId = $( '.column-featured_image', postRow ).find('img').data('id')
if( featuredImageId != -1 ) {
$( ':input[name="_thumbnail_id"]', editRow ).val( featuredImageId ); // ID
$( '.rudr-upload-img', editRow ).html( featuredImage ).removeClass( 'button' ); // image HTML
$( '.rudr-remove-img', editRow ).show(); // the remove link
}
}
}
});
And the result. Looks great, isn’t it? 🤗


Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
gold!
pls publish the complete Quick Edit tutorial !
Ok, next Tuesday 😋
thanks in advance! cant wait !
here it is 👍
thank you. i am using admin col pro for this purpose. just to share.
Hi, this is awesome! Please publish the complete Tutorial.
Great tut! Thanks a lot!
Very nice work, I like all you posts.
Thank you very much! 😊
How Can I add the same for custom post type?
Hi Robert,
And do not forget to turn on featured images for your custom post type
Hello, Misha
All right?
I’m testing this tutorial, but I noticed that the remove highlighted image function is not working in the quick edit part.
I copied and pasted your tutorial exactly.
Would you help me?
Hello Wesley,
Are there any errors in your browser console?
Thanks for the prompt return .. does not return any error.
Watch the video, it does not return any error. :)
https://youtu.be/P1K1X2jqV1s
Please sorry for such a big delay.
Yes, the closing
div
was in the incorrect place (step 2.2).It should be OK now 🙃
Worked perfectly, thank you, thank you.. ;)
Always welcome 🙂
Hi Misha ! First of all, thanks a lot for all your tricks, code and answers ! Best code blog I’ve seen so far.
I would just like to know if we can use the same logic as for the custom post type to show the featured image of pages ?
Hi,
Thank you so much!
Sorry I missed your comment… Yes, sure 🙃
Hi Misha. Thanks for this great tutorial. One question I have: Where do I have to add the code from 2.3? Is this a separate php-file cause of the <?php tags in the code? Or did I miss something? Many thanks in advance.
Hi Gunther,
It can be your theme
functions.php
file.Ok, many thanks Misha … but then without the extra php-tags of 2.3, isn’t it?
Definitely!
I followed the tutorial and the featured image column shows up in the admin editor but doesn’t show up in the quick edit nor does the set feature image link work.
WordPress 5.2.1 with classic editor plugin
Hi,
I copied the code from this tutorial to my theme right now and everything is working for me.
Hi Misha, it is working flawless, but I’d love to update an image custom field, which is like a feature image.
Following your tutorial I guess the key to update an image, other than a feature image, is this line:
Where I should use “acf[field_5ce0d387f89f1]” instead of “_thumbnail_id”.
I got this name from Edit Post page and I can update the custom field by changing the value: .
So what I mean is, as a test, if I update this number through Inspector, from my browser, and then update the post, it works.
However in Quick Edit panel it doesn’t work.
Is my approach correct?
Thanks
Hi Daniel,
I am not so familiar with acf plugins, but I can recommend you to check how your custom image field is stored in wp_postmeta table, what is its meta_key?
I missed your reply for a while. I was expecting some notification in my email :-/ Anyway, thanks for your time!
I think I figured out.
To be honest I am newbie in WordPress coding, but I’m being able to customize my website, thanks to guys like you!
Each Custom Field has a key, or a name associated and all I had to do was to use the ‘save_post’ hook and the following command:
update_post_meta( $post_id, 'acf key', $data )
Much easier than I was thinking!
Great tutorial :)
Thanks,
Thanks!
I was able to use this code to replace the Post List With Featured Images plugin, which hasn’t been updated in more than a year.
Hey! I really love this snippet! But I have a question. In my WordPress I have defined my own custom post type. I would also like to have the images displayed there. Is this also possible?
Graat job Misha!
For Pages thumbnail i changed the term post with pages
add_filter('manage_pages_columns', 'misha_featured_image_column');
and
add_action('manage_pages_custom_column', 'misha_render_the_column', 10, 2);
I works!