Quick Edit Tutorial

I know that usually making changes in Quick Edit menu is not necessary but this option can save you so much time. Especially if you connect it with bulk edit feature.

/17 comments
Add two custom quick edit inputs – text field and checkbox.
Add two custom quick edit inputs – text field and checkbox.

Step 1. Once you decided to add your custom option in quick edit, you must create a column for this option

I decided to add two options – product price and product featured option. The code below is for post type but I describe how to do it for custom post types as well.

/*
 * New columns
 */
add_filter('manage_post_posts_columns', 'misha_price_and_featured_columns');
// the above hook will add columns only for default 'post' post type, for CPT:
// manage_{POST TYPE NAME}_posts_columns
function misha_price_and_featured_columns( $column_array ) {
 
	$column_array['price'] = 'Price';
	$column_array['featured'] = 'Featured product';
	// the above code will add columns at the end of the array
	// if you want columns to be added in another place, use array_slice()
 
	return $column_array;
}
 
/*
 * Populate our new columns with data
 */
add_action('manage_posts_custom_column', 'misha_populate_both_columns', 10, 2);
function misha_populate_both_columns( $column_name, $id ) {
 
	// if you have to populate more that one columns, use switch()
	switch( $column_name ) :
		case 'price': {
			echo '$'.get_post_meta( $id, 'product_price', true );
			break;
		}
		case 'featured': {
			if( get_post_meta($id,'product_featured',true) == 'on') 
				echo 'Yes';
			break;
		}
	endswitch;
 
}

Once the columns are added, you can play with CSS as well to make some of them wider or thiner. If you want the array_slice example, please look at this tutorial.

Step 2. quick_edit_custom_box

The important thing you have to know about this filter is that it fires for EVERY custom column. In some official WordPress tutorials each input field is wrapped in <fieldset> element, which is incorrect. I want ALL my new fields to be wrapped in a single <fieldset> tag. Do not you think so?

/*
 * quick_edit_custom_box allows to add HTML in Quick Edit
 * Please note: it files for EACH column, so it is similar to manage_posts_custom_column
 */
add_action('quick_edit_custom_box',  'misha_quick_edit_fields', 10, 2);
 
function misha_quick_edit_fields( $column_name, $post_type ) {
 
	// you can check post type as well but is seems not required because your columns are added for specific CPT anyway
 
	switch( $column_name ) :
		case 'price': {
 
			// you can also print Nonce here, do not do it ouside the switch() because it will be printed many times
			wp_nonce_field( 'misha_q_edit_nonce', 'misha_nonce' );
 
			// please note: the <fieldset> classes could be:
			// inline-edit-col-left, inline-edit-col-center, inline-edit-col-right
			// each class for each column, all columns are float:left,
			// so, if you want a left column, use clear:both element before
			// the best way to use classes here is to look in browser "inspect element" at the other fields
 
			// for the FIRST column only, it opens <fieldset> element, all our fields will be there
			echo '<fieldset class="inline-edit-col-right">
				<div class="inline-edit-col">
					<div class="inline-edit-group wp-clearfix">';
 
			echo '<label class="alignleft">
					<span class="title">Price</span>
					<span class="input-text-wrap"><input type="text" name="price" value=""></span>
				</label>';
 
			break;
 
		}
		case 'featured': {
 
			echo '<label class="alignleft">
					<input type="checkbox" name="featured">
					<span class="checkbox-title">Featured product</span>
				</label>';
 
			// for the LAST column only - closing the fieldset element
			echo '</div></div></fieldset>';
 
			break;
 
		}
 
	endswitch;
 
}

Once finish this step, the fields should appear in your Quick Edit. Do not worry if the fields are empty, we will populate them in the last step of this tutorial.

Step 3. Save the quick edit option values with save_post

It is hard to believe in that (well, maybe not so hard), but the quick edit saves the field values with the regular save_post action hook. And that’s great.

/*
 * Quick Edit Save
 */
add_action( 'save_post', 'misha_quick_edit_save' );
 
function misha_quick_edit_save( $post_id ){
 
	// check user capabilities
	if ( !current_user_can( 'edit_post', $post_id ) ) {
		return;
	}
 
	// check nonce
	if ( !wp_verify_nonce( $_POST['misha_nonce'], 'misha_q_edit_nonce' ) ) {
		return;
	}
 
	// update the price
	if ( isset( $_POST['price'] ) ) {
 		update_post_meta( $post_id, 'product_price', $_POST['price'] );
	}
 
	// update checkbox
	if ( isset( $_POST['featured'] ) ) {
		update_post_meta( $post_id, 'product_featured', 'on' );
	} else {
		update_post_meta( $post_id, 'product_featured', '' );
	}
 
 
}

After this step when you click «Update» button, the Quick Edit fields should be updated in your custom columns.

Step 4. Populate the quick edit with columns data

The last and not so simple one, because here we will make some coding in JavaScript. First of all create an empty JavaScript file, I will name it populate.js, but you can name it as you want. Place this file in your current theme directory or somewhere else.

First, let’s include it to our admin area:

add_action( 'admin_enqueue_scripts', 'misha_enqueue_quick_edit_population' );
function misha_enqueue_quick_edit_population( $pagehook ) {
 
	// do nothing if we are not on the target pages
	if ( 'edit.php' != $pagehook ) {
		return;
	}
 
	wp_enqueue_script( 'populatequickedit', get_stylesheet_directory_uri() . '/populate.js', array( 'jquery' ) );
 
}

We will use jQuery inside this file, so do not forget about jQuery dependency and if you want this file not to be cached, set the 4th parameter of the wp_enqueue_script() function to time().

The populate.js file content:

jQuery(function($){
 
	// it is a copy of the inline edit function
	var wp_inline_edit_function = inlineEditPost.edit;
 
	// we overwrite the it with our own
	inlineEditPost.edit = function( post_id ) {
 
		// let's merge arguments of the original function
		wp_inline_edit_function.apply( this, arguments );
 
		// get the post ID from the argument
		var id = 0;
		if ( typeof( post_id ) == 'object' ) { // if it is object, get the ID number
			id = parseInt( this.getId( post_id ) );
		}
 
		//if post id exists
		if ( id > 0 ) {
 
			// add rows to variables
			var specific_post_edit_row = $( '#edit-' + id ),
			    specific_post_row = $( '#post-' + id ),
			    product_price = $( '.column-price', specific_post_row ).text().substring(1), //  remove $ sign
			    featured_product = false; // let's say by default checkbox is unchecked
 
			// check if the Featured Product column says Yes
			if( $( '.column-featured', specific_post_row ).text() == 'Yes' ) featured_product = true;
 
			// populate the inputs with column data
			$( ':input[name="price"]', specific_post_edit_row ).val( product_price );
			$( ':input[name="featured"]', specific_post_edit_row ).prop('checked', featured_product );
		}
	}
});

That’s it! If this tutorial is too difficult for you, I prepare a Twenty Seventeen child theme – just download, install and inspect the working code.

One question to you – would you like the bulk edit tutorial to be published the next? 🙃

Related Posts

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 11 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

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 — 17

Leave a comment

php js HTML CSS Code

I will only use your personal information to contact you. Privacy Policy