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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$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 |
Result: