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 );
..