In previous article, I have explained about To Create custom field in Woocommerce Products Admin Panel and today I continue with article with to add quick edit custom box in WordPress.
In this article, You will get an idea to add custom box into quick edit option provided into WordPress.
So, let’s understand the code. First of all will add action hook ‘quick_edit_custom_box’ which is used to add HTML field into quick edit section.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | add_action( 'quick_edit_custom_box', 'add_to_bulk_quick_edit_custom_box', 10, 2 ); switch ( $post_type ) { case 'product': switch( $column_name ) { case 'product_checkbox': global $post; <div class="inline-edit-group"> <label> <span class="title">Product Checkbox</span> <input type="checkbox" name="product_checkbox" id="product_checkbox" value="" /> </label> </div> </fieldset><?php break; } break; } |
Next, action hook is about to write javascript code which add the script into footer and append, remove and set a value of the field into quick edit custom box.
QuickEdit means inline update code and field value so for that we have to call ajax request which will update information into a database without refreshing a page. so, here you can see, I have called ajax function.
Must Read: WordPress : To add custom post type into RSS
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | add_action('admin_footer', 'myown_quick_edit_javascript'); function myown_quick_edit_javascript() { global $current_screen,$post; if (($current_screen->post_type != 'product')) return; ?> <script type="text/javascript"> { // refresh the quick menu properly inlineEditPost.revert(); if(fieldValue=='yes'){ jQuery('#product_checkbox').val('yes'); }else{ jQuery('#product_checkbox').removeAttr('checked'); jQuery('#product_checkbox').val('no'); } jQuery('#product_checkbox').val(fieldValue); } jQuery('#product_checkbox').click ( function (){ if (jQuery('#product_checkbox').is (':checked')) { jQuery('#product_checkbox').val('yes'); }else{ jQuery('#product_checkbox').val('no');} }); jQuery(document).ready(function() { jQuery('a.editinline').click (function (){ var id = inlineEditPost.getId(this); var val = parseInt(jQuery('#inline_' + id + 'product_checkbox').text()); jQuery('#product_checkbox').attr('checked', !!val); // edit by ajax var val = '<?php echo get_post_meta( $post->ID, 'product_checkbox', TRUE);?>'; var data = { action: 'ajaxDataSubmit', id: val }; ajax_params = '<?php echo admin_url('admin-ajax.php');?>'; jQuery.ajax({ type:"POST", url: ajax_params, // our PHP handler file data: data, //loadin image or text beforeload ajax code }, success:function(results){ // do something with returned data if(results.trim()=='yes'){ jQuery('#product_checkbox').attr("checked","checked"); }else{ jQuery('#product_checkbox').removeAttr("checked"); } return results; } }); }); }); </script> <?php } |
This is PHP function which is used for responding an ajax request and update value of the field into a database.
1 2 3 4 5 6 7 8 | function ajaxDataSubmit(){ global $wpdb; $id = $_POST['id']; echo $id; die; } |
Here is the action hook used for ajax request and will store information of field into a database.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | add_action('wp_ajax_nopriv_ajaxDataSubmit', 'ajaxDataSubmit'); // For not logged in users function myown_expand_quick_edit_link($actions, $post) { global $current_screen; if (($current_screen->post_type != 'product')) return $actions; $nonce = wp_create_nonce( 'product_checkbox'.$post->ID); $myfielvalue = get_post_meta( $post->ID, 'product_checkbox', 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_custom_value('{$myfielvalue}')\" >"; $actions['inline hide-if-no-js'] .= __( 'Quick Edit' ); $actions['inline hide-if-no-js'] .= '</a>'; return $actions; } |
‘post_row_actions’ action hook is used to expand quick edit box with adding a custom field into that box.
Read about: Introduction to Transient API in WordPress
Next, is to save data into WordPress and below action hook is used to store the custom field value into the database when passing data into a post.
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', 'myown_save_quick_edit_data'); function myown_save_quick_edit_data($post_id) { // print_r($_REQUEST); // verify if this is an auto save routine. if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return $post_id; // Authentication passed now we save the data if ('product' == $_POST['post_type']) { $my_fieldvalue = esc_attr($_REQUEST['product_checkbox']); if (isset($_REQUEST['product_checkbox']) && $my_fieldvalue != '') { update_post_meta( $post_id, 'product_checkbox','yes'); } else { update_post_meta( $post_id, 'product_checkbox', 'no'); } } return $my_fieldvalue; } |
Storing of data is done. So that’s it our code is also done. You can use this code to add the custom field into Quick Edit option provided by WordPress.
Hope this helps someone else out.As always, thanks for reading. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.
Comments (1)