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.”

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.