WordPress Taxonomy Tabs

Jason Schuller of Press75.com mentioned on Twitter yesterday that the taxonomy UI in the WordPress admin could use some improvement.

In regards to custom taxonomies, it would be nice to have just one tabbed box within the editor instead a separate box for each taxonomy.
@jschuller
Jason Schuller

I thought that sounded like a good idea, so I went about figuring out how such a change could be made. In the end, it took three sections of code, all of which can be placed within your theme’s functions.php file if you’re hoping to test it out. Ideally, this change belongs in a plugin rather than a theme file, but I’m not going to get into that discussion today. Here’s the first section of code:

// Load the jQuiry UI tabs script
wp_enqueue_script( 'jquery-ui-tabs' );

All it does is load the jQuery UI tabs script that will help us create the taxonomy tabs. The file itself is packaged with WordPress, so we don’t have to specify where it resides. Next we have the script that creates the tabbed taxonomies area.

// Create new taxonomy tabs box and move current taxonomies into the new box
function custom_scripts() {
	?>
		<script type='text/javascript'>
			jQuery(document).ready(function() {
				if(jQuery('.categorydiv').length != 0){
					var element = jQuery('<div id="tax-tabs" class="postbox"><h3 class="hndl">Taxonomies</h3><div id="tabs"><ul id="tab-nav"></ul><div id="tax-tabs-inside" class="inside"></div></div></div>');
					jQuery(element).appendTo('#side-sortables');
					jQuery('.categorydiv').each(function(index) {
						jQuery(this).parents('.postbox').css('display', 'none');
						var title = jQuery(this).parents('.postbox').children('.hndle').children('span').html();
						var slug = jQuery(this).parents('.postbox').attr('ID');
						var slug = slug.replace('div', '');
						jQuery('<li><a href="#taxonomy-' + slug + '">' + title + '</a></li>').appendTo('#tab-nav');
						jQuery(this).appendTo('#tax-tabs-inside');
					});
				
					jQuery(function() {
						jQuery( "#tabs" ).tabs();
					});
				}
			});
		</script>
	<?php
}
add_action('admin_head', 'custom_scripts');

This function writes out the Javascript involved with adding a new section to the WordPress page/post editor. It begins by checking if any taxonomies exist (keep in mind that “Categories” are a built-in taxonomy). If there are, the taxonomy box is displayed. After this, we loop through all the “.categorydiv” elements and move them into our new taxonomy box, writing the tabbed navigation as we go. Finally, we need to add a few styles so that the tabs look like tabs and the whole box blends with the default WordPress experience:

// Style new taxonomy tabs
function custom_styles() {
	?>
		<style type="text/css">
			.ui-tabs-nav{
				background: #ededed;
				border-bottom: 1px solid #dfdfdf !important;
				margin-top: -6px !important;
				padding: 0 0 0 9px !important;
			}
			.ui-tabs-nav a{
				display:block;
				float:left;
				padding: 5px;
				margin:5px 0 0 0;
				text-decoration:none;
				}
			.ui-tabs-nav .ui-tabs-selected a{
				background: #f9f9f9;
				border: 1px solid #dfdfdf;
				border-bottom:0;
				color: #333;
				margin-bottom: -1px;
				-moz-border-radius: 3px 3px 0px 0px;
				-webkit-border-radius: 3px 3px 0px 0px;
				border-radius: 3px 3px 0px 0px; 
			}
		</style>
	<?php 
}
add_action('admin_head', 'custom_styles');

Please note: I have only tested this in Firefox and Chrome. There may be CSS issues with Internet Explorer. If you run into any difficulties setting this up, feel free to speak up in the comments.

Posted November 1, 2011 by Alex Mansfield

4 responses to “WordPress Taxonomy Tabs”

  1. Tineke inTOWN says:

    Thanks Alex, that was very helpful …

  2. Philip says:

    Your jQuery only affects the stock category taxonomy as new taxonomies take the id in the form of either:

    [customtaxslug]div
    tagsdiv-[customtaxslug]

Leave a Reply

Your email address will not be published. Required fields are marked *

  • PublishedNovember 1, 2011
  • Posted InWordpress
  • DifficultyIntermediate