{"id":424,"date":"2009-09-21T13:12:00","date_gmt":"2009-09-21T20:12:00","guid":{"rendered":"http:\/\/www.shibashake.com\/wordpress-theme\/?page_id=424"},"modified":"2022-01-10T16:39:50","modified_gmt":"2022-01-11T00:39:50","slug":"wordpress-custom-taxonomy-input-panels","status":"publish","type":"post","link":"https:\/\/shibashake.com\/wp\/wordpress-custom-taxonomy-input-panels","title":{"rendered":"WordPress Custom Taxonomy Input Panels"},"content":{"rendered":"

Would you like to add new custom fields to your WordPress posts, pages, and categories? Now you can easily do this with the WordPress custom taxonomy system<\/a>. For example, if you have a blog on movie reviews, you may want to add the fields Actors<\/em> and Genre<\/em> to each of your posts. <\/p>\n

What is less clear, however, is how you can expand your WordPress admin interface, so that users can easily enter in these new custom fields. WordPress 2.8+ will only include an input interface for custom taxonomies associated with posts. In addition, this input interface is the standard tag interface, where you must type in the new fields as plain text.<\/p>\n

If you are looking for a drop-down menu, or a radio button list, you are out of luck.<\/p>\n

Here, we consider how you can flexibly expand your WordPress post interface and style your custom taxonomy input panel however you want.<\/p>\n

<\/div>\n
\"\"
Screen-shot of the tag input interface associated with all custom taxonomies.<\/div><\/div> <\/div><\/div>\n

1. Create Your WordPress Custom Taxonomy<\/h2>\n

First, we create a simple test attribute called theme and we associate it with our WordPress posts. We add three initial terms to our new theme attribute – Beauty, Halloween, and Dragons.<\/p>\n

Note that the hierarchical argument simply refers to whether your new theme attribute is a hierarchical structure, such as your WordPress categories, or whether it is flat, such as your WordPress tags.<\/p>\n

The hierarchical argument does not currently affect the input interface of your new attribute. As of WordPress 2.8, the normal tag input interface will be used for all custom taxonomy attributes. To restyle the custom taxonomy input interface, you must use the add_meta_box<\/strong> command.<\/p>\n

\r\nadd_action( 'init', 'create_theme_taxonomy', 0 );\r\n\r\nfunction create_theme_taxonomy() {\r\n\tif (!taxonomy_exists('theme')) {\r\n\t\tregister_taxonomy( 'theme', 'post', array( 'hierarchical' => false, 'label' => __('Theme'), 'query_var' => 'theme', 'rewrite' => array( 'slug' => 'theme' ) ) );\r\n\r\n\t\twp_insert_term('Beauty', 'theme');\r\n\t\twp_insert_term('Dragons', 'theme');\r\n\t\twp_insert_term('Halloween', 'theme');\r\n\t}\r\n}\r\n<\/pre>\n<\/p>\n
<\/div>\n
2. Styling Your Custom Taxonomy Input<\/h2>\n
To add input menus to your WordPress post interface, you want to use the WordPress add_meta_box<\/strong> command. In the example code below, we add a new custom field called Theme into our WordPress post interface. Simply include the code into your functions.php<\/strong> theme or plugin file.<\/p>\n
\r\nfunction add_theme_box() {\r\n\tadd_meta_box('theme_box_ID', __('Theme'), 'your_styling_function', 'post', 'side', 'core');\r\n}\t\r\n\r\nfunction add_theme_menus() {\r\n\r\n\tif ( ! is_admin() )\r\n\t\treturn;\r\n\r\n\tadd_action('admin_menu', 'add_theme_box');\r\n}\r\n\r\nadd_theme_menus();\r\n<\/pre>\n<\/p>\n
\"\"
Screen-shot of your new drop-down custom taxonomy interface.<\/div><\/div> <\/div><\/div>\n
The add_meta_box <\/strong>function adds your_styling_function<\/strong> to the WordPress blog system so that it gets called whenever the Edit Post screen is rendered. You can use the same function to add input code to Edit Page and Edit Link screens.<\/p>\n
The example your_styling_function<\/strong> below will add a drop-down menu to your blog Edit Post screen, containing all the current terms on your theme<\/em> custom taxonomy. <\/p>\n
\r\n\/\/ This function gets called in edit-form-advanced.php\r\nfunction your_styling_function($post) {\r\n\r\n\techo '<input type="hidden" name="taxonomy_noncename" id="taxonomy_noncename" value="' . \r\n    \t\twp_create_nonce( 'taxonomy_theme' ) . '" \/>';\r\n\r\n\t\r\n\t\/\/ Get all theme taxonomy terms\r\n\t$themes = get_terms('theme', 'hide_empty=0'); \r\n\r\n?>\r\n<select name='post_theme' id='post_theme'>\r\n\t<!-- Display themes as options -->\r\n    <?php \r\n        $names = wp_get_object_terms($post->ID, 'theme'); \r\n        ?>\r\n        <option class='theme-option' value='' \r\n        <?php if (!count($names)) echo "selected";?>>None<\/option>\r\n        <?php\r\n\tforeach ($themes as $theme) {\r\n\t\tif (!is_wp_error($names) && !empty($names) && !strcmp($theme->slug, $names[0]->slug)) \r\n\t\t\techo "<option class='theme-option' value='" . $theme->slug . "' selected>" . $theme->name . "<\/option>\\n"; \r\n\t\telse\r\n\t\t\techo "<option class='theme-option' value='" . $theme->slug . "'>" . $theme->name . "<\/option>\\n"; \r\n\t}\r\n   ?>\r\n<\/select>    \r\n<?php\r\n}\r\n<\/pre>\n<\/p>\n
Lines 4-5<\/u> – Add security nonce check<\/a>.
\nLine 9<\/u> – We use the hide_empty=0<\/em> argument for the get_terms<\/a> <\/strong>function so that all theme<\/em> choices will be returned, even the ones that have not yet been assigned to any post.
\nLine 15<\/u> – We use the wp_get_object_terms<\/strong><\/a> function to get the theme currently associated with our post so that we may pre-select it in our drop-down menu.
\nLines 17-25<\/u> – Render our drop-down menu, populating it with our theme names.
\nNote<\/strong> – On lines 22 and 24, we are now setting the theme-option<\/em> value to $theme->slug<\/strong>. As pointed out by Adam<\/a> in the comments section<\/a>, the taxonomy object slug is unique (unlike its name), and this will prevent duplicate taxonomy terms from being created.<\/p>\n
\"\"\n
Screen-shot of the Edit Post, which now has the old tag input box and the new drop-down menu box.<\/div><\/div> <\/div><\/div>\n
Note that when you add your new drop-down menu box, the old tag input box will still appear. To only include one input box, use the remove_meta_box<\/strong> command as suggested by Leo Mysor<\/a> in the comments section below.<\/p>\n
\r\nremove_meta_box('tagsdiv-theme','post','core');\r\n<\/pre>\n<\/p>\n
Note<\/a><\/strong> – For non-hierarchical taxonomies (like tags) you want to use tagsdiv-{$taxonomy_name}, e.g. tagsdiv-theme<\/em>. For hierarchical taxonomies (like categories) you want to use {$taxonomy_name}div, e.g. themediv<\/em>.<\/p>\n
You can add the remove_meta_box command<\/strong> before your add_meta_box<\/strong> statement. <\/p>\n
Alternatively, you can register your custom taxonomy attribute to something other than ‘post’. In the code example below, we register our theme custom taxonomy to shiba_post<\/em>, which gets rid of the standard tag input box in the Edit Post screen.<\/p>\n
\r\nregister_taxonomy( 'theme', 'shiba_post', array( 'hierarchical' => false, 'label' => __('Theme'), 'query_var' => 'theme', 'rewrite' => array( 'slug' => 'theme' ) ) );\r\n<\/pre>\n<\/p>\n
However, as pointed out by Leo, this also removes your taxonomy tab from the Posts menu and makes it difficult for others to add new items to your taxonomy.<\/p>\n
<\/div>\n
3. Saving Your New Inputs<\/h2>\n
Now, we can insert any input panel we want for our custom taxonomy, however, we still need a way to save those input values. This can be achieved with the save_post<\/strong> WordPress hook. This hook allows you to execute a function of your choice when a WordPress post gets saved. There are similar hooks for saving pages and links.<\/p>\n
Just add the save_post<\/strong> hook to your existing add_theme_menus function. For example, the code below registers the save_taxonomy_data function<\/strong> with the WordPress blog system so that it gets executed whenever a WordPress post is saved or updated.<\/p>\n
\r\nfunction add_theme_menus() {\r\n\r\n\tif ( ! is_admin() )\r\n\t\treturn;\r\n\r\n\tadd_action('admin_menu', 'add_theme_box');\r\n\r\n\t\/* Use the save_post action to save new post data *\/\r\n\tadd_action('save_post', 'save_taxonomy_data');\r\n}\r\n<\/pre>\n<\/p>\n
Now, you just need to specify your save_taxonomy_data<\/b> function. We can adapt our own save function from the add_meta_data example on WordPress.org<\/a>.<\/p>\n
\r\nfunction save_taxonomy_data($post_id) {\r\n\/\/ verify this came from our screen and with proper authorization.\r\n\r\n \tif ( !wp_verify_nonce( $_POST['taxonomy_noncename'], 'taxonomy_theme' )) {\r\n    \treturn $post_id;\r\n  \t}\r\n\r\n  \t\/\/ verify if this is an auto save routine. If it is our form has not been submitted, so we dont want to do anything\r\n  \tif ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) \r\n    \treturn $post_id;\r\n\r\n  \r\n  \t\/\/ Check permissions\r\n  \tif ( 'page' == $_POST['post_type'] ) {\r\n    \tif ( !current_user_can( 'edit_page', $post_id ) )\r\n      \t\treturn $post_id;\r\n  \t} else {\r\n    \tif ( !current_user_can( 'edit_post', $post_id ) )\r\n      \treturn $post_id;\r\n  \t}\r\n\r\n  \t\/\/ OK, we're authenticated: we need to find and save the data\r\n\t$post = get_post($post_id);\r\n\tif (($post->post_type == 'post') || ($post->post_type == 'page')) { \r\n           \/\/ OR $post->post_type != 'revision'           $theme = $_POST['post_theme'];\r\n\t   wp_set_object_terms( $post_id, $theme, 'theme' );\r\n        }\r\n\treturn $theme;\r\n\r\n}\r\n<\/pre>\n<\/p>\n
Lines 4-6<\/u> – First we do a nonce<\/i> check to ensure that the function is being called by our very own your_styling_function<\/b>. Make sure that the taxonomy_noncename<\/em> and taxonomy_theme<\/em> terms match those that were created earlier, on lines 4-5 in your_styling_function<\/b>.<\/p>\n
Lines 9-10<\/u> – Take no action for auto-saves.<\/p>\n
Lines 14-20<\/u> – Check that the current user has proper permissions to edit posts.<\/p>\n
Lines 23-28<\/u> – Associates our post with the new theme taxonomy data. It is important to do a post_type<\/em> check here, because this function will also get called on post revision<\/em> objects. <\/p>\n
As pointed out by Angelia<\/a>, this results in double counting the newly added taxonomy relationship. <\/p>\n
<\/div>\n
4. Getting a Taxonomy Term Count<\/h2>\n
If you want to get the count of a particular taxonomy term, i.e., the number of objects that it is associated with, you can easily extract that figure from the WordPress term_taxonomy<\/em> database<\/a>.<\/p>\n
Just add the count code into the foreach $themes loop<\/em>.<\/p>\n
\r\nglobal $wpdb;\r\nforeach ($themes as $theme) {\r\n\r\n        $count = $wpdb->get_var( $wpdb->prepare( "SELECT count FROM $wpdb->term_taxonomy WHERE term_taxonomy_id = %d", $theme->term_taxonomy_id) );\r\n\r\n        \/* Your code here to display the count ... *\/\r\n}\r\n<\/pre>\n<\/p>\n
While registering your custom taxonomy, you can link an update_count_callback<\/em> function to it. This function will get called every time any term in your taxonomy gets a count update. This allows you to control what actually gets stored in the count<\/em> column of your custom taxonomy terms.<\/p>\n
\r\n$args = array( 'hierarchical' => false, \r\n               'update_count_callback' => 'test_taxonomy_count', \r\n               'label' => __('Theme'), \r\n               'query_var' => 'theme', \r\n               'rewrite' => array( 'slug' => 'theme' ) )\r\nregister_taxonomy( 'theme', 'post',  $args);\r\n\r\n\/\/ This test count function just does the default WordPress operations\r\nfunction test_taxonomy_count($terms) {\r\n\tglobal $wpdb;\r\n\t$terms = array_map('intval', $terms);\r\n\t\r\n\tforeach ( (array) $terms as $term) {\r\n\t\t$count = $wpdb->get_var( $wpdb->prepare( "SELECT COUNT(*) FROM $wpdb->term_relationships WHERE term_taxonomy_id = %d", $term) );\r\n\t\t$wpdb->update( $wpdb->term_taxonomy, compact( 'count' ), array( 'term_taxonomy_id' => $term ) );\r\n\t}\r\n}\r\n<\/pre>\n<\/p>\n
<\/div>\n
5. All Done!<\/h2>\n
You can use the same code to style your custom taxonomy input panels for pages and links. Just change the post<\/em> attribute to page<\/em> or link<\/em> when calling add_meta_box<\/strong> and use the save_page<\/em>, edit_link<\/em>, and add_link<\/em> hooks instead of save_post<\/em>.<\/p>\n
You can also add new fields to your WordPress blog categories<\/a> using a similar system.<\/p>\n","protected":false},"excerpt":{"rendered":"
We describe registering custom taxonomies, and how to add our own custom taxonomy input interface. Substitute the default tag interface with a drop-down menu, radio button list, or something else. <\/p>\n","protected":false},"author":1,"featured_media":4002,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":""},"categories":[1174,1175],"tags":[1113,145,1114,1115,1111,1112,144,1116,1118,1117,1120,1119,573],"_links":{"self":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts\/424"}],"collection":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/comments?post=424"}],"version-history":[{"count":95,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts\/424\/revisions"}],"predecessor-version":[{"id":15549,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts\/424\/revisions\/15549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/media\/4002"}],"wp:attachment":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/media?parent=424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/categories?post=424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/tags?post=424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}