How to Add Custom Fields to Quick Edit in WordPress

In this tutorial, we’ll learn how to add custom fields to WordPress Quick Edit. We’ll be adding a text field and a checkbox as examples we’ll use subtitle and highlight.

Introduction

WordPress’s Quick Edit feature allows for rapid editing of post details directly from the post list screen. By adding custom fields you can manage your site content more efficiently.

Why Add Custom Fields to Quick Edit?

Adding custom fields to Quick Edit is beneficial for:

Updating custom metadata without navigating to the full post edit screen.
Streamlining content management processes.
Enhancing the ability to bulk edit posts efficiently.

Prerequisites

Before diving into the code ensure you have the following:

Basic understanding of WordPress development.
Access to your theme’s functions.php file or a custom plugin.
Familiarity with PHP and WordPress hooks.

Step-by-Step Guide

Step 1: Create Columns for Custom Fields

First we need to define columns for our custom fields. Let’s add columns for Subtitle and Highlight.

// Add new columns
add_filter('manage_post_posts_columns', 'wpexpertguide_custom_columns');
function wpexpertguide_custom_columns($columns) {
    $columns['subtitle'] = 'Subtitle';
    $columns['highlight'] = 'Highlight';
    return $columns;
}

// Populate the columns with data
add_action('manage_posts_custom_column', 'wpexpertguide_populate_custom_columns', 10, 2);
function wpexpertguide_populate_custom_columns($column, $post_id) {
    switch($column) {
        case 'subtitle':
            $subtitle = get_post_meta($post_id, 'post_subtitle', true);
            echo $subtitle ? esc_html($subtitle) : '';
            break;
        case 'highlight':
            $highlight = get_post_meta($post_id, 'post_highlight', true);
            echo $highlight == 'yes' ? 'Yes' : 'No';
            break;
    }
}

Step 2: Add Fields to Quick Edit

Next we will add our custom fields to the Quick Edit interface.

// Add fields to Quick Edit
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 'subtitle':
            ?>
            <fieldset class="inline-edit-col-left">
                <div class="inline-edit-col">
                    <label>
                        <span class="title">Subtitle</span>
                        <input type="text" name="post_subtitle" value="">
                    </label>
                </div>
            <?php
            break;
        case 'highlight':
            ?>
                <div class="inline-edit-col">
                    <label>
                        <input type="checkbox" name="post_highlight"> Highlight
                    </label>
                </div>
            </fieldset>
            <?php
            break;
    }
}

Step 3: Save Quick Edit Fields

We’ll use the save_post hook to save the custom field data when Quick Edit is used.

// Save fields after Quick Edit
add_action('save_post', 'wpexpertguide_save_quick_edit_data');
function wpexpertguide_save_quick_edit_data($post_id) {
    // Check nonce for security
    if (!wp_verify_nonce($_POST['_inline_edit'], 'inlineeditnonce')) {
        return;
    }

    // Update the subtitle
    $subtitle = isset($_POST['post_subtitle']) ? sanitize_text_field($_POST['post_subtitle']) : '';
    update_post_meta($post_id, 'post_subtitle', $subtitle);

    // Update the checkbox
    $highlight = isset($_POST['post_highlight']) && $_POST['post_highlight'] == 'on' ? 'yes' : 'no';
    update_post_meta($post_id, 'post_highlight', $highlight);
}

Step 4: Populate Fields with Column Data

We’ll use JavaScript to populate the Quick Edit fields with the current post metadata. You can enqueue the JS file or else you can use a admin footer hook.

Enqueueing the Script

Ensure the script for populating the custom fields.

// Enqueue the script for Quick Edit
function wpexpertguide_enqueue_custom_featured_image_script($hook) 
{
    if ($hook !== 'edit.php') 
    {
        return;
    }
  	if ( ! did_action( 'wp_enqueue_media' ) ) 
  	{
  		wp_enqueue_media(); // Enqueue WordPress media scripts
  	}
    wp_enqueue_script('quick-edit-featured-image', get_stylesheet_directory_uri() . '/js/quick-edit.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'wpexpertguide_enqueue_custom_featured_image_script');

JavaScript Code (quick-edit.js)

jQuery(function($) {
    const originalInlineEditPost = inlineEditPost.edit;
    inlineEditPost.edit = function(id) {
        originalInlineEditPost.apply(this, arguments);
        
        const post_id = typeof(id) === 'object' ? this.getId(id) : id;
        const editRow = $('#edit-' + post_id);
        const postRow = $('#post-' + post_id);
        
        const subtitle = $('.column-subtitle', postRow).text();
        const highlight = $('.column-highlight', postRow).text() === 'Yes';
        
        $('input[name="post_subtitle"]', editRow).val(subtitle);
        $('input[name="post_highlight"]', editRow).prop('checked', highlight);
    }
});

Testing and Troubleshooting

Testing

Navigate to the Post List: Go to the post list screen in the WordPress admin area.
Quick Edit a Post: Click on the “Quick Edit” link for a post.
Verify Fields: Check that the custom fields (subtitle and highlight) are displayed and prefilled with the current metadata.
Update Fields: Modify the custom fields and save the changes.
Check Updates: Ensure the updates are reflected correctly in the post metadata.

Troubleshooting

Fields Not Displaying: Ensure your action hooks and function names are correctly defined.
Data Not Saving: Check that the field names in the form match those in the save_post function.
JavaScript Errors: Check the browser console for any JavaScript errors that might prevent the field from rendering.

Conclusion

Adding custom fields to the Quick Edit screen in WordPress can greatly improve your content management efficiency. With the steps outlined above, you can extend the functionality of Quick Edit to include any custom fields relevant to your site. Remember to test your implementation thoroughly and ensure it integrates seamlessly with your existing workflows.

By mastering this technique you can customize WordPress to better suit your needs ultimately saving time and enhancing productivity. Happy coding!