Tab | Xbox Framework

There are two methods for creating tabs.

add_main_tab: It should only be used once and immediately after the metabox has been created.
add_tab : You can add as many tabs as you want.

Creating the main tab:

The basic structure to create tabs in the following:


add_action( 'xbox_init', 'my_metabox');
function my_metabox(){
	$options = array(
		'id' => 'metabox-id',
		'title' => 'Metabox',
		'layout' => 'boxed',
		'header' => array(
			'desc' => 'Custom description for Metabox'
		)
	);
	$xbox = xbox_new_metabox( $options );

	$xbox->add_main_tab(array(
		'id' => 'main-tab',
		'items' => array(
			'tab-item-logo' => 'Logo',
			'tab-item-header' => 'Header',
		)
	));
		$xbox->open_tab_item('tab-item-logo');
			//Add fields
		$xbox->close_tab_item('tab-item-logo');

		$xbox->open_tab_item('tab-item-header');
			//Add fields
		$xbox->close_tab_item('tab-item-header');

	$xbox->close_tab('main-tab');
}

add_action( 'xbox_init', 'my_metabox');

function my_metabox(){

$options = array(

'id' => 'metabox-id',

'title' => 'Metabox',

'layout' => 'boxed',

'header' => array(

'desc' => 'Custom description for Metabox'

)

);

$xbox = xbox_new_metabox( $options );

$xbox->add_main_tab(array(

'id' => 'main-tab',

'items' => array(

'tab-item-logo' => 'Logo',

'tab-item-header' => 'Header',

)

));

$xbox->open_tab_item('tab-item-logo');

//Add fields

$xbox->close_tab_item('tab-item-logo');

$xbox->open_tab_item('tab-item-header');

//Add fields

$xbox->close_tab_item('tab-item-header');

$xbox->close_tab('main-tab');

}

Result:

*It is important that you follow the order and names of each tab item.

Creating tabs.

You can add tabs within the main tab.


$xbox->add_main_tab(array(
	'id' => 'main-tab',
	'items' => array(
		'tab-item-logo' => 'Logo',
		'tab-item-header' => 'Header',
	)
));
	$xbox->open_tab_item('tab-item-logo');

		$xbox->add_tab(array(
			'id' => 'custom-tab',
			'items' => array(
				'tab-item-general' => 'General',
				'tab-item-advanced' => 'Advanced',
			)
		));
			$xbox->open_tab_item('tab-item-general');
				$xbox->add_field( array(
					'id' => 'width',
					'name' => 'Width',
					'type' => 'number',
				));
			$xbox->close_tab_item('tab-item-general');

			$xbox->open_tab_item('tab-item-advanced');
				//Add fields
			$xbox->close_tab_item('tab-item-advanced');

		$xbox->close_tab('custom-tab');

	$xbox->close_tab_item('tab-item-logo');

	$xbox->open_tab_item('tab-item-header');
		//Add fields
	$xbox->close_tab_item('tab-item-header');

$xbox->close_tab('main-tab');

$xbox->add_main_tab(array(

'id' => 'main-tab',

'items' => array(

'tab-item-logo' => 'Logo',

'tab-item-header' => 'Header',

)

));

$xbox->open_tab_item('tab-item-logo');

$xbox->add_tab(array(

'id' => 'custom-tab',

'items' => array(

'tab-item-general' => 'General',

'tab-item-advanced' => 'Advanced',

)

));

$xbox->open_tab_item('tab-item-general');

$xbox->add_field( array(

'id' => 'width',

'name' => 'Width',

'type' => 'number',

));

$xbox->close_tab_item('tab-item-general');

$xbox->open_tab_item('tab-item-advanced');

//Add fields

$xbox->close_tab_item('tab-item-advanced');

$xbox->close_tab('custom-tab');

$xbox->close_tab_item('tab-item-logo');

$xbox->open_tab_item('tab-item-header');

//Add fields

$xbox->close_tab_item('tab-item-header');

$xbox->close_tab('main-tab');

Result:

Follow the same structure to create as many tabs as you need in your project.

It is also possible to add icons to each item tab.


$xbox->add_main_tab( array(
		'name' => 'Main tab',
		'id' => 'main-tab',
		'items' => array(
			'logo' => '<i class="xbox-icon xbox-icon-image"></i>Logo',
			'header' => '<i class="xbox-icon xbox-icon-arrow-up"></i>Header',
			'footer' => '<i class="xbox-icon xbox-icon-arrow-down"></i>Footer',
			'sidebar' => '<i class="xbox-icon xbox-icon-list-alt"></i>Sidebar',
			'responsive' => '<i class="xbox-icon xbox-icon-arrows-h"></i>Responsive',
			'colors' => '<i class="xbox-icon xbox-icon-paint-brush"></i>Colors',
			'typography' => '<i class="xbox-icon xbox-icon-font"></i>Typography',
			'portfolio' => '<i class="xbox-icon xbox-icon-th"></i>Portfolio',
			'e-commerce' => '<i class="xbox-icon xbox-icon-shopping-cart"></i>E-Commerce',
			'extra' => '<i class="xbox-icon xbox-icon-cogs"></i>Extra',
			'import' => '<i class="xbox-icon xbox-icon-refresh"></i>Import/Export',
		),
	));

		$xbox->open_tab_item('logo');


//Please add the missing code

$xbox->add_main_tab( array(

'name' => 'Main tab',

'id' => 'main-tab',

'items' => array(

'logo' => 'Logo',

'header' => 'Header',

'footer' => 'Footer',

'sidebar' => 'Sidebar',

'responsive' => 'Responsive',

'colors' => 'Colors',

'typography' => 'Typography',

'portfolio' => 'Portfolio',

'e-commerce' => 'E-Commerce',

'extra' => 'Extra',

'import' => 'Import/Export',

));

$xbox->open_tab_item('logo');

//Please add the missing code

Result:

Creating the main tab:

Creating tabs.

Documentation Menu