Understanding the WordPress Quick Edit Custom Box

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.