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!
Great tutorial, it helped a lot. Many thanks! There are jaust a few tutorials on this online, and this one is the most straightforward.
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 );
..
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!
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.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,
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']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 );