How To Create CMB2 Tabs

Welcome back to the new tutorial on extending CMB2 field types. This time, I will show how you can integrate TABs in your theme to create a nice holder for your meta fields.  The main code was developed by dThemeStudio which is a plugin but this tutorial was made to integrate Jquery tab in your theme to use with CMB2 meta options. To start with we need to integrate some files that hold's the markup, JS and CSS to accomplish the tab. Before that, make sure that you have gone through the previous tutorials to get ideas.

Add the following codes in your CMB2 meta fields main file. You may require adjusting the codes.

/** START --- Initialize the CMB2 Metabox & Related Classes */
function admin_scripts() {
    if (function_exists('add_thickbox')) add_thickbox();
    wp_enqueue_media();
    wp_enqueue_script('script_admin', CHANGE_THIS_PATH_TO_JS_URI.'/admin.js', array('common', 'jquery', 'media-upload', 'thickbox', 'wp-color-picker'), '', true);
}
add_action('admin_enqueue_scripts', 'admin_scripts');
function initialize_showcase_meta_box() {
	require_once('cmb2Tabs.class.php');
}
add_action('init', 'initialize_showcase_meta_box', 9999 );

/** LOAD --- Related CSS and JS */
function load_custom_cmb2_script() {
     wp_enqueue_style( 'cmb2-jui', '//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css', '', '1.0' );
	wp_enqueue_style( 'cmb2_tab-css', 'cmb2Tabs.css', false, '1.0.0' );
	wp_enqueue_script( 'cmb2_tab-js', 'cmb2Tabs.js' , array('jquery-ui-tabs'), '1.0.0', true ); //'jquery-ui-tabs' is must
} 
add_action( 'admin_enqueue_scripts', 'load_custom_cmb2_script', 20 );

How to use CMB2 Tab. For example:

$cmb2_options = array(
  'id'           => '_titlebox',
  'title'       => __( 'CMB2 Tabs Example', 'cmb2' ),
  'object_types' => array( 'page'), // Post type
  'show_names'   => true, // Show field names on the left
  'closed'     => false, // true to keep the metabox closed by default
);

// Setup meta box
$cmb2 = new_cmb2_box( $cmb2_options );

new CMB2_Tabs(); // Calling the class

$tabs_holder = array(
  'config' => $cmb_options,
  'layout' => 'vertical', // Default : horizontal
  'tabs'   => array()
);

$tabs_holder['tabs'][] = array(
  'id'     => 'tab1',
  'title'  => __( 'Example Tab 1', 'cmb2' ),
  'fields' => array(
  array(
    'name' => __( 'Set Title', 'cmb2' ),
    'id'   => 'header_title',
    'type' => 'text'
  ),
  array(
    'name' => __( 'Set Subtitle', 'cmb2' ),
    'id'   => 'header_subtitle',
    'type' => 'text'
  )
));

$tabs_holder['tabs'][] = array(
  'id'     => 'tab2',
  'title'  => __( 'Example Tab 2', 'cmb2' ),
  'fields' => array(
  array(
    'name' => __( 'Set Author name', 'cmb2' ),
    'id'   => 'name',
    'type' => 'text'
  ),
  array(
    'name'    => __( 'Set Background image', 'cmb2' ),
    'id'      => 'header_background2',
    'type'    => 'file',
    'options' => array(
      'url' => false
    )
  )
));

$cmb2->add_field( array(
  'id'   => 'tabs',
  'type' => 'tabs',
  'tabs' => $tabs_holder
));