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.

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() and wp_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 that get_post_thumbnail_id() can be hardly altered, but wp_get_attachment_image_url() can – so I esc_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? 🤗

# WordPress, Attachments

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 Twitter