How To Create CMB2 Tabs

CMB2 Tab meta 800x284 - 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 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
));
About This Author

My name is Parameshwar Roy (P. Roy), and I am a web developer. This is my personal blog to record my own thoughts. Though I am not a natural writer, I love to share my experiences. Hope my experiences will be useful to you…read more about me

1 Comment

You can post comments in this post.


  • Hello, thanks for sharing but unfortunately this plugin not work. I followe your tutorial, cmb2 is installed and active but return this error:

    Fatal error: Call to undefined function new_cmb2_box() in C:\wamp64\www\esperimenti\wp-content\themes\twentyseventeen\inc\example-functions.php on line 108

    Marco 3 weeks ago Reply


Leave A Reply