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

This is not the complete code. You need to download some portion of this from the Github link above.

 

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

5 Comments

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 2 years ago Reply


  • This is code is not working

    hasan 11 months ago Reply


  • thanks for your tutorial
    but throw an error : Call to undefined function new_cmb2_box() …

    webdeveloper 10 months ago Reply


  • Your code is not working. So many errors in your file. Remove those code from here.

    Naf Rifat 3 months ago Reply


    • Parameshwar Roy Proy 150x150 - How To Create CMB2 Tabs

      Try it now, it should be working,

      P. Roy 2 months ago Reply


Leave A Reply