How to add custom fields in Quick Edit WordPress
One of the most useful features for content management is the “Quick Edit” functionality, which allows you to make changes to posts and pages directly from the list view without having to open each item individually. By default, Quick Edit provides options to modify attributes such as title, slug, date, and categories. However, you may find that you need to add custom fields to this functionality to streamline your workflow further. In this blog post, we’ll explore how to add custom fields to the Quick Edit interface in WordPress. As an example we are going to add a simple text field and a checkbox.
1. Create Column for every custom fields
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.
// manage_{POST TYPE NAME}_posts_columns
add_filter( 'manage_post_posts_columns', 'wpexpertguide_price_and_featured_columns' );
function wpexpertguide_price_and_featured_columns( $column_array ) {
$column_array[ 'price' ] = 'Price';
$column_array[ 'featured' ] = 'Featured product';
return $column_array;
}
add_action( 'manage_posts_custom_column', 'wpexpertguide_populate_the_columns', 10, 2 );
function wpexpertguide_populate_the_columns( $column_name, $post_id ) {
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;
}
}
}You can add the code from this tutorial to your active theme functions.php file or create a plugin for that or you can also use a snippet plugin to add that.
2. Adding Fields to Quick Edit
You should know 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 think it would be better to wrap all the fields into a single <fieldset> element.
add_action( 'quick_edit_custom_box', 'wpexpertguide_quick_edit_fields', 10, 2 );
function wpexpertguide_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;
}
}
}After 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.
3. Save Quick Edit Fields
In this we are going to use hook.
add_action( 'save_post', 'wpexpertguide_quick_edit_save' );
function wpexpertguide_quick_edit_save( $post_id ){
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 );
}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 );
}
});Conclusion
Adding custom fields to the Quick Edit interface in WordPress can greatly enhance your content management efficiency. Whether you choose to use a plugin or add custom code, the process is straightforward and can be tailored to your specific needs. By following the methods outlined in this post, you can ensure that your custom fields are easily accessible and manageable, improving your overall workflow.