Tabs

Sometimes when you have too many fields or too many meta boxes, the interface can get a bit cluttered. Use tabs to organize your fields in a fancy interface that's user friendly!

Meta box Setup

Use the "tabs" parameter in your meta box to setup the different tabs using a key => label setup. In this example, I have 3 tabs: Details, Pricing, and Shipping. The key for this array is unique to each tab group and should be in "slug" format (lowercase/no spaces/etc).

function my_metabox_callback_function($metaboxes=array()){
	$fields = apply_filters('my_metabox_field_filter', my_tabbed_fields());
	
	$metaboxes[] = array(
		'id'		=> 'my_product_metabox',
		'title'		=> 'My Product Metabox',
		'post_type'	=> array('post'),
		'fields' 	=> $fields,
		'tabs'		=> array(
			'details' => __('Details (Tab 1)', 'my-text-domain'),
			'pricing' => __('Pricing (Tab 2)', 'my-text-domain'),
			'shipping' => __('Shipping (Tab 3)', 'my-text-domain')
		),
	);
	
	return $metaboxes;
}

Fields Setup

To assign fields to a tab, use the "tab" parameter. Group tabbed fields together for best results. :)

function my_tabbed_fields(){
	return array(
		// Details Tab Fields
		array(
		 	'id'	=> 'sku',
			'title'	=> __('Sku', 'my-text-domain'),
			'tab'	=> 'details',
			'type'	=> 'text_small'
		),
		array(
		 	'id'	=> 'color',
			'title'	=> __('Color', 'my-text-domain'),
			'tab'	=> 'details'
			'type'	=> 'select',
			'options' => array(
				array('label' => __('Select One', 'my-text-domain'), 'value' => ''),
				array('label' => __('Red', 'my-text-domain'), 'value' => '#F00'),
				array('label' => __('Green', 'my-text-domain'), 'value' => '#0F0'),
				array('label' => __('Blue', 'my-text-domain'), 'value' => '#00F')
			)
		),
		
		// Pricing Tab Fields
		array(
		 	'id'	=> 'price',
			'title'	=> __('Price', 'my-text-domain'),
			'tab'	=> 'pricing',
			'type'	=> 'money'
		),
		array(
		 	'id'	=> 'sale_price',
			'title'	=> __('Sale Price', 'my-text-domain'),
			'tab'	=> 'pricing',
			'type'	=> 'money'
		),
		array(
		 	'id'	=> 'cost',
			'title'	=> __('Cost', 'my-text-domain'),
			'tab'	=> 'pricing',
			'type'	=> 'money'
		),
		
		
		// Shipping Tab Fields
		array(
		 	'id'	=> 'width',
			'title'	=> __('Width', 'my-text-domain'),
			'tab'	=> 'shipping',
			'type'	=> 'text_small',
			'after' => 'in'
		),
		array(
		 	'id'	=> 'height',
			'title'	=> __('Height', 'my-text-domain'),
			'tab'	=> 'shipping',
			'type'	=> 'text_small',
			'after' => 'in'
		),
		array(
		 	'id'	=> 'length',
			'title'	=> __('Length', 'my-text-domain'),
			'tab'	=> 'shipping',
			'type'	=> 'text_small',
			'after' => 'in'
		),
		array(
		 	'id'	=> 'weight',
			'title'	=> __('Weight', 'my-text-domain'),
			'tab'	=> 'shipping',
			'type'	=> 'text_small',
			'after' => 'lbs'
		)
	);
}