Featured Images in Quick Edit

There are not so much tutorials about tweaking the Quick Edit in WordPress. But is is a very useful function that can save you enough time. So, now we will add a quick featured image option based on WordPress default uploader.

/20 comments

If you work with your custom theme, I hope you know that you must begin with the add_theme_support( 'post-thumbnails' ) in your functions.php file, because it activates the featured images functionality.

The Quick Edit option works with the help of columns. So, unless you have a column for your custom quick edit option, it won’t work.

You can copy the below code even without changes to your current theme functions.php file.

/*
 * This action hook allows to add a new empty column
 */
add_filter('manage_post_posts_columns', 'misha_featured_image_column');
function misha_featured_image_column( $column_array ) {
 
	// I want to add my column at the beginning, so I use array_slice()
	// in other cases $column_array['featured_image'] = 'Featured Image' will be enough
	$column_array = array_slice( $column_array, 0, 1, true )
	+ array('featured_image' => 'Featured Image') // our new column for featured images
	+ array_slice( $column_array, 1, NULL, true );
 
	return $column_array;
}
 
/*
 * This hook will fill our column with data
 */
add_action('manage_posts_custom_column', 'misha_render_the_column', 10, 2);
function misha_render_the_column( $column_name, $post_id ) {
 
	if( $column_name == 'featured_image' ) {
 
		// 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
			$thumb_id = get_post_thumbnail_id( $post_id );
			echo '<img data-id="' . $thumb_id . '" src="' . wp_get_attachment_url( $thumb_id ) . '" />';
 
		} else {
 
			// data-id should be "-1" I will explain below
			echo '<img data-id="-1" src="' . get_stylesheet_directory_uri() . '/placeholder.png" />';
 
		}
 
	}
 
}

Add some CSS to Admin Area

Actually this is not required step at all but if you want columns and your new quick edit option look beautiful, add this to your functions.php too:

add_action( 'admin_head', 'misha_custom_css' );
function misha_custom_css(){
 
	echo '<style>
		#featured_image{
			width:120px;
		}
		td.featured_image.column-featured_image img{
			max-width: 100%;
			height: auto;
		}
 
		/* some styles to make Quick Edit meny beautiful */
		#misha_featured_image .title{margin-top:10px;display:block;}
		#misha_featured_image a.misha_upload_featured_image{
			display:inline-block;
			margin:10px 0 0;
		}
		#misha_featured_image img{
			display:block;
			max-width:200px !important;
			height:auto;
		}
		#misha_featured_image .misha_remove_featured_image{
			display:none;
		}
	</style>';
 
}

Once done, you should get something like this:

How to add featured image column to all posts page.

2.1 Connect the Plupload Scripts if necessary

I will use WordPress default uploader, so first of all you have to enqueue its scripts and styles, you can do it simple enough with this code.

add_action( 'admin_enqueue_scripts', 'misha_include_myuploadscript' );
function misha_include_myuploadscript() {
	if ( ! did_action( 'wp_enqueue_media' ) ) {
		wp_enqueue_media();
	}
}

2.2 Add Quick Edit fields (featured image in our case)

You have to notice that we do not have the code here for updating the featured image hidden field with the actual values – it is because the values will be updated via JavaScript in the step 2.3.

add_action('quick_edit_custom_box',  'misha_add_featured_image_quick_edit', 10, 2);
function misha_add_featured_image_quick_edit( $column_name, $post_type ) {
 
	// add it only if we have featured image column
	if ($column_name != 'featured_image') return;
 
	// we add #misha_featured_image to use it in JavaScript in CSS
	echo '<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="misha_upload_featured_image">Set featured image</a>
				<input type="hidden" name="_thumbnail_id" value="" />
				<a href="#" class="misha_remove_featured_image">Remove Featured Image</a>
			</div>
		</div></fieldset>';
 
		// please look at _thumbnail_id as a name attribute - I use it to skip save_post action
 
}

Did I forget something? No. But.. what about code that should update the featured image itself?

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, it is no more action required here ๐Ÿ™ƒ

2.3 Some JavaScript Magic

The first part of the below code is the script for our upload button, the second part of the code will update the featured image field when you click “Quick Edit” link.

<?php
add_action('admin_footer', 'misha_quick_edit_js_update');
function misha_quick_edit_js_update() {
 
	global $current_screen;
 
	// add this JS function only if we are on all posts page
	if (($current_screen->id != 'edit-post') || ($current_screen->post_type != 'post'))
		return;
 
		?><script>
		jQuery(function($){
 
			$('body').on('click', '.misha_upload_featured_image', function(e){
				e.preventDefault();
				var button = $(this),
				 custom_uploader = wp.media({
					title: 'Set featured image',
					library : { type : 'image' },
					button: { text: 'Set featured image' },
				}).on('select', function() {
					var attachment = custom_uploader.state().get('selection').first().toJSON();
					$(button).html('<img src="' + attachment.url + '" />').next().val(attachment.id).parent().next().show();
				}).open();
			});
 
			$('body').on('click', '.misha_remove_featured_image', function(){
				$(this).hide().prev().val('-1').prev().html('Set featured Image');
				return false;
			});
 
			var $wp_inline_edit = inlineEditPost.edit;
			inlineEditPost.edit = function( id ) {
				$wp_inline_edit.apply( this, arguments );
 				var $post_id = 0;
				if ( typeof( id ) == 'object' ) { 
					$post_id = parseInt( this.getId( id ) );
				}
 
				if ( $post_id > 0 ) {
					var $edit_row = $( '#edit-' + $post_id ),
							$post_row = $( '#post-' + $post_id ),
							$featured_image = $( '.column-featured_image', $post_row ).html(),
							$featured_image_id = $( '.column-featured_image', $post_row ).find('img').attr('data-id');
 
 
					if( $featured_image_id != -1 ) {
 
						$( ':input[name="_thumbnail_id"]', $edit_row ).val( $featured_image_id ); // ID
						$( '.misha_upload_featured_image', $edit_row ).html( $featured_image ); // image HTML
						$( '.misha_remove_featured_image', $edit_row ).show(); // the remove link
 
					}
				}
 		}
	});
	</script>
<?php
}

And the result. It is great, isn’t it? ๐Ÿค—

How to change post featured image via Qะณัˆัะป Edit menu.

What do you think? Should I publish the complete Quick Edit tutorial?

Related

Need some help with WordPress?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Comments — 20

Leave a comment

php js HTML CSS Code