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:

  1. Add an admin column for WordPress featured images of any post type.
  2. 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.

featured images in admin column and quick edit

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.

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
		}
	}
}
#featured_image{
	width:120px;
}
td.featured_image.column-featured_image img{
	max-width: 100%;
	height: auto;
}

Once done, you should get something like this:

WordPress admin column for featured images
Or the placeholder image should be displayed in case there are no featured image set for a post.

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:

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? 🤗

featured images in admin column and quick edit
Misha Rudrastyh

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

Follow me on X