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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
add_filter( 'manage_post_posts_columns', 'add_columns' ); /** * Add columns to management page * * @param array $columns * * @return array */ function add_columns( $columns ) { $columns['headline_news'] = 'Headline news'; return $columns; } |
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.
Step 2: Receive meta-data from database and set it to new column.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
add_action( 'manage_posts_custom_column', 'columns_content', 10, 2 ); /** * Set content for columns in management page * * @param string $column_name * @param int $post_id * * @return void */ function columns_content( $column_name, $post_id ) { if ( 'headline_news' != $column_name ) { return; } $headline_news = get_post_meta( $post_id, 'headline_news', true ); echo empty( $headline_news ) ? 'No': 'Yes'; } |
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.
Step 3: Add Headline news checkbox to quick edit screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
add_action( 'quick_edit_custom_box', 'quick_edit_add', 10, 2 ); /** * Add Headline news checkbox to quick edit screen * * @param string $column_name Custom column name, used to check * @param string $post_type * * @return void */ function quick_edit_add( $column_name, $post_type ) { if ( 'headline_news' != $column_name ) { return; } printf( ' <input type="checkbox" name="headline_news" class="headline_news"> %s', 'Headline news position' ); } |
After this step, you can see your checkbox in quick edit screen like this:
Step 4: Save custom field to database.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
add_action( 'save_post', 'save_quick_edit_data' ); /** * Save quick edit data * * @param int $post_id * * @return void|int */ function save_quick_edit_data( $post_id ) { if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) { return $post_id; } if ( ! current_user_can( 'edit_post', $post_id ) || 'post' != $_POST['post_type'] ) { return $post_id; } $data = empty( $_POST['headline_news'] ) ? 0 : 1; update_post_meta( $post_id, 'headline_news', $data ); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
add_action( 'admin_footer', 'quick_edit_javascript' ); /** * Write javascript function to set checked to headline news checkbox * * @return void */ function quick_edit_javascript() { global $current_screen; if ( 'post' != $current_screen->post_type ) { return; } ?> <script type="text/javascript"> function checked_headline_news( fieldValue ) { inlineEditPost.revert(); jQuery( '.headline_news' ).attr( 'checked', 0 == fieldValue ? false : true ); } </script> <?php } |
Step 6: Receive meta-data value of custom field and pass it to javascript function when user clicks expand quick edit link.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
add_filter( 'post_row_actions', 'expand_quick_edit_link', 10, 2 ); /** * Pass headline news value to checked_headline_news javascript function * * @param array $actions * @param array $post * * @return array */ function expand_quick_edit_link( $actions, $post ) { global $current_screen; if ( 'post' != $current_screen->post_type ) { return $actions; } $data = get_post_meta( $post->ID, 'headline_news', true ); $data = empty( $data ) ? 0 : 1; $actions['inline hide-if-no-js'] = '<a href="#" class="editinline" title="'; $actions['inline hide-if-no-js'] .= esc_attr( 'Edit this item inline' ) . '"'; $actions['inline hide-if-no-js'] .= " onclick=\"checked_headline_news('{$data}')\" >"; $actions['inline hide-if-no-js'] .= 'Quick Edit'; $actions['inline hide-if-no-js'] .= '</a>'; return $actions; } |
That’s all what we need to add custom field to quick edit screen in WordPress, thanks for your reading!
Ok, so – I am new to wordpress coding. Where does all this code go? functions.php?
Yes
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
Hi JB, thanks for your contributions.
In Step 1, I have used
manage_edit-{your-custom-post-type-name}_columnsin 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)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.
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
Thanks for the clarifications, which are very helpful additional information.
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.
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
dear my friend
thanks for tutorial. but i have a big question. where this code must be paste? function.php?
functions.php or any file on your them (the file must be included in functions.php)
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!
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 );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
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']If I’m using a select list, do I need Step 5? If not, how does that impact Step 6?
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 );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!
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_newsin this topic to it, don’t forget to use text input instead of checkbox.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
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
switchswitch ( $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!
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?
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 );
..
Great tutorial, it helped a lot. Many thanks! There are jaust a few tutorials on this online, and this one is the most straightforward.