Posted in WordPress

Add custom field to quick edit screen in WordPress

Add custom field to quick edit screen in WordPress Posted on January 2, 201621 Comments

When you create custom fields in WordPress, it’s easy to put them in meta box and you can update their data via HTML inputs. But in some cases, you want to edit them in quick edit screen, how can you do that?. In this article, I will show you how to add your custom fields to quick edit screen.

In my example, the name of custom field is headline_news, it can verify to show a post in Headline area and we use checkbox input for it. Now, let’s do it.

Step 1: Add custom field to post edit screen in management page.

Notice: You have to do this step if you want to use your custom field in quick edit screen.

If your custom field is in a custom post type, change the name of the filter to manage_edit-{your-custom-post-type-name}_columns. After you’ve done this step, your screen will look like these images below.

Screenshot_1

Screenshot_2

Step 2: Receive meta-data from database and set it to new column.

Don’t forget to use manage_{your-custom-post-type-name}_posts_custom_column instead of manage_posts_custom_column if you use custom post type.

Screenshot_3

Step 3: Add Headline news checkbox to quick edit screen.

After this step, you can see your checkbox in quick edit screen like this:

Screenshot_4

Step 4: Save custom field to database.

Step 5: By default, your checkbox can’t get its value, that’s why we have to write a javascript function to set value for it.

In this example, I wrote a function named checked_headline_news, the function gets value and set it to checkbox.

Step 6: Receive meta-data value of custom field and pass it to javascript function when user clicks expand quick edit link.

That’s all what we need to add custom field to quick edit screen in WordPress, thanks for your reading!

21 thoughts on “Add custom field to quick edit screen in WordPress

  1. This was great and exactly what I needed so thanks. A few comments.

    1. I noticed a typo. In Step 1 you wrote:

    manage_edit-{your-custom-post-type-name}_columns

    which should actually be:
    manage_{your-custom-post-type-name}_posts_columns

    2. In the comments someone asked about using a text input field instead of a checkbox and what you wrote as a solution did not work for me. No matter what I tried, I could not get the field to update by calling it from its field name. What did work for me was the following:

    jQuery(‘input[name=”headline_news”]’).val(fieldValue);

    3. Finally, it might be useful to mention how to handled serialized post_meta data since it will involve slightly different code in Step 4. A useful SE post I found to help with this is:
    https://wordpress.stackexchange.com/questions/311058/how-to-update-serialized-post-meta

    1. Hi JB, thanks for your contributions.

      In Step 1, I have used manage_edit-{your-custom-post-type-name}_columns in several projects and they are working well. So I think 2 ways are same.
      Step 2, it depends on what your selector is, class="xyz" => jQuery('.xyz').val(fieldValue), id="xyz" => jQuery('#xyz').val(fieldValue), name="xyz" => jQuery('input[name="xyz"]').val(fieldValue)

  2. This is a great tutorial. Thank you.
    After changing the check box with Quick Edit, when you open Quick Edit again, the check box is not changed. I’d like to update the checkbox value after saving with jQuery, but it doesn’t work.
    Please tell me how.

    1. The box is reloaded after updated so on this case, you should use AJAX to get the new value when user clicks Quick Edit link

  3. Thank you for this. This must represent hours and hours of trial and error.

    It works as advertised. I used a text input field instead of a checkbox.

    The only bug I’ve found was that if you updated a custom field in Quick Edit, saved it (as confirmed on the post page), and then go back to Quick Edit it again without reloading the page, the original JS function still passes the old original value, rather than the updated value.

    Any amendments you want to make to your code, to update this? I couldn’t see a trivial way to do it.

    1. The box is reloaded after updated so on this case, you should use AJAX to get the new value when user clicks Quick Edit link

  4. Hi, I’m trying to use this for quick editing the post excerpts. Could you please elaborate on doing this with text fields rather than checkboxes? Thanks for the tutorial!

    1. Hi, everything stays the same, you only have to change Step 4:
      $data = empty( $_POST['headline_news'] ) ? '' : sanitize_text_field( $_POST['headline_news'] );
      and Step 5:
      jQuery( '.headline_news' ).val( fieldValue );

  5. Hi,

    thanks for this tut. Everything works perfect for me until „Step 4: Save custom field to database“. I can’t get it to work that WordPress saves the entered value. It seems like the save-function doesn’t get triggered at all …
    I’m running WordPress 5, maybe that changed something?

    Help would be appreciated, thanks,

    Patrick

    1. Hi, maybe you use Custom Post Type, you should use your CPT name instead of post, change it on this line
      'post' != $_POST['post_type']

    1. You still have to work on step 5 because it couldn’t get the value by defaut, use this line instead:
      jQuery( '.your-select-list-css-class-name' ).val( fieldValue );

  6. Hi! I’m using Ristorante theme. This theme has a built-in food menu, I wanted to display the “Description” field in the quick edit so the food menus can be easily updated. How do I get the data from that and make it editable. Thank you in advance!

    1. Sorry I have never used that theme but you can do it if you can find the name of the field on Theme’s source code and then replace headline_news in this topic to it, don’t forget to use text input instead of checkbox.

  7. Hi there, I want to add multiple custom field text boxes to products in woocommerce. I am new to coding.

    Basically have made a lovely website with 1000+ personalisable products.

    I need 5 custom fields added to each one and have most info on csv files.

    Is there a quick way to do this?

    Thanks from Ireland

    1. You can add infinite fields on each steps, for example in step 1:

      $columns['headline_news'] = 'Headline news';
      $columns['your_custom_field_1'] = 'Your field name 1';
      $columns['your_custom_field_2'] = 'Your field name 2';
      ..

      on step 2, use switch

      switch ( $column_name ) {
      case 'headline_news':
      $headline_news = get_post_meta( $post_id, 'headline_news', true );
      echo empty( $headline_news ) ? 'No': 'Yes';
      break;
      case 'your_custom_field_1':
      $your_custom_field_1 = get_post_meta( $post_id, 'your_custom_field_1', true );
      echo empty( $your_custom_field_1 ) ? '': $your_custom_field_1;
      break;
      ...
      }

      Hope this advice can help your situation!

  8. Wow, I’ve used WordPress for a long time but never learned how to do this. This is amazing.

    If i want to add another custom field, do I need to duplicate all these functions?

    1. No, you don’t have to duplicate functions, only add new lines for your new field, for example:
      Step 1: $columns[‘another_field’] = ‘Another field’;
      Step 2: $another_field = get_post_meta( $post_id, ‘another_field’, true );
      ..

  9. Great tutorial, it helped a lot. Many thanks! There are jaust a few tutorials on this online, and this one is the most straightforward.

Leave a Reply

Your email address will not be published. Required fields are marked *