We need to display custom taxonomy options in post quick edit page as dropdown as below screen shot: |
The very first step is to register taxonomy.
https://pritomkumar.blogspot.com/2019/02/wordpress-plugin-how-to-create-custom.html will help you. |
Now the target is to display taxonomy options in quick edit posts page. For that we have to register some actions as below: |
<?php add_action('admin_enqueue_scripts', array(self::class, 'my_add_admin_scripts')); add_filter('manage_posts_columns', array(self::class, 'add_post_fake_column'), 10, 2); add_filter('manage_edit-post_columns', array(self::class, 'remove_post_fake_column')); add_action('quick_edit_custom_box', array(self::class, 'add_post_quick_edit_box'), 10, 2); add_action('save_post', array(self::class, "my_taxonomy_post_save_callback"), 1, 2); $action_name = 'plugin_my_personal_taxonomy'; add_action ('wp_ajax_' . $action_name, array(self::class, 'ajax_call_your_function')); add_action ('wp_ajax_nopriv_' . $action_name, array(self::class, 'ajax_call_your_function')); |
<?php public static function my_add_admin_scripts() { global $pagenow; $taxonomy = MY_TAXONOMY_PLUGIN_CORE . 'color'; wp_register_script( 'MY_TAXONOMY_PLUGIN_CORE', MY_TAXONOMY_PLUGIN_URL . 'assets/script7.js', array('jquery') ); $params = array( 'BASE_URL' => MY_TAXONOMY_PLUGIN_URL, 'ADMIN_URL' => admin_url() ); wp_localize_script( 'MY_TAXONOMY_PLUGIN_CORE', 'MY_TAXONOMY_PLUGIN_CORE', $params); wp_enqueue_script('MY_TAXONOMY_PLUGIN_CORE'); wp_enqueue_style( "MY_TAXONOMY_PLUGIN_CORE", MY_TAXONOMY_PLUGIN_URL . "assets/style7.css" ); } |
<?php public static function add_post_fake_column($posts_columns, $post_type) { $posts_columns['fake_column_taxonomy_color'] = 'Fake Column (Invisible)'; return $posts_columns; } public static function remove_post_fake_column($posts_columns) { unset($posts_columns['fake_column_taxonomy_color']); return $posts_columns; } |
<?php public static function add_post_quick_edit_box($column_name, $post_type) { if (true) { $taxonomy = get_taxonomy(self::getTaxonomyName()); $taxonomy_options = get_terms(array( 'taxonomy' => self::getTaxonomyName(), 'hide_empty' => false, )); if (count($taxonomy_options) > 0) { $post_terms = []; $post_id = isset($GLOBALS['post_id']) ? $GLOBALS['post_id'] : get_the_ID(); foreach(wp_get_post_terms($post_id, self::getTaxonomyName()) as $o) { $post_terms[$o->term_id] = 1; } global $taxonomy_data_map; $taxonomy_data_map = []; $taxonomy_data_map['name'] = self::getTaxonomyName(); $taxonomy_data_map['value_field'] = $taxonomy->hierarchical ? 'term_id' : 'name'; $taxonomy_data_map['options'] = $taxonomy_options; $taxonomy_data_map['selected'] = $post_terms; include_once MY_TAXONOMY_PLUGIN_DIR . 'templates/taxonomy_post_quick_edit.php'; wp_nonce_field( MY_TAXONOMY_PLUGIN_NONCE_FIELD_NAME, MY_TAXONOMY_PLUGIN_NONCE_FIELD_NAME ); } } } |
taxonomy_post_quick_edit.php<?php global $taxonomy_data_map; $terms = $taxonomy_data_map['options']; $value_field = $taxonomy_data_map['value_field']; $selected = $taxonomy_data_map['selected']; ?> <fieldset class="inline-edit-col-left my_taxonomy_plugin_color-quick-editor"> <div class="inline-edit-col"> <span class="title"><?= __('Colors') ?></span> <select name='<?= $taxonomy_data_map['name'] ?>[]' id='<?= $taxonomy_data_map['name'] ?>' multiple> <?php foreach ($terms as $term) { $_checked = isset($selected[$term->term_id]) ? 'selected' : ''; echo "<option value='{$term->{$value_field}}' {$_checked}>{$term->name}</option>\n"; } ?> </select> </div> </fieldset> |
<?php public static function my_taxonomy_post_save_callback($id, $post) { if ((defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) || !current_user_can('edit_page', $id)) { return $id; } if (!isset($_POST[MY_TAXONOMY_PLUGIN_NONCE_FIELD_NAME])) { return $id; } if (!wp_verify_nonce($_POST[MY_TAXONOMY_PLUGIN_NONCE_FIELD_NAME], MY_TAXONOMY_PLUGIN_NONCE_FIELD_NAME)) { return $id; } if (!current_user_can( 'edit_post', $id)) { return $id; } $taxonomy = get_taxonomy(self::getTaxonomyName()); $field = $taxonomy->hierarchical ? 'term_id' : 'name'; $taxonomy_options = array(); foreach(get_terms(array('taxonomy' => self::getTaxonomyName(), 'hide_empty' => false)) as $o) { $taxonomy_options[strval($o->{$field})] = 1; } if (count($taxonomy_options)) { $options = array(); foreach((isset($_POST[self::getTaxonomyName()]) ? $_POST[self::getTaxonomyName()] : array()) as $i) { if (isset($taxonomy_options[$i])) { array_push($options, $i); } } wp_set_post_terms($id, $options, self::getTaxonomyName()); } else { wp_set_post_terms($id, array(), self::getTaxonomyName()); } return $id; } |
<?php public static function ajax_call_your_function() { $case = isset($_REQUEST['case']) ? $_REQUEST['case'] : ''; switch ($case) { case 'post-quick-edit': $id = isset($_REQUEST['id']) ? doubleval($_REQUEST['id']) : 0; if ($id > 0) { $GLOBALS['post_id'] = $id; self::add_post_quick_edit_box(null, null); wp_die(); } break; } header("HTTP/1.1 404"); echo __("Not Found"); exit; } |
script7.jsjQuery(document).ready(function(){ var $ = jQuery, body = $(document.body); if (typeof inlineEditPost !== 'undefined') { (function ($, inlineEditPost) { // inlineEditTax does not invoke any events, but does ensure to stop // propagation to all other event handlers; swap it out. inlineEditPost.realOne = inlineEditPost.edit; inlineEditPost.edit = function (link) { // Invoke original edit event handler. this.realOne(link); var id = inlineEditPost.getId(link), tr = $(link).closest("table").find("tr#edit-" + id); var qe = tr.find(".my_taxonomy_plugin_color-quick-editor"); if (qe.length) { $.ajax ({ url: MY_TAXONOMY_PLUGIN_CORE.ADMIN_URL + '/admin-ajax.php', type: 'POST', dataType: 'HTML', data: { action: 'plugin_my_personal_taxonomy', case: 'post-quick-edit', id: id }, success: function (resp) { qe.html($(resp).html()); }, error: function (xhr, ajaxOptions, thrownError) { }, }); } return false; } })($, inlineEditPost); } }); |
Download full plugin from BitBucket |
Friday, February 22, 2019
WordPress | Customizing Taxonomies as Dropdowns in Quick Edit | Display a custom taxonomy as a dropdown on the quick edit posts page
Proper way to use WordPress function with AJAX PHP file
In general, trying to access directly any php file in your theme (or plugin) is going to fail for various reasons. |
Using admin-ajax.php is the way to go here. To use it, you would do something like the following: |
<?php $action_name = 'plugin_my_personal_taxonomy'; add_action ('wp_ajax_' . $action_name, array(self::class, 'ajax_call_your_function')); add_action ('wp_ajax_nopriv_' . $action_name, array(self::class, 'ajax_call_your_function')); public static function ajax_call_your_function() { wp_send_json_success("Hello"); } |
And from jQuery: |
jQuery(document).ready(function(){ var $ = jQuery, body = $(document.body); $.ajax ({ url: MY_TAXONOMY_PLUGIN_CORE.ADMIN_URL + '/admin-ajax.php', type: 'POST', dataType: 'JSON', data: { action: 'plugin_my_personal_taxonomy' }, success: function (resp) { console.log(resp); }, error: function (xhr, ajaxOptions, thrownError) { // this error case means that the ajax call, itself, failed, e.g., a syntax error // in your_function() alert ('Request failed: ' + thrownError.message) ; }, }); }); |
WordPress | Dynamically reference WordPress site URL in JavaScript | WordPress path url in js script file
During my WordPress development, I often find myself in need of the WP home or blog URL from within the JavaScript code. |
Instead of hardcoding url in the JavaScript, we're going to dynamically retrieve the site URL, with a little help in PHP. |
<?php wp_register_script( 'MY_TAXONOMY_PLUGIN_CORE', MY_TAXONOMY_PLUGIN_URL . 'assets/script7.js', array('jquery') ); $params = array( 'BASE_URL' => MY_TAXONOMY_PLUGIN_URL, 'ADMIN_URL' => admin_url() ); wp_localize_script( 'MY_TAXONOMY_PLUGIN_CORE', 'MY_TAXONOMY_PLUGIN_CORE', $params); wp_enqueue_script('MY_TAXONOMY_PLUGIN_CORE'); |
And from jQuery |
alert(MY_TAXONOMY_PLUGIN_CORE.BASE_URL); |
Thursday, February 21, 2019
WordPress Plugin: How To Create A Custom Taxonomy In WordPress like Category | Manually Creating Custom Taxonomies
WordPress provides a new method of grouping content by allowing you to create your own custom taxonomies. The core developers have created the register_taxonomy() function to handle the heavy lifting for us. All you have to do is understand how to configure all of the settings to suit your needs. |
Below function will initialize custom taxonomy: |
<?php add_action('init', array(self::class, 'create_topics_hierarchical_taxonomy'), 0); public static function create_topics_hierarchical_taxonomy() { $labels = array( 'name' => _x( 'Color', 'taxonomy general name' ), 'singular_name' => _x( 'Colors', 'taxonomy singular name' ), 'search_items' => __( 'Search Colors' ), 'all_items' => __( 'All Colors' ), 'parent_item' => __( 'Parent Color' ), 'parent_item_colon' => __( 'Parent Color:' ), 'edit_item' => __( 'Edit Color' ), 'update_item' => __( 'Update Color' ), 'add_new_item' => __( 'Add New Color' ), 'new_item_name' => __( 'New Color Name' ), 'menu_name' => __( 'Colors' ), ); register_taxonomy(MY_TAXONOMY_PLUGIN_CORE . 'color', array('post', 'page'), array( //If you want parent color option, then enable below parameter to true 'hierarchical' => false, 'labels' => $labels, //will show settings create/edit/delete options in post/page menu 'show_ui' => true, //will show count posts 'show_admin_column' => true, 'query_var' => true, 'rewrite' => array('slug' => 'taxonomy-color') )); //Default taxonomy will be created on initialization wp_insert_term("Black", MY_TAXONOMY_PLUGIN_CORE . "color"); wp_insert_term("Blue", MY_TAXONOMY_PLUGIN_CORE . "color"); wp_insert_term("Yellow", MY_TAXONOMY_PLUGIN_CORE . "color"); wp_insert_term("Red", MY_TAXONOMY_PLUGIN_CORE . "color"); } |
Below function will add required script in taxonomy page: |
<?php add_action('admin_enqueue_scripts', array(self::class, 'my_add_admin_scripts')); public static function my_add_admin_scripts() { global $pagenow; $taxonomy = MY_TAXONOMY_PLUGIN_CORE . 'color'; if($pagenow == 'edit-tags.php' && (isset($_GET['taxonomy']) && $_GET['taxonomy'] == $taxonomy) && !isset($_GET['action'])) { wp_register_script( 'quick-edit-js', MY_TAXONOMY_PLUGIN_URL . 'assets/script7.js', array('jquery') ); wp_enqueue_script('quick-edit-js'); } } |
Below function will add additional field to our custom taxonomy: |
<?php $taxonomy = MY_TAXONOMY_PLUGIN_CORE . 'color'; $taxonomy1 = 'manage_edit-' . $taxonomy . '_columns'; add_filter($taxonomy1, array(self::class, 'register_category_columns')); public static function register_category_columns($columns) { $columns['my-taxonomy-plugin-color-f1'] = __( 'Creator', 'my-taxonomy-plugin' ); return $columns; } |
Below function will show custom taxonomy field in taxonomy table |
<?php $taxonomy = MY_TAXONOMY_PLUGIN_CORE . 'color'; $taxonomy2 = 'manage_' . $taxonomy . '_custom_column'; add_filter($taxonomy2, array(self::class, 'category_column_display'), 10, 3); public static function category_column_display($string, $column_name, $term_id) { return esc_html(get_term_meta($term_id, $column_name, true)); } |
Below function will allow our custom field of taxonomy to edit in quick edit mode |
<?php $taxonomy = MY_TAXONOMY_PLUGIN_CORE . 'color'; add_action('quick_edit_custom_box', array(self::class, 'quick_edit_taxonomy_field'), 10, 2); $taxonomy3 = 'edited_' . $taxonomy; add_action($taxonomy3, array(self::class, 'quick_edit_save_category_field')); public function quick_edit_taxonomy_field($column_name, $screen) { if ( $screen != 'edition' && $column_name != 'my-taxonomy-plugin-color-f1' ) { return false; } include_once MY_TAXONOMY_PLUGIN_DIR . "templates/taxonomy_quick_edit.php"; } public function quick_edit_save_category_field($term_id) { if (isset($_POST['my-taxonomy-plugin-color-f1'])) { update_term_meta( $term_id, 'my-taxonomy-plugin-color-f1', $_POST['my-taxonomy-plugin-color-f1'] ); } } <fieldset> <div class="inline-edit-col inline-edit-col-taxonomy-my-color"> <label> <span class="title"><?php _e( 'Creator', 'my-taxonomy-plugin' ); ?></span> <span class="input-text-wrap"><input type="text" name="<?php echo esc_attr($column_name); ?>" class="ptitle" value=""></span> </label> </div> </fieldset> jQuery(document).ready(function(){ var $ = jQuery, body = $(document.body); (function ($, inlineEditTax) { // inlineEditTax does not invoke any events, but does ensure to stop // propagation to all other event handlers; swap it out. inlineEditTax.editPreMyPlugin = inlineEditTax.edit; inlineEditTax.edit = function (link) { // Invoke original edit event handler. this.editPreMyPlugin(link); var tr = $(link).closest('tr[id]'); var tag_id = tr.attr('id'); var field1_value = tr.find(".column-my-taxonomy-plugin-color-f1").text(); $(':input[name="my-taxonomy-plugin-color-f1"]', '.inline-edit-row').val(field1_value); return false; } })($, inlineEditTax); }); |
Below function will add a custom field to add/edit form of taxonomy and data will be saved accordingly |
<?php add_action($taxonomy . '_add_form_fields', array( self::class, 'taxonomy_metadata_add' ), 10, 1); add_action($taxonomy . '_edit_form', array( self::class, 'taxonomy_metadata_edit' ), 10, 1); add_action('created_' . $taxonomy, array( self::class, 'save_taxonomy_metadata' ), 10, 1); add_action('edited_' . $taxonomy, array( self::class, 'save_taxonomy_metadata' ), 10, 1); public static function taxonomy_metadata_add($tag) { if (current_user_can( 'publish_posts')) { include_once MY_TAXONOMY_PLUGIN_DIR . "templates/taxonomy_add.php"; } } public static function taxonomy_metadata_edit($tag) { if (current_user_can( 'publish_posts')) { ob_start(); global $my_taxonomy_plugin_color_f1; $my_taxonomy_plugin_color_f1 = get_term_meta($tag->term_id, 'my-taxonomy-plugin-color-f1', true); include_once MY_TAXONOMY_PLUGIN_DIR . "templates/taxonomy_edit.php"; $content = ob_get_contents(); ob_end_clean(); echo $content; } } public static function save_taxonomy_metadata($term_id) { if ( isset($_POST['my-taxonomy-plugin-color-f1']) ) { update_term_meta($term_id, 'my-taxonomy-plugin-color-f1', esc_attr($_POST['my-taxonomy-plugin-color-f1'])); } } <div class="form-field"> <label for="my-taxonomy-plugin-color-f1"><?php _e('Creator'); ?></label> <input name="my-taxonomy-plugin-color-f1" id="my-taxonomy-plugin-color-f1" type="text" value="" size="70" /> <p class="description"><?php _e('Title display in creator is limited to 70 chars'); ?></p> </div> <table class="form-table"> <tbody> <tr class="form-field form-required term-name-wrap"> <th scope="row"><label for="my-taxonomy-plugin-color-f1"><?php _e('Creator'); ?></label></th> <td> <input name="my-taxonomy-plugin-color-f1" id="my-taxonomy-plugin-color-f1" type="text" value="<?= esc_attr($my_taxonomy_plugin_color_f1) ?>" size="70" /> <p class="description"><?php _e('Title display in creator is limited to 70 chars'); ?></p> </td> </tr> </tbody> </table> |
Now we will add metabox to append our taxonomy to post edit page |
<?php add_action('admin_init', array(Init::class, 'check_if_plugin')); public static function check_if_plugin() { if (is_plugin_active(MY_TAXONOMY_PLUGIN_NAME)) { add_meta_box( MY_TAXONOMY_PLUGIN_CORE . 'metabox1', __( 'Choose Colors', MY_TAXONOMY_PLUGIN_CORE ), array(Init::class, 'my_meta_box_data_callback'), 'post' ); add_action('save_post', array(self::class, "my_taxonomy_post_save_callback"), 1, 2); } } public static function my_taxonomy_post_save_callback($id, $post) { if (!isset($_POST[MY_TAXONOMY_PLUGIN_NONCE_FIELD_NAME])) { return $post->ID; } if (!wp_verify_nonce($_POST[MY_TAXONOMY_PLUGIN_NONCE_FIELD_NAME], MY_TAXONOMY_PLUGIN_NONCE_FIELD_NAME)) { return $post->ID; } if (!current_user_can( 'edit_post', $post->ID)) { return $post->ID; } $options = isset($_POST[self::getTaxonomyName()]) ? $_POST[self::getTaxonomyName()] : array(); wp_set_post_terms($post->ID, $options, self::getTaxonomyName()); return $post->ID; } public static function my_meta_box_data_callback() { global $post; $taxonomy_options = get_terms(array( 'taxonomy' => self::getTaxonomyName(), 'hide_empty' => false, )); if (count($taxonomy_options) > 0) { $post_terms = []; foreach(wp_get_post_terms($post->ID, self::getTaxonomyName()) as $o) { $post_terms[$o->term_id] = 1; } global $taxonomy_data_map; $taxonomy_data_map = []; $taxonomy_data_map['class'] = self::getTaxonomyName(); $taxonomy_data_map['options'] = $taxonomy_options; $taxonomy_data_map['selected'] = $post_terms; include_once MY_TAXONOMY_PLUGIN_DIR . 'templates/taxonomy_post_edit.php'; wp_nonce_field( MY_TAXONOMY_PLUGIN_NONCE_FIELD_NAME, MY_TAXONOMY_PLUGIN_NONCE_FIELD_NAME ); } } taxonomy_post_edit.php <?php global $taxonomy_data_map; $taxonomy_class = $taxonomy_data_map['class']; $taxonomy_options = $taxonomy_data_map['options']; $taxonomy_selected = $taxonomy_data_map['selected']; ?> <div class="<?= $taxonomy_class ?>-editor-on-post"> <h2> Colors </h2> <?php foreach ($taxonomy_options as $o) { ?> <div class="<?= $taxonomy_class ?>-taxonomies__hierarchical-terms-list" tabindex="0" role="group" aria-label="Available Colors"> <?php $_checked = isset($taxonomy_selected[$o->term_id]) ? 'checked' : ''; ?> <div class="<?= $taxonomy_class ?>-taxonomies__hierarchical-terms-choice"> <input id="<?= $taxonomy_class ?>-taxonomies-hierarchical-term-<?= $o->term_id ?>" class="<?= $taxonomy_class ?>-taxonomies__hierarchical-terms-input" type="checkbox" value="<?= $o->name ?>" name="<?= $taxonomy_class ?>[]" <?= $_checked ?> /> <label for="<?= $taxonomy_class ?>-taxonomies-hierarchical-term-<?= $o->term_id ?>"><?= esc_attr($o->name) ?></label> </div> </div> <?php } ?> <div style="clear:both"></div> </div> |
Now time to display our taxonomy data to post details view |
<?php add_filter('the_content', array(self::class, 'my_the_content')); public static function my_the_content($c) { if (!is_admin() && !is_feed() && (is_single() || is_page())) { global $post; $allow = !is_null($post) && property_exists($post, "post_type") && in_array($post->post_type, array('post')); if ($allow) { $content = array(); foreach(wp_get_post_terms($post->ID, self::getTaxonomyName()) as $o) { $content[] = $o->name; } $c = $c . "<div class=\"my_taxonomy_plugin_color-post-display\"> <div class=\"row\"> <label class=\"label\">Colors</label> <span class=\"value\">" . implode(', ', $content) . "</span> </div> </div>"; } } return $c; } |
Below are some of screen shots |
d |
Download full plugin from BitBucket |
Subscribe to:
Posts (Atom)