Custom Fields in Quick Edit

In this tutorial I will show you how to add any custom fields to WordPress quick edit. As an example we are going to add a simple text field and a checkbox.

WordPress quick edit custom fields

1. Create a Column for Every Custom Field

At this moment you might say that you didn’t have any plans to overload your admin pages with custom columns.

Please do not worry about it, because anyway it is always possible to hide specific columns in “Screen Options”. If the columns are hidden, it doesn’t affect quick edit functionality anyway.

show or hide admin columns in screen options
You may notice, that I’ve added “Price” and “Featured product” column for Posts, which is not quite logical, but it is just an example. You can also play with CSS to make columns wider or thiner.
// add 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 order, 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, $post_id ) {

	// if you have to populate more that one columns, use switch()
	switch( $column_name ) {
		case 'price': {
			$price = get_post_meta( $post_id, 'product_price', true );
			echo $price ? '$'.$price : '';
			break;
		}
		case 'featured': {
			echo get_post_meta( $post_id, 'product_featured', true );
			break;
		}
	}

}

2. Adding Fields to Quick Edit

The first thing you should know is that action hook quick_edit_custom_box is fired for every column, so that makes it a little tricky to display the HTML of the whole field group.

I mean I think it would be a really great idea to wrap all the fields into a single <fieldset> element. The only idea I have here is to add an opening <fieldset> tag when displaying the first field in a group and a closing </fieldset> tag when displaying the last one.

<?php
// quick_edit_custom_box allows to add HTML in Quick Edit
add_action( 'quick_edit_custom_box',  'misha_quick_edit_fields', 10, 2 );

function misha_quick_edit_fields( $column_name, $post_type ) {

	switch( $column_name ) {
		case 'price': {
			?>
				<fieldset class="inline-edit-col-left">
					<div class="inline-edit-col">
						<label>
							<span class="title">Price</span>
							<input type="text" name="price">
						</label>
					</div>
				<?php
			break;
		}
		case 'featured': {
			?>
					<div class="inline-edit-col">
						<label>
							<input type="checkbox" name="featured"> Featured product
						</label>
					</div>
				</fieldset>
			<?php
			break;
		}
	}
}

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 next steps of this tutorial.

3. Save Quick Edit Fields

Just using WordPress save_post hook here and believe me it is the only one we can use.

// save fields after quick edit
add_action( 'save_post', 'misha_quick_edit_save' );

function misha_quick_edit_save( $post_id ){

	// check inlint edit nonce
	if ( ! wp_verify_nonce( $_POST[ '_inline_edit' ], 'inlineeditnonce' ) ) {
		return;
	}

	// update the price
	$price = ! empty( $_POST[ 'price' ] ) ? absint( $_POST[ 'price' ] ) : 0;
 	update_post_meta( $post_id, 'product_price', $price );

	// update checkbox
	$featured = ( isset( $_POST[ 'featured' ] ) && 'on' == $_POST[ 'featured' ] ) ? 'yes' : 'no';
	update_post_meta( $post_id, 'product_featured', $featured );

}

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

4. Populate the Fields using Columns Data

You can create any custom JavaScript file in your theme and add the code below there. Or you can also use admin_footer hook.

jQuery( function( $ ){

	const 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
		if ( typeof( post_id ) == 'object' ) { // if it is object, get the ID number
			post_id = parseInt( this.getId( post_id ) );
		}

		// add rows to variables
		const edit_row = $( '#edit-' + post_id )
		const post_row = $( '#post-' + post_id )

		const productPrice = $( '.column-price', post_row ).text().substring(1) //  remove $ sign
		const featuredProduct = 'yes' == $( '.column-featured', post_row ).text() ? true : false;

		// populate the inputs with column data
		$( ':input[name="price"]', edit_row ).val( productPrice );
		$( ':input[name="featured"]', edit_row ).prop( 'checked', featuredProduct );
		
	}
});

# WordPress, Metadata

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 Twitter