Code Monkey home page Code Monkey logo

cmb2-tab's Introduction

CMB2-Tab

CMB2 Tab. Ready to use with a theme

Use

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

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

Screenshots

Image

Tutorial on how to integrate CMB2 Tab in to a WordPress theme

https://www.proy.info/how-to-create-cmb2-tabs/

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.