How to Add Custom Fields to WordPress Quick Edit

The Quick Edit feature in WordPress is a real time-saver. It lets you edit multiple posts quickly without having to open each one. However, by default, it only supports a limited number of fields like title, slug, and date. But, what if you want to include your custom fields here, too?

We got this idea from a suggestion from our users. And we can see that adding a custom field to quick edit is a useful feature for you. In this blog post, we’ll figure out how to archive it using PHP code.

This approach allows you to update field values directly. As a result, you can save time and reduce clicks, especially when you’re managing a high volume of posts and custom data.

Let’s go now!

Scenario

For this example, I have created a field group for the restaurant post type, including two custom fields: location and price.

I also input data for it in the post editor.

By default, they are not shown in the quick edit.

For demonstration purposes, I’ll add the price meta box to this screen. Just replace the IDs of the field and field group in your real case.

The entire code used

Then, go to your theme file, and navigate to the function.php file to add these lines of code:

add_filter( 'manage_restaurant_posts_columns', function( $columns ) {
    $columns['price'] = __( 'Price', 'textdomain' );
    return $columns;
});

add_action( 'manage_restaurant_posts_custom_column', function( $column, $post_id ) {
    if ( $column === 'price' ) {
        $price = get_post_meta( $post_id, 'price', true );
        echo esc_html( $price );
    }
}, 10, 2 );

add_action( 'quick_edit_custom_box', function( $column, $post_type ) {
    if ( $post_type !== 'restaurant' || $column !== 'price' ) return;
    ?>
    <fieldset class="inline-edit-col-right">
        <div class="inline-edit-col">
            <label>
                <span class="title"><?php _e( 'Price', 'textdomain' ); ?></span>
                <span class="input-text-wrap">
                    <input type="text" name="price" value="">
                </span>
            </label>
        </div>
    </fieldset>
    <?php
}, 10, 2 );

add_action( 'save_post_restaurant', function( $post_id ) {
    if ( isset( $_POST['price'] ) ) {
        update_post_meta( $post_id, 'price', sanitize_text_field( $_POST['price'] ) );
    }
});

add_action( 'admin_footer-edit.php', function() {
    global $typenow;
    if ( $typenow !== 'restaurant' ) return;
    ?>
    <script>
    jQuery(function($){
        if (typeof inlineEditPost === 'undefined') return;

        var $wp_inline_edit = inlineEditPost.edit;
        inlineEditPost.edit = function( id ) {
            $wp_inline_edit.apply( this, arguments );
            var postId = 0;
            if ( typeof(id) == 'object' ) {
                postId = parseInt(this.getId(id));
            }
            if ( postId > 0 ) {
                var $editRow = $('#edit-' + postId);
                var price = $('#post-' + postId).find('td.column-price').text();
                $editRow.find('input[name="price"]').val(price.trim());
            }
        };
    });
    </script>
    <?php
});

Let’s break down the code to see what it does.

Break Down the code

Add a New Column

add_filter( 'manage_restaurant_posts_columns', function( $columns ) {
    $columns['price'] = __( 'Price', 'textdomain' );
    return $columns;
});

This is to add or modify columns in the post list table for the restaurant post type. The new column has the key price and the label “Price.” It is similar to the MB Admin Columns extension.

Display the Column Value

To display the value of the price field, we have the next part of the code:

add_action( 'manage_restaurant_posts_custom_column', function( $column, $post_id ) {
    if ( $column === 'price' ) {
         $price = get_post_meta( $post_id, 'price', true );
         echo esc_html( $price );
    }
}, 10, 2 );

In there, if the current column is price, we’ll retrieve its meta value of the post via the post ID, then display that value. As a result, the Price column will show the corresponding price of each restaurant, which you input in the post editor.

Add the Field to Quick Edit

Next, I use the quick_edit_custom_box function to have a custom box, I mean the custom field in the Quick edit. That function only runs for the restaurant post type and price column. So, when the user clicks on the Quick Edit button, an input box labeled “Price” appears.

Save the Updated Value

add_action( 'save_post_restaurant', function( $post_id ) {
    if ( isset( $_POST['price'] ) ) {
         update_post_meta( $post_id, 'price', sanitize_text_field( $_POST['price'] ) );
    }
});

This part is to save the price value. If the user submits a price value in Quick Edit, the entered value will be stored correctly in post meta after clicking the Update button.

Pre-Fill the Current Value

Obviously, and lastly, pre-filling the current price value when opening Quick Edit. In other words, when you open Quick Edit, the price field is automatically filled with the post’s current price instead of being empty.

add_action( 'admin_footer-edit.php', function() {
    global $typenow;
    if ( $typenow !== 'restaurant' ) return;
    ?>
    <script>
    jQuery(function($){
        if (typeof inlineEditPost === 'undefined') return;

        var $wp_inline_edit = inlineEditPost.edit;
        inlineEditPost.edit = function( id ) {
            $wp_inline_edit.apply( this, arguments );
            var postId = 0;
            if ( typeof(id) == 'object' ) {
                postId = parseInt(this.getId(id));
            }
            if ( postId > 0 ) {
                var $editRow = $('#edit-' + postId);
                var price = $('#post-' + postId).find('td.column-price').text();
                $editRow.find('input[name="price"]').val(price.trim());
            }
        };
    });
    </script>
    <?php
});

Explanation:

• admin_footer-edit.php: is a hook that injects custom JavaScript into the bottom of the admin post list page.
• $typenow !== 'restaurant': is to run the JavaScript on the restaurant post type only.
• $wp_inline_edit = inlineEditPost.edit: is to stores the inlineEditPost.edit function of the original Quick Edit.
• price = $('#post-' + postId).find('td.column-price').text(): is to get the current price from the “Price” column and override the existing price value.

That’s done.

Now, let’s check how it works.

When you click on the Quick Edit, you can see a new meta box along with the value you entered:

If you change that value in the Quick Edit, it will be updated in the post editor.

Last Words

With just a few hooks and a bit of JavaScript, you can let editors manage key data right from the post list without opening each post individually.

If you’d like to go further, try combining this technique with other Meta Box tools such as MB Admin Columns, MB Custom Table, or MB Views, so you can build faster, more user-friendly WordPress admin interfaces. We always care about user experience, so if you have any questions or suggestions, don’t hesitate to leave a comment!