WordPress Admin Tabs

README.md

Huh?

Believe it or not, WordPress doesn't have a fully-fleshed out common tab style for plugins or theme authors to use in metaboxes.

The style exists for categories, but it hasn't been fully adapted for the half-complete wp-tab setup. Trac ticket #17959 has a solution that not only fleshes the style but it also adds a global JavaScript file to give the wp-tab HTML some action. Until that ticket is accepted into core, this Gist adapts that code so it's available to use independently in your theme or plugin.

How?

Just enqueue the CSS and JavaScript in the admin_enqueue_scripts script hook and drop the tab HTML in a metabox. It will automatically adapt to the normal and side column widths, much like category tabs.

script.js

jQuery(document).ready( function($) {
	$('.wp-tab-bar a').click(function(event){
		event.preventDefault();
		
		// Limit effect to the container element.
		var context = $(this).closest('.wp-tab-bar').parent();
		$('.wp-tab-bar li', context).removeClass('wp-tab-active');
		$(this).closest('li').addClass('wp-tab-active');
		$('.wp-tab-panel', context).hide();
		$( $(this).attr('href'), context ).show();
	});

	// Make setting wp-tab-active optional.
	$('.wp-tab-bar').each(function(){
		if ( $('.wp-tab-active', this).length )
			$('.wp-tab-active', this).click();
		else
			$('a', this).first().click();
	});
});

style.css

#post-body ul.wp-tab-bar {
	float: left;
	width: 120px;
	text-align: right;
	/* Negative margin for the sake of those without JS: all tabs display */
	margin: 0 -120px 0 5px;
	padding: 0;
}
 
#post-body ul.wp-tab-bar li {
	padding: 8px;
}

#post-body ul.wp-tab-bar li.wp-tab-active {
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-top-right-radius: 0px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	border-top-right-radius: 0px;
}

div.wp-tab-panel-active {
	display:block;
}

div.wp-tab-panel-inactive {
 	display:none;
}

#post-body div.wp-tab-panel {
	margin: 0 5px 0 125px;
}
 
.has-right-sidebar #side-sortables .wp-tab-bar li {
	display: inline;
	line-height: 1.35em;
}

.no-js #side-sortables .wp-tab-bar li.hide-if-no-js {
 	display: none;
}

#side-sortables .wp-tab-bar a {
	text-decoration: none;
}

#side-sortables .wp-tab-bar {
	margin: 8px 0 3px;
}

#side-sortables .wp-tab-bar {
	margin-bottom: 3px;
}

#post-body .wp-tab-bar li.wp-tab-active {
	border-style: solid none solid solid;
	border-width: 1px 0 1px 1px;
	margin-right: -1px;
}

#post-body ul.wp-tab-bar {
	float: left;
	width: 120px;
	text-align: right;
	/* Negative margin for the sake of those without JS: all tabs display */
	margin: 0 -120px 0 5px;
	padding: 0;
}

#post-body ul.wp-tab-bar li {
	padding: 8px;
	display: block;
}

#post-body ul.wp-tab-bar li a {
	text-decoration: underline;
}

#post-body ul.wp-tab-bar li.wp-tab-active {
 	-webkit-border-top-left-radius: 3px;
 	-webkit-border-bottom-left-radius: 3px;
 	border-top-left-radius: 3px;
 	border-bottom-left-radius: 3px;
}

#post-body div.wp-tab-panel {
	margin: 0 5px 0 125px;
}

#post-body ul.wp-tab-bar li.wp-tab-active a {
	font-weight: bold;
	text-decoration: none;
}

tabs.html

<!-- Start tabs -->
<ul class="wp-tab-bar">
	<li class="wp-tab-active"><a href="#tabs-1">Tab 1</a></li>
	<li><a href="#tabs-2">Tab 2</a></li>
	<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div class="wp-tab-panel" id="tabs-1">
	<p>Tab 1 content</p>
</div>
<div class="wp-tab-panel" id="tabs-2" style="display: none;">
	<p>Tab 2 content</p>
</div>
<div class="wp-tab-panel" id="tabs-3" style="display: none;">
	<p>Tab 3 content</p>
</div>
<!-- End tabs -->