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'
		)
	);
}

Important Note: In future versions, the plugin will automatically arrange the tabs together without requiring each field to be in order based on tabs, however for now, it's important to (at minimum) keep all your tab fields together in the order that you want them to show up. Not doing so will result in some funky HTML markup and may/may not even work.