Alright, I have to confess. This took me some time to wrap my head around. It also seemed like a lot of people were having the same problem. The question is “How do I add custom post meta fields to the quick edit function in WordPress?”
For some reason, I had a hard time finding the answers I needed in Google. I must not have been asking the right question or something. So here is what I learned.
I Needed the Right WordPress API Reference
Here it is, just in case you couldn’t locate it.
http://codex.wordpress.org/Plugin_API/Action_Reference/quick_edit_custom_box
If it hadn’t been for that bit, nothing would have ever clicked for me.
The following code snippets must be edited and placed inside your template’s functions.php file. You will need a moderate understanding of extending WordPress and PHP as well.
Step #1 – Place the Custom Meta Field in a Column
This is not optional if you want to have the post meta value fed into the quick edit form field. I’ll explain why in a bit. But for now, just do it. The columns I am referencing are in the “All Posts” style table list view, by the way.
// Change the columns for the screen function change_posttype_columns( $cols ) { $cols = array( 'cb' => '<input type="checkbox" />', // ADD ALL THE COLUMNS YOU WANT TO SHOW "title" => "Post Title", // ADD A COLUMN FOR YOUR CUSTOM POST META "custom_post_meta_column" => "Custom Post Meta Column Name", ); return $cols; } add_filter( "manage_posttype_posts_columns", "change_posttype_columns" ); function posttype_columns( $column, $post_id ) { switch ( $column ) { case "custom_post_meta_column": $custom = get_post_custom(); $meta_value = $custom["meta_key_name"][0]; // A Simple Hidden Checkbox Example if ($meta_value) { $checked = 'checked'; echo "<input style="visibility: hidden; display: none;" type="checkbox" checked="checked" readonly="readonly" />"; // You may also want to echo something else here, like echo 'True'; } else { echo 'False'; } break; } } add_action( "manage_posts_custom_column", "posttype_columns", 10, 2 );
You will need to customize the above code for your own post type, or custom post type (replace “posttype” with your own post type). You also need to use your own custom post meta key (meta_key_name).
Don’t go any further until you’ve got this working.
Step 2 – Adding the Custom Post Meta Field to the Quick Edit
Now that you are querying the post meta you want to edit, let’s add it to the quick edit screen.
// ADD QUICK EDIT OPTION // Add to our admin_init function add_action('quick_edit_custom_box', 'posttype_add_quick_edit', 10, 2); function posttype_add_quick_edit($column_name, $post_type) { if (!isset($_GET['post_type']) || (isset($_GET['post_type']) && $_GET['post_type'] != $post_type) || 'custom_post_meta_column' != $column_name) return; static $printNonce = TRUE; if ( $printNonce ) { $printNonce = FALSE; wp_nonce_field( plugin_basename( __FILE__ ), 'posttype_edit_nonce' ); } ?> <fieldset class="inline-edit-col-right inline-edit-custom"> <div class="inline-edit-col inline-edit-<?php echo $column_name ?>"> <?php switch ( $column_name ) { case 'custom_post_meta_column': ?> <legend>My Custom Post Meta</legend><input name="meta_key_name" class="meta_key_name" type="checkbox" /> <?php break; } ?> </div> </fieldset> <?php }
Terrific! You should have a new form field checkbox in your quick edit box. Don’t go any further until it’s there. It should be empty (unchecked in this case). Later we will fill it with the value that is already set in step 1.
Step 3 – Add the Script to Save Your Post Meta from the Quick Edit Screen
This will save the new field when you actually change it’s value from the quick edit screen.
// Add to our admin_init function add_action('save_post', 'posttype_save_quick_edit_data'); function posttype_save_quick_edit_data($post_id) { // verify if this is an auto save routine. If it is our form has not been submitted, // so we dont want to do anything if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return $post_id; // Check permissions - Set to Post/Page, or custom permissions if ( 'page' == $_POST['post_type'] ) { if ( !current_user_can( 'edit_page', $post_id ) ) return $post_id; } else { if ( !current_user_can( 'edit_post', $post_id ) ) return $post_id; } $slug = 'posttype'; if ( $slug !== $_POST['post_type'] ) { return; } if ( !current_user_can( 'edit_post', $post_id ) ) { return; } $_POST += array("{$slug}_edit_nonce" => ''); if ( !wp_verify_nonce( $_POST["{$slug}_edit_nonce"], plugin_basename( __FILE__ ) ) ) { return; } // checkboxes are submitted if checked, absent if not if ( isset( $_REQUEST['meta_key_name'] ) ) { update_post_meta($post_id, 'meta_key_name', TRUE); } else { update_post_meta($post_id, 'meta_key_name', FALSE); } }
Once you have edited the above code to fit your post type and meta key, you should be seeing data saved in the database. However, it still isn’t being reflected in your quick edit box. This problem could cause you a huge headache. So let’s fix it with some jQuery sized pain reliever.
Step 4 – Use jQuery to Fill the Quick Edit Custom Post Meta Value
This is where the magic happens. We are going to use jQuery to grab the value we placed in the column earlier. Then we will apply it to the quick edit box.
add_action('admin_footer-edit.php', 'admin_edit_posttype_foot', 11); /* load scripts in the footer */ function admin_edit_posttype_foot() { $slug = 'posttype'; // load only when editing a posttype if ( (isset($_GET['page']) && $_GET['page'] == $slug) || (isset($_GET['post_type']) && $_GET['post_type'] == $slug)) { echo ' <script type="text/javascript" src="', plugins_url('scripts/admin_edit.js', __FILE__), '"></script> <script type="text/javascript"> function quickEditPosttype() { var $ = jQuery; var _edit = inlineEditPost.edit; inlineEditPost.edit = function(id) { var args = [].slice.call(arguments); _edit.apply(this, args); if (typeof(id) == \'object\') { id = this.getId(id); } //if (this.type == \'posttype\') { var // editRow is the quick-edit row, containing the inputs that need to be updated editRow = $(\'#edit-\' + id), // postRow is the row shown when a post isn\'t being edited, which also holds the existing values. postRow = $(\'#post-\'+id), // get the existing values // the class ".column-custom_post_meta_column" is set in display_custom_quickedit_posttype meta_key_name = !! $(".column-custom_post_meta_column>*", postRow).attr("checked"); // set the values in the quick-editor $(\':input[name="meta_key_name"]\', editRow).attr(\'checked\', meta_key_name); //} }; } // Another way of ensuring inlineEditPost.edit isn\'t patched until it\'s defined if (inlineEditPost) { quickEditRepo(); } else { jQuery(quickEditRepo); } </script> '; } } function repo_quick_edit_javascript() { global $current_screen; if (($current_screen->id != 'edit-post') || ($current_screen->post_type != 'post')) return; ?> <?php }
Finishing Touches
Go back through the code and customize it to fit your needs. Place as many custom fields as needed in a single column and hide them using CSS. You can customize the columns using PHP to return or echo back values, and so on.
I found this to be one of the more challenging things for a front end guy like myself to wrap his head around and get to work. Hopefully, you understood that my point is to help you understand the process behind it.
9 replies on “Understanding the WordPress Quick Edit Custom Box”
This is cool! My question is, how can we implement this with custom database table. I use WP List Table with a custom table, not custom post type. So meta fields can not be used 🙁
Tim, this post was incredibly helpful when I needed to make my quick edit boxes happen. After I got my admin columns doing everything I needed to in my actual code, I decided to collect what I learned (including your info, and with attribution of course) into a comprehensive guide to custom admin columns.
http://ieg.wnet.org/blog/a-guide-to-custom-wordpress-admin-columns/
Thank you so much!
My suggestion would be to change the line
if ($column_name != ‘custom_post_meta_column’) return;
to
if (‘posttype’ != $post_type || ‘custom_post_meta_column’ != $column_name)) return;
Otherwise another post with the same column name would get a possibly unintended quick edit field.
An excellent suggestion, Nigel! I’ll add that to the post.
This is one of those things about WP which isn’t really that easy to edit. It could do with a much cleaner interface…
Can you throw some light, If I want to add “description field” under the quick edit section of “all posts” page of wordpress admin. So that I can change or add desc. for each post separately.
Thanks.
@Vikas, I assume this would just be a new post_meta field. You should add a new post meta box first, before going through the instruction on this page. http://codex.wordpress.org/Function_Reference/add_meta_box
Exactly what i was looking for, Thanks Tim.
Finally someone wrote about the quick-edit-crap 🙂 Thanks.