Add to custom post type quick edit on WordPress.

If you had the need to add options to the WordPress quick edit menu, here is the solution. In this example my custom post type will be “mytype”.
This post will assume you have a custom field already created for your post type, my customfield name will be “myfield”.

The steps are as follows:

1. Add an extra column ( wont work if you dont have the custom column present )
2. Fill the custom column with data
3. Add the form to the quick edit box
4. Add the save function
5. Add the Javascript to populate the form with current fields

So lets go:

We use add_filter to add a column to the post-edit screen. For normal post type you would use manage_post_posts_columns, but with custom post types you would rather use manage_edit-{custom-type}_columns.

// Add to our admin_init function
add_filter('manage_mytype_posts_columns', 'myown_add_post_columns');

function myown_add_post_columns($columns) {
    $columns['my_field'] = 'My Field';
    return $columns;
}

Next we will populate our new column with data using the manage_posts_custom_column hook. But with custom post type you will use manage_{custom-type}_posts_custom_column.
I do a normal get_post_meta to get the field value

// Add to our admin_init function
add_action('manage_posts_custom_column', 'myown_render_post_columns', 10, 2);

function myown_render_post_columns($column_name, $id) {
    switch ($column_name) {
    case 'my_field':
        // show my_field
        $my_fieldvalue = get_post_meta( $id, 'myfield', TRUE);
        echo $my_fieldvalue;
    }
}

Next We add the html form elements to the quick edit box using the quick_edit_custom_box hook.
You cannot get the post object here so you will add a empty text field. Just make sure the name of the field corresponds with your custom field name.

// Add to our admin_init function
add_action('quick_edit_custom_box',  'myown_add_quick_edit', 10, 2);

function myown_add_quick_edit($column_name, $post_type) {
    if ($column_name != 'my_field') return;
    ?>
    <fieldset class="inline-edit-col-left">
        <div class="inline-edit-col">
            <span class="title">Widget Set</span>
            <input id="myfield_noncename" type="hidden" name="myfield_noncename" value="" />
            <input id="myfield" type="text" name="myfield" value=""/>
        </div>
    </fieldset>
     <?php
}

Next we add the save function, we check the permissions of current user before we apply changes to the field data.

// Add to our admin_init function 
add_action('save_post', 'myown_save_quick_edit_data');   

function myown_save_quick_edit_data($post_id) {     
  // verify if this is an auto save routine.         
  if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )          
      return $post_id;         
  // Check permissions     
  if ( 'mytype' == $_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;     
  }        
  // Authentication passed now we save the data       
  if (isset($_POST['myfield']) && ($post->post_type != 'revision')) {
        $my_fieldvalue = esc_attr($_POST['myfield']);
        if ($my_fieldvalue)
            update_post_meta( $post_id, 'myfield', $my_fieldvalue);
        else
            delete_post_meta( $post_id, 'myfield');
    }
    return $my_fieldvalue;
}

Next we add the jquery function that will insert our current field value into the field.

// Add to our admin_init function
add_action('admin_footer', 'myown_quick_edit_javascript');

function myown_quick_edit_javascript() {
    global $current_screen;
    if (($current_screen->post_type != 'mytype')) return;

    ?>
<script type="text/javascript">
function set_myfield_value(fieldValue, nonce) {
        // refresh the quick menu properly
        inlineEditPost.revert();
        console.log(fieldValue);
        jQuery('#myfield').val(fieldValue);
}
</script>
 <?php 
}

Lets call the above javascript function when the quick edit box is clicked. This will add the data into the field when the quick edit link is clicked.

// Add to our admin_init function 
add_filter('post_row_actions', 'myown_expand_quick_edit_link', 10, 2);   
function myown_expand_quick_edit_link($actions, $post) {     
    global $current_screen;     
    if (($current_screen->post_type != 'mytype')) 
        return $actions;
    $nonce = wp_create_nonce( 'myfield_'.$post->ID);
    $myfielvalue = get_post_meta( $post->ID, 'myfield', TRUE);
    $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=\"set_myfield_value('{$myfielvalue}')\" >";
    $actions['inline hide-if-no-js'] .= __( 'Quick Edit' );
    $actions['inline hide-if-no-js'] .= '</a>';
    return $actions;
}

Yeah thats it. If you read through each block of code carefully its actually really self-explanatory.
If you have any questions.. Drop them in the comments and I will help where I can.

Janes Oosthuizen

Author Janes Oosthuizen

Programmer and Tech Junky from Bloemfontein, South-Africa. I have been programming for 8 years in various languages including ( CSS, HTML, jQuery, PHP, MySQL, Wordpress and many other ).

More posts by Janes Oosthuizen

Leave a Reply