├── .gitignore ├── screenshots ├── metabox-vertical.png ├── metabox-horizontal.png ├── options-page-vertical.png └── options-page-horizontal.png ├── assets ├── js │ └── cmb2-tabs.js └── css │ └── cmb2-tabs.css ├── autoloader.php ├── plugin.php ├── inc ├── assets.class.php └── cmb2-tabs.class.php ├── LICENSE.md ├── example.php └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | -------------------------------------------------------------------------------- /screenshots/metabox-vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeadSoftInc/cmb2-tabs/HEAD/screenshots/metabox-vertical.png -------------------------------------------------------------------------------- /screenshots/metabox-horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeadSoftInc/cmb2-tabs/HEAD/screenshots/metabox-horizontal.png -------------------------------------------------------------------------------- /screenshots/options-page-vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeadSoftInc/cmb2-tabs/HEAD/screenshots/options-page-vertical.png -------------------------------------------------------------------------------- /screenshots/options-page-horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeadSoftInc/cmb2-tabs/HEAD/screenshots/options-page-horizontal.png -------------------------------------------------------------------------------- /assets/js/cmb2-tabs.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | $(document).ready(function () { 3 | // init jQuery UI Tabs 4 | setTimeout(function () { 5 | $( ".dtheme-cmb2-tabs" ).tabs(); 6 | }); 7 | }); 8 | })(jQuery); 9 | 10 | jQuery.noConflict(); -------------------------------------------------------------------------------- /autoloader.php: -------------------------------------------------------------------------------- 1 | setting = $field_object->args( 'tabs' ); 36 | $this->object_id = $object_id; 37 | 38 | // Set layout 39 | $layout = empty( $this->setting['layout'] ) ? 'ui-tabs-horizontal' : "ui-tabs-{$this->setting['layout']}"; 40 | $default_data = version_compare( CMB2_VERSION, '2.2.2', '>=' ) ? array( 41 | 'class' => "dtheme-cmb2-tabs $layout", 42 | ) : $field_type_object->parse_args( $field_object->data_args(), 'tabs', array( 43 | 'class' => "dtheme-cmb2-tabs $layout", 44 | ) ); 45 | 46 | // Render field 47 | echo sprintf( '
%s
', $field_type_object->concat_attrs( $default_data, array( 48 | 'value', 49 | 'name', 50 | 'type' 51 | ) ), $this->get_tabs() ); 52 | } 53 | 54 | 55 | /** 56 | * Render tabs 57 | * 58 | * @return string 59 | */ 60 | public function get_tabs() { 61 | ob_start(); 62 | ?> 63 | 64 | 69 | 70 | setting['tabs'] as $key => $tab ): ?> 71 |
72 | render_fields( $this->setting['config'], $tab['fields'], $this->object_id ); 75 | ?> 76 |
77 | $fields ) ); 93 | $CMB2 = new \CMB2( $setting_fields, $object_id ); 94 | 95 | foreach ( $fields as $key_field => $field ) { 96 | if ( $CMB2->is_options_page_mb() ) { 97 | $CMB2->object_type( $args['object_type'] ); 98 | } 99 | // Cmb2 render field 100 | $CMB2->render_field( $field ); 101 | } 102 | } 103 | 104 | 105 | /** 106 | * Hook: Save field values 107 | * 108 | * @param $override_value 109 | * @param $value 110 | * @param $post_id 111 | * @param $data 112 | */ 113 | public static function save( $override_value, $value, $post_id, $data ) { 114 | foreach ( $data['tabs']['tabs'] as $tab ) { 115 | $setting_fields = array_merge( $data['tabs']['config'], array( 'fields' => $tab['fields'] ) ); 116 | $CMB2 = new \CMB2( $setting_fields, $post_id ); 117 | 118 | if ( $CMB2->is_options_page_mb() ) { 119 | $cmb2_options = cmb2_options( $post_id ); 120 | $id_fields = array_map( function( $field ) { 121 | return $field['id']; 122 | }, $tab['fields'] ); 123 | 124 | foreach ( $_POST as $key => $value ) { 125 | if ( array_search( $key, $id_fields ) !== false ) { 126 | $cmb2_options->update( $key, $value ); 127 | } 128 | } 129 | } else { 130 | $CMB2->save_fields(); 131 | } 132 | } 133 | } 134 | 135 | } -------------------------------------------------------------------------------- /assets/css/cmb2-tabs.css: -------------------------------------------------------------------------------- 1 | .ui-tabs .inside:after, .ui-tabs .ui-tabs-nav:after, .ui-tabs:after { 2 | clear: both 3 | } 4 | 5 | .ui-tabs .inside:after, .ui-tabs .ui-tabs-nav:after, .ui-tabs-vertical .cmb2-wrap .cmb-row:after, .ui-tabs:after { 6 | content: ' '; 7 | display: block 8 | } 9 | 10 | div.cmb-type-tabs { 11 | padding: 0 !important; 12 | margin: -6px -12px -12px !important 13 | } 14 | 15 | .ui-tabs { 16 | position: relative; 17 | background-color: #F7F7F7; 18 | padding-top: 10px 19 | } 20 | 21 | .cmb2-options-page div.cmb-type-tabs { 22 | padding: 0 !important; 23 | margin: 0 !important 24 | } 25 | 26 | .cmb2-options-page .ui-tabs { 27 | margin: 0 -10px; 28 | border: 1px solid #e5e5e5; 29 | -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .04); 30 | box-shadow: 0 1px 1px rgba(0, 0, 0, .04) 31 | } 32 | 33 | .ui-tabs h2.hndle { 34 | background: #fff 35 | } 36 | 37 | .ui-tabs .ui-tabs-nav { 38 | margin: 6px 0 0 10px 39 | } 40 | 41 | .ui-tabs .ui-tabs-nav li { 42 | list-style: none; 43 | float: left; 44 | position: relative; 45 | top: 0; 46 | margin: 1px .2em 0 0; 47 | border-bottom-width: 0; 48 | padding: 0; 49 | white-space: nowrap 50 | } 51 | 52 | .ui-tabs .ui-tabs-nav li a { 53 | display: block; 54 | text-decoration: none; 55 | font-size: 14px; 56 | line-height: 18px; 57 | padding: 10px 20px !important; 58 | margin: 0 0 -1px; 59 | border: 1px solid transparent; 60 | border-top: 2px solid #f7f7f7; 61 | } 62 | 63 | .ui-tabs .ui-tabs-nav li a:focus { 64 | -webkit-box-shadow: none; 65 | box-shadow: none 66 | } 67 | 68 | .ui-tabs.ui-tabs-vertical .ui-tabs-nav .ui-tabs-anchor { 69 | float: left; 70 | /*padding: .5em 1em;*/ 71 | text-decoration: none; 72 | width: 153px; 73 | padding: 10px 0 10px 10px !important; 74 | } 75 | 76 | .ui-tabs.ui-tabs-horizontal .ui-tabs-nav .ui-tabs-anchor { 77 | float: left; 78 | padding: .5em 1em; 79 | text-decoration: none; 80 | } 81 | 82 | .ui-tabs .ui-tabs-nav li.ui-tabs-active { 83 | margin-bottom: -1px; 84 | padding-bottom: 1px; 85 | border-bottom-width: 1px 86 | } 87 | 88 | .ui-tabs .ui-tabs-nav li.ui-tabs-active a { 89 | z-index: 50 !important; 90 | background-color: #FFF; 91 | border: 1px solid #E1E1E1; 92 | border-bottom-color: #FFF; 93 | border-top: 2px solid #2EA2CC; 94 | margin: 0 0 -1px 95 | } 96 | 97 | .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, 98 | .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, 99 | .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { 100 | cursor: default; 101 | } 102 | 103 | .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { 104 | cursor: pointer 105 | } 106 | 107 | .ui-tabs .ui-tabs-panel { 108 | display: block; 109 | border: none; 110 | border-top: 1px solid #E1E1E1; 111 | margin: 0; 112 | padding: 20px; 113 | background: #fff 114 | } 115 | 116 | .ui-tabs .ui-tabs-panel h3 { 117 | border-bottom: 1px solid #e9e9e9; 118 | /*padding-bottom: 20px;*/ 119 | /*margin-bottom: 20px*/ 120 | } 121 | 122 | .ui-tabs .inside { 123 | margin: 0 !important; 124 | padding: 0 125 | } 126 | 127 | .ui-tabs-vertical { 128 | padding-top: 0 129 | } 130 | 131 | .ui-tabs-vertical .ui-tabs-nav { 132 | float: left; 133 | width: 165px; 134 | margin: 10px 0 0; 135 | position: relative; 136 | z-index: 10 137 | } 138 | 139 | .ui-tabs-vertical .ui-tabs-nav li { 140 | clear: left; 141 | width: 100%; 142 | border-bottom-width: 1px !important; 143 | border-right-width: 0 !important; 144 | margin: 0 -1px .2em 0 145 | } 146 | 147 | .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { 148 | padding-bottom: 0; 149 | padding-right: .1em; 150 | border-right-width: 1px 151 | } 152 | 153 | .ui-tabs-vertical .ui-tabs-nav li a { 154 | padding: 10px 0 10px 10px !important; 155 | border-top: none 156 | } 157 | 158 | .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active a { 159 | z-index: 50 !important; 160 | background-color: #FFF; 161 | border: 1px solid #E1E1E1; 162 | border-right-color: #FFF; 163 | border-left: 2px solid #2EA2CC; 164 | margin: 0 -1px 0 0; 165 | width: 153px; 166 | padding: 10px 0 10px 10px !important 167 | } 168 | 169 | .ui-tabs-vertical .ui-tabs-panel { 170 | min-height: 200px; 171 | border: none; 172 | border-left: 1px solid #E1E1E1; 173 | float: left; 174 | width: calc(100% - 207px) 175 | } 176 | 177 | .ui-tabs-vertical .cmb2-wrap .cmb-row { 178 | margin: 6px 0 179 | } 180 | 181 | .ui-tabs-vertical .cmb2-wrap .cmb-row:after { 182 | clear: both 183 | } 184 | 185 | .ui-tabs-vertical .cmb2-wrap .cmb-th { 186 | float: left; 187 | width: 14%; 188 | min-height: 32px; 189 | line-height: 32px; 190 | margin-right: 1% 191 | } 192 | 193 | .ui-tabs-vertical .cmb2-wrap .cmb-td { 194 | float: left; 195 | width: 85% 196 | } 197 | 198 | .ui-tabs-vertical .cmb2-wrap .cmb-td span.after_field { 199 | display: inline-block; 200 | width: 90px; 201 | font-size: 13px; 202 | padding: 0 5px 203 | } -------------------------------------------------------------------------------- /example.php: -------------------------------------------------------------------------------- 1 | 'example_tabs_metaboxes', 9 | 'title' => __( 'Example tabs', 'cmb2' ), 10 | 'object_types' => array( 'page' ), 11 | 'show_names' => true, 12 | ); 13 | 14 | // Setup meta box 15 | $cmb = new_cmb2_box( $box_options ); 16 | 17 | // Setting tabs 18 | $tabs_setting = array( 19 | 'config' => $box_options, 20 | // 'layout' => 'vertical', // Default : horizontal 21 | 'tabs' => array() 22 | ); 23 | $tabs_setting['tabs'][] = array( 24 | 'id' => 'tab1', 25 | 'title' => __( 'Tab 1', 'cmb2' ), 26 | 'fields' => array( 27 | array( 28 | 'name' => __( 'Title', 'cmb2' ), 29 | 'id' => 'header_title', 30 | 'type' => 'text' 31 | ), 32 | array( 33 | 'name' => __( 'Subtitle', 'cmb2' ), 34 | 'id' => 'header_subtitle', 35 | 'type' => 'text' 36 | ), 37 | array( 38 | 'name' => __( 'Background image', 'cmb2' ), 39 | 'id' => 'header_background', 40 | 'type' => 'file', 41 | 'options' => array( 42 | 'url' => false 43 | ) 44 | ) 45 | ) 46 | ); 47 | $tabs_setting['tabs'][] = array( 48 | 'id' => 'tab2', 49 | 'title' => __( 'Tab 2', 'cmb2' ), 50 | 'fields' => array( 51 | array( 52 | 'name' => __( 'Title', 'cmb2' ), 53 | 'id' => 'review_title', 54 | 'type' => 'text' 55 | ), 56 | array( 57 | 'name' => __( 'Subtitle', 'cmb2' ), 58 | 'id' => 'review_subtitle', 59 | 'type' => 'text' 60 | ), 61 | array( 62 | 'id' => 'reviews', 63 | 'type' => 'group', 64 | 'options' => array( 65 | 'group_title' => __( 'Review {#}', 'cmb2' ), 66 | 'add_button' => __( 'Add review', 'cmb2' ), 67 | 'remove_button' => __( 'Remove review', 'cmb2' ), 68 | 'sortable' => false 69 | ), 70 | 'fields' => array( 71 | array( 72 | 'name' => __( 'Author name', 'cmb2' ), 73 | 'id' => 'name', 74 | 'type' => 'text' 75 | ), 76 | array( 77 | 'name' => __( 'Author avatar', 'cmb2' ), 78 | 'id' => 'avatar', 79 | 'type' => 'file', 80 | 'options' => array( 81 | 'url' => false 82 | ) 83 | ), 84 | array( 85 | 'name' => __( 'Comment', 'cmb2' ), 86 | 'id' => 'comment', 87 | 'type' => 'textarea' 88 | ) 89 | ) 90 | ) 91 | ) 92 | ); 93 | 94 | // Set tabs 95 | $cmb->add_field( array( 96 | 'id' => '__tabs', 97 | 'type' => 'tabs', 98 | 'tabs' => $tabs_setting 99 | ) ); 100 | } 101 | 102 | /* 103 | * Example options page 104 | */ 105 | add_action( 'cmb2_admin_init', 'cmbt_example_options_page_metabox' ); 106 | function cmbt_example_options_page_metabox() { 107 | $box_options = array( 108 | 'id' => 'myprefix_option_metabox', 109 | 'title' => __( 'Example tabs', 'cmb2' ), 110 | 'show_names' => true, 111 | 'object_type' => 'options-page', 112 | 'show_on' => array( 113 | // These are important, don't remove 114 | 'key' => 'options-page', 115 | 'value' => array( 'myprefix_options' ) 116 | ), 117 | ); 118 | 119 | // Setup meta box 120 | $cmb = new_cmb2_box( $box_options ); 121 | 122 | // setting tabs 123 | $tabs_setting = array( 124 | 'config' => $box_options, 125 | // 'layout' => 'vertical', // Default : horizontal 126 | 'tabs' => array() 127 | ); 128 | 129 | $tabs_setting['tabs'][] = array( 130 | 'id' => 'tab1', 131 | 'title' => __( 'Tab 1', 'cmb2' ), 132 | 'fields' => array( 133 | array( 134 | 'name' => __( 'Title', 'cmb2' ), 135 | 'id' => 'header_title', 136 | 'type' => 'text' 137 | ), 138 | array( 139 | 'name' => __( 'Subtitle', 'cmb2' ), 140 | 'id' => 'header_subtitle', 141 | 'type' => 'text' 142 | ), 143 | array( 144 | 'name' => __( 'Background image', 'cmb2' ), 145 | 'id' => 'header_background', 146 | 'type' => 'file', 147 | 'options' => array( 148 | 'url' => false 149 | ) 150 | ) 151 | ) 152 | ); 153 | $tabs_setting['tabs'][] = array( 154 | 'id' => 'tab2', 155 | 'title' => __( 'Tab 2', 'cmb2' ), 156 | 'fields' => array( 157 | array( 158 | 'name' => __( 'Title', 'cmb2' ), 159 | 'id' => 'review_title', 160 | 'type' => 'text' 161 | ), 162 | array( 163 | 'name' => __( 'Subtitle', 'cmb2' ), 164 | 'id' => 'review_subtitle', 165 | 'type' => 'text' 166 | ), 167 | array( 168 | 'id' => 'reviews', 169 | 'type' => 'group', 170 | 'options' => array( 171 | 'group_title' => __( 'Review {#}', 'cmb2' ), 172 | 'add_button' => __( 'Add review', 'cmb2' ), 173 | 'remove_button' => __( 'Remove review', 'cmb2' ), 174 | 'sortable' => false 175 | ), 176 | 'fields' => array( 177 | array( 178 | 'name' => __( 'Author name', 'cmb2' ), 179 | 'id' => 'name', 180 | 'type' => 'text' 181 | ), 182 | array( 183 | 'name' => __( 'Author avatar', 'cmb2' ), 184 | 'id' => 'avatar', 185 | 'type' => 'file', 186 | 'options' => array( 187 | 'url' => false 188 | ) 189 | ), 190 | array( 191 | 'name' => __( 'Comment', 'cmb2' ), 192 | 'id' => 'comment', 193 | 'type' => 'textarea' 194 | ) 195 | ) 196 | ) 197 | ) 198 | ); 199 | 200 | $cmb->add_field( array( 201 | 'id' => '__tabs', 202 | 'type' => 'tabs', 203 | 'tabs' => $tabs_setting 204 | ) ); 205 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cmb2-tabs 2 | 3 | Extensions the tabs to the library CMB2 4 | 5 | ### Preview 6 | ![tabs](https://github.com/dThemeStudio/cmb2-tabs/raw/master/screenshots/metabox-horizontal.png) 7 | 8 | ### Changelog 9 | 10 | * 1.2.3 Added license to the project 11 | * 1.2.2 Support vertical layout 12 | * 1.2.1 Support for custom attributes for the tabs container 13 | * 1.0.1 Added support the "options page" 14 | * 1.0.0 Init 15 | 16 | ### Example metabox 17 | 18 | ```php 19 | add_filter( 'cmb2_init', 'example_tabs_metaboxes' ); 20 | function example_tabs_metaboxes() { 21 | $box_options = array( 22 | 'id' => 'example_tabs_metaboxes', 23 | 'title' => __( 'Example tabs', 'cmb2' ), 24 | 'object_types' => array( 'page' ), 25 | 'show_names' => true, 26 | ); 27 | 28 | // Setup meta box 29 | $cmb = new_cmb2_box( $box_options ); 30 | 31 | // setting tabs 32 | $tabs_setting = array( 33 | 'config' => $box_options, 34 | // 'layout' => 'vertical', // Default : horizontal 35 | 'tabs' => array() 36 | ); 37 | $tabs_setting['tabs'][] = array( 38 | 'id' => 'tab1', 39 | 'title' => __( 'Tab 1', 'cmb2' ), 40 | 'fields' => array( 41 | array( 42 | 'name' => __( 'Title', 'cmb2' ), 43 | 'id' => 'header_title', 44 | 'type' => 'text' 45 | ), 46 | array( 47 | 'name' => __( 'Subtitle', 'cmb2' ), 48 | 'id' => 'header_subtitle', 49 | 'type' => 'text' 50 | ), 51 | array( 52 | 'name' => __( 'Background image', 'cmb2' ), 53 | 'id' => 'header_background', 54 | 'type' => 'file', 55 | 'options' => array( 56 | 'url' => false 57 | ) 58 | ) 59 | ) 60 | ); 61 | $tabs_setting['tabs'][] = array( 62 | 'id' => 'tab2', 63 | 'title' => __( 'Tab 2', 'cmb2' ), 64 | 'fields' => array( 65 | array( 66 | 'name' => __( 'Title', 'cmb2' ), 67 | 'id' => 'review_title', 68 | 'type' => 'text' 69 | ), 70 | array( 71 | 'name' => __( 'Subtitle', 'cmb2' ), 72 | 'id' => 'review_subtitle', 73 | 'type' => 'text' 74 | ), 75 | array( 76 | 'id' => 'reviews', 77 | 'type' => 'group', 78 | 'options' => array( 79 | 'group_title' => __( 'Review {#}', 'cmb2' ), 80 | 'add_button' => __( 'Add review', 'cmb2' ), 81 | 'remove_button' => __( 'Remove review', 'cmb2' ), 82 | 'sortable' => false 83 | ), 84 | 'fields' => array( 85 | array( 86 | 'name' => __( 'Author name', 'cmb2' ), 87 | 'id' => 'name', 88 | 'type' => 'text' 89 | ), 90 | array( 91 | 'name' => __( 'Author avatar', 'cmb2' ), 92 | 'id' => 'avatar', 93 | 'type' => 'file', 94 | 'options' => array( 95 | 'url' => false 96 | ) 97 | ), 98 | array( 99 | 'name' => __( 'Comment', 'cmb2' ), 100 | 'id' => 'comment', 101 | 'type' => 'textarea' 102 | ) 103 | ) 104 | ) 105 | ) 106 | ); 107 | 108 | // set tabs 109 | $cmb->add_field( array( 110 | 'id' => '__tabs', 111 | 'type' => 'tabs', 112 | 'tabs' => $tabs_setting 113 | ) ); 114 | } 115 | ``` 116 | ##### Preview 117 | ![metabox-horizontal](https://github.com/dThemeStudio/cmb2-tabs/raw/master/screenshots/metabox-horizontal.png) 118 | ![metabox-horizontal](https://github.com/dThemeStudio/cmb2-tabs/raw/master/screenshots/metabox-vertical.png) 119 | 120 | ### Example options page 121 | ```php 122 | add_action( 'cmb2_admin_init', 'example_options_page_metabox' ); 123 | function example_options_page_metabox() { 124 | $box_options = array( 125 | 'id' => 'myprefix_option_metabox', 126 | 'title' => __( 'Example tabs', 'cmb2' ), 127 | 'show_names' => true, 128 | 'object_type' => 'options-page', 129 | 'show_on' => array( 130 | // These are important, don't remove 131 | 'key' => 'options-page', 132 | 'value' => array( 'myprefix_options' ) 133 | ), 134 | ); 135 | 136 | // Setup meta box 137 | $cmb = new_cmb2_box( $box_options ); 138 | 139 | // setting tabs 140 | $tabs_setting = array( 141 | 'config' => $box_options, 142 | // 'layout' => 'vertical', // Default : horizontal 143 | 'tabs' => array() 144 | ); 145 | 146 | $tabs_setting['tabs'][] = array( 147 | 'id' => 'tab1', 148 | 'title' => __( 'Tab 1', 'cmb2' ), 149 | 'fields' => array( 150 | array( 151 | 'name' => __( 'Title', 'cmb2' ), 152 | 'id' => 'header_title', 153 | 'type' => 'text' 154 | ), 155 | array( 156 | 'name' => __( 'Subtitle', 'cmb2' ), 157 | 'id' => 'header_subtitle', 158 | 'type' => 'text' 159 | ), 160 | array( 161 | 'name' => __( 'Background image', 'cmb2' ), 162 | 'id' => 'header_background', 163 | 'type' => 'file', 164 | 'options' => array( 165 | 'url' => false 166 | ) 167 | ) 168 | ) 169 | ); 170 | $tabs_setting['tabs'][] = array( 171 | 'id' => 'tab2', 172 | 'title' => __( 'Tab 2', 'cmb2' ), 173 | 'fields' => array( 174 | array( 175 | 'name' => __( 'Title', 'cmb2' ), 176 | 'id' => 'review_title', 177 | 'type' => 'text' 178 | ), 179 | array( 180 | 'name' => __( 'Subtitle', 'cmb2' ), 181 | 'id' => 'review_subtitle', 182 | 'type' => 'text' 183 | ), 184 | array( 185 | 'id' => 'reviews', 186 | 'type' => 'group', 187 | 'options' => array( 188 | 'group_title' => __( 'Review {#}', 'cmb2' ), 189 | 'add_button' => __( 'Add review', 'cmb2' ), 190 | 'remove_button' => __( 'Remove review', 'cmb2' ), 191 | 'sortable' => false 192 | ), 193 | 'fields' => array( 194 | array( 195 | 'name' => __( 'Author name', 'cmb2' ), 196 | 'id' => 'name', 197 | 'type' => 'text' 198 | ), 199 | array( 200 | 'name' => __( 'Author avatar', 'cmb2' ), 201 | 'id' => 'avatar', 202 | 'type' => 'file', 203 | 'options' => array( 204 | 'url' => false 205 | ) 206 | ), 207 | array( 208 | 'name' => __( 'Comment', 'cmb2' ), 209 | 'id' => 'comment', 210 | 'type' => 'textarea' 211 | ) 212 | ) 213 | ) 214 | ) 215 | ); 216 | 217 | $cmb->add_field( array( 218 | 'id' => '__tabs', 219 | 'type' => 'tabs', 220 | 'tabs' => $tabs_setting 221 | ) ); 222 | } 223 | ``` 224 | 225 | ##### Preview 226 | ![options-page-horizontal](https://github.com/dThemeStudio/cmb2-tabs/raw/master/screenshots/options-page-horizontal.png) 227 | ![options-page-vertical](https://github.com/dThemeStudio/cmb2-tabs/raw/master/screenshots/options-page-vertical.png) 228 | 229 | ### License 230 | **cmb2-tabs** is an open source project that is licensed under the [MIT license](http://opensource.org/licenses/MIT). --------------------------------------------------------------------------------