Field Types - krunchness/CMB2 GitHub Wiki

$cmb->add_field( array(
	'name' => 'Test Title',
	'desc' => 'This is a title description',
	'type' => 'title',
	'id'   => 'wiki_test_title'
) );

$cmb->add_field( array(
	'name'    => 'Test Text',
	'desc'    => 'field description (optional)',
	'default' => 'standard value (optional)',
	'id'      => 'wiki_test_text',
	'type'    => 'text',
) );

$cmb->add_field( array(
	'name'    => 'Test Text Small',
	'desc'    => 'field description (optional)',
	'default' => 'standard value (optional)',
	'id'      => 'wiki_test_textsmall',
	'type'    => 'text_small'
) );

$cmb->add_field( array(
	'name'    => 'Test Text Medium',
	'desc'    => 'field description (optional)',
	'default' => 'standard value (optional)',
	'id'      => 'wiki_test_textmedium',
	'type'    => 'text_medium'
) );

$cmb->add_field( array(
	'name' => 'Test Text Email',
	'id'   => 'wiki_test_email',
	'type' => 'text_email',
) );

$cmb->add_field( array(
	'name' => __( 'Website URL', 'cmb2' ),
	'id'   => 'wiki_test_facebookurl',
	'type' => 'text_url',
	// 'protocols' => array( 'http', 'https', 'ftp', 'ftps', 'mailto', 'news', 'irc', 'gopher', 'nntp', 'feed', 'telnet' ), // Array of allowed protocols
) );

$cmb->add_field( array(
	'name' => 'Test Money',
	'desc' => 'field description (optional)',
	'id' => 'wiki_test_textmoney',
	'type' => 'text_money',
	// 'before_field' => '£', // Replaces default '$'
) );

$cmb->add_field( array(
	'name' => 'Test Text Area',
	'desc' => 'field description (optional)',
	'default' => 'standard value (optional)',
	'id' => 'wiki_test_textarea',
	'type' => 'textarea'
) );

$cmb->add_field( array(
	'name' => 'Test Text Area Small',
	'desc' => 'field description (optional)',
	'default' => 'standard value (optional)',
	'id' => 'wiki_test_textareasmall',
	'type' => 'textarea_small'
) );

$cmb->add_field( array(
	'name' => 'Test Text Area Code',
	'desc' => 'field description (optional)',
	'default' => 'standard value (optional)',
	'id' => 'wiki_test_textareacode',
	'type' => 'textarea_code'
) );

// Make code be read-only css
$cmb->add_field( array(
	// other field config ...
	'type' => 'textarea_code'
	'attributes' => array(
		'readonly' => 'readonly',
		'data-codeeditor' => json_encode( array(
			'codemirror' => array(
				'mode' => 'css',
				'readOnly' => 'nocursor',
			),
		) ),
	),
) );

$cmb->add_field( array(
	'name' => 'Test Time Picker',
	'id' => 'wiki_test_texttime',
	'type' => 'text_time'
	// Override default time-picker attributes:
	// 'attributes' => array(
	// 	'data-timepicker' => json_encode( array(
	// 		'timeOnlyTitle' => __( 'Choose your Time', 'cmb2' ),
	// 		'timeFormat' => 'HH:mm',
	// 		'stepMinute' => 1, // 1 minute increments instead of the default 5
	// 	) ),
	// ),
	// 'time_format' => 'h:i:s A',
) );

$cmb->add_field( array(
	'name' => 'Time zone',
	'id'   => 'wiki_test_timezone',
	'type' => 'select_timezone',
) );

$cmb->add_field( array(
	'name' => 'Test Date Picker',
	'id'   => 'wiki_test_textdate_timestamp',
	'type' => 'text_date',
	// 'timezone_meta_key' => 'wiki_test_timezone',
	// 'date_format' => 'l jS \of F Y',
) );

$cmb_demo->add_field( array(
	'name' => __( 'Test Date Picker', 'cmb2' ),
	'desc' => __( 'field description (optional)', 'cmb2' ),
	'id'   => '_yourprefix_demo_textdate',
	'type' => 'text_date',
	'attributes' => array(
		// CMB2 checks for datepicker override data here:
		'data-datepicker' => json_encode( array(
			// dayNames: http://api.jqueryui.com/datepicker/#option-dayNames
			'dayNames' => array( 'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi' ),
			// monthNamesShort: http://api.jqueryui.com/datepicker/#option-monthNamesShort
			'monthNamesShort' => explode( ',', 'En,Feb,Mar,Abr,May,Jun,Jul,Ago,Sep,Oct,Nov,Dic' ),
			// yearRange: http://api.jqueryui.com/datepicker/#option-yearRange
			// and http://stackoverflow.com/a/13865256/1883421
			'yearRange' => '-100:+0',
			// Get 1990 through 10 years from now.
			// 'yearRange' => '1990:'. ( date( 'Y' ) + 10 ),
		) ),
	),
) );

$cmb->add_field( array(
	'name' => 'Test Date Picker (UNIX timestamp)',
	'id'   => 'wiki_test_textdate_timestamp',
	'type' => 'text_date_timestamp',
	// 'timezone_meta_key' => 'wiki_test_timezone',
	// 'date_format' => 'l jS \of F Y',
) );

$cmb->add_field( array(
	'name' => 'Test Date/Time Picker Combo (UNIX timestamp)',
	'id'   => 'wiki_test_datetime_timestamp',
	'type' => 'text_datetime_timestamp',
) );

$cmb->add_field( array(
	'name' => 'Test Date/Time Picker/Time zone Combo (serialized DateTime object)',
	'id'   => 'wiki_test_datetime_timestamp_timezone',
	'type' => 'text_datetime_timestamp_timezone',
) );

$cmb->add_field( array(
	'id'   => 'wiki_test_hidden',
	'type' => 'hidden',
) );

$cmb->add_field( array(
	'name'    => 'Test Color Picker',
	'id'      => 'wiki_test_colorpicker',
	'type'    => 'colorpicker',
	'default' => '#ffffff',
	// 'options' => array(
	// 	'alpha' => true, // Make this a rgba color picker.
	// ),
) );

$cmb->add_field( array(
    'name'    => 'Test Color Picker',
    'id'      => 'wiki_test_colorpicker',
    'type'    => 'colorpicker',
    'default' => '#ffffff',
    'attributes' => array(
        'data-colorpicker' => json_encode( array(
            // Iris Options set here as values in the 'data-colorpicker' array
            'palettes' => array( '#3dd0cc', '#ff834c', '#4fa2c0', '#0bc991', ),
        ) ),
    ),
) );

$cmb->add_field( array(
	'name' => 'Test Checkbox',
	'desc' => 'field description (optional)',
	'id'   => 'wiki_test_checkbox',
	'type' => 'checkbox',
) );

<?php if ( get_post_meta( get_the_ID(), 'wiki_test_checkbox', 1 ) ) : ?>
	<div>Some HTML</div>
<?php endif; ?>

$cmb->add_field( array(
	'name'    => 'Test Multi Checkbox',
	'desc'    => 'field description (optional)',
	'id'      => 'wiki_test_multicheckbox',
	'type'    => 'multicheck',
	'options' => array(
		'check1' => 'Check One',
		'check2' => 'Check Two',
		'check3' => 'Check Three',
	),
) );

$cmb->add_field( array(
	'name'             => 'Test Radio',
	'id'               => 'wiki_test_radio',
	'type'             => 'radio',
	'show_option_none' => true,
	'options'          => array(
		'standard' => __( 'Option One', 'cmb2' ),
		'custom'   => __( 'Option Two', 'cmb2' ),
		'none'     => __( 'Option Three', 'cmb2' ),
	),
) );

$cmb->add_field( array(
	'name'    => 'Test Radio inline',
	'id'      => 'wiki_test_radio_inline',
	'type'    => 'radio_inline',
	'options' => array(
		'standard' => __( 'Option One', 'cmb2' ),
		'custom'   => __( 'Option Two', 'cmb2' ),
		'none'     => __( 'Option Three', 'cmb2' ),
	),
	'default' => 'standard',
) );

$cmb->add_field( array(
	'name'             => 'Test Select',
	'desc'             => 'Select an option',
	'id'               => 'wiki_test_select',
	'type'             => 'select',
	'show_option_none' => true,
	'default'          => 'custom',
	'options'          => array(
		'standard' => __( 'Option One', 'cmb2' ),
		'custom'   => __( 'Option Two', 'cmb2' ),
		'none'     => __( 'Option Three', 'cmb2' ),
	),
) );

	// in the field array..
	'options_cb' => 'show_cat_or_dog_options',

// Callback function
function show_cat_or_dog_options( $field ) {

	if ( has_tag( 'cats', $field->object_id ) ) {
		return array(
			'tabby'   => __( 'Tabby', 'cmb2' ),
			'siamese' => __( 'Siamese', 'cmb2' ),
			'calico'  => __( 'Calico', 'cmb2' ),
		);
	} else {
		return array(
			'german-shepherd' => __( 'German Shepherd', 'cmb2' ),
			'bulldog'         => __( 'Bulldog', 'cmb2' ),
			'poodle'          => __( 'Poodle', 'cmb2' ),
		);
	}
}

$select_value = get_post_meta( get_the_ID(), 'wiki_test_select', true ) );

// If (Option 2 True)
if ( 'custom' === $select_value ) {
	// some PHP code
} else {
	// some other PHP code
}

$cmb->add_field( array(
	'name'           => 'Test Taxonomy Radio',
	'desc'           => 'Description Goes Here',
	'id'             => 'wiki_test_taxonomy_radio',
	'taxonomy'       => '', // Enter Taxonomy Slug
	'type'           => 'taxonomy_radio',
	// Optional :
	'text'           => array(
		'no_terms_text' => 'Sorry, no terms could be found.' // Change default text. Default: "No terms"
	),
	'remove_default' => 'true', // Removes the default metabox provided by WP core.
	// Optionally override the args sent to the WordPress get_terms function.
	'query_args' => array(
		// 'orderby' => 'slug',
		// 'hide_empty' => true,
	),
) );

$cmb->add_field( array(
	'name'           => 'Test Taxonomy Select',
	'desc'           => 'Description Goes Here',
	'id'             => 'wiki_test_taxonomy_select',
	'taxonomy'       => 'category', //Enter Taxonomy Slug
	'type'           => 'taxonomy_select',
	'remove_default' => 'true', // Removes the default metabox provided by WP core.
	// Optionally override the args sent to the WordPress get_terms function.
	'query_args' => array(
		// 'orderby' => 'slug',
		// 'hide_empty' => true,
	),
) );

$cmb->add_field( array(
	'name'           => 'Test Taxonomy Multicheck',
	'desc'           => 'Description Goes Here',
	'id'             => 'wiki_test_taxonomy_multicheck',
	'taxonomy'       => '', //Enter Taxonomy Slug
	'type'           => 'taxonomy_multicheck',
	// Optional :
	'text'           => array(
		'no_terms_text' => 'Sorry, no terms could be found.' // Change default text. Default: "No terms"
	),
	'remove_default' => 'true', // Removes the default metabox provided by WP core.
	// Optionally override the args sent to the WordPress get_terms function.
	'query_args' => array(
		// 'orderby' => 'slug',
		// 'hide_empty' => true,
	),
) );

$cmb->add_field( array(
	'name'    => 'Test wysiwyg',
	'desc'    => 'field description (optional)',
	'id'      => 'wiki_test_wysiwyg',
	'type'    => 'wysiwyg',
	'options' => array(),
) );

<?php echo wpautop( get_post_meta( get_the_ID(), 'wiki_test_wysiwyg', true ) ); ?>

function yourprefix_get_wysiwyg_output( $meta_key, $post_id = 0 ) {
	global $wp_embed;

	$post_id = $post_id ? $post_id : get_the_id();

	$content = get_post_meta( $post_id, $meta_key, 1 );
	$content = $wp_embed->autoembed( $content );
	$content = $wp_embed->run_shortcode( $content );
	$content = wpautop( $content );
	$content = do_shortcode( $content );

	return $content;
}

...

echo yourprefix_get_wysiwyg_output( 'wiki_test_wysiwyg', get_the_ID() );

array(
	'name'    => 'Test wysiwyg',
	'desc'    => 'field description (optional)',
	'id'      => 'wiki_test_wysiwyg',
	'type'    => 'wysiwyg',
	'options' => array(
	    'wpautop' => true, // use wpautop?
	    'media_buttons' => true, // show insert/upload button(s)
	    'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
	    'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
	    'tabindex' => '',
	    'editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the `<style>` tags, can use "scoped".
	    'editor_class' => '', // add extra class(es) to the editor textarea
	    'teeny' => false, // output the minimal editor config used in Press This
	    'dfw' => false, // replace the default fullscreen with DFW (needs specific css)
	    'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
	    'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
	),
),

$cmb->add_field( array(
	'name'    => 'Test File',
	'desc'    => 'Upload an image or enter an URL.',
	'id'      => 'wiki_test_image',
	'type'    => 'file',
	// Optional:
	'options' => array(
		'url' => false, // Hide the text input for the url
	),
	'text'    => array(
		'add_upload_file_text' => 'Add File' // Change upload button text. Default: "Add or Upload File"
	),
	// query_args are passed to wp.media's library query.
	'query_args' => array(
		'type' => 'application/pdf', // Make library only display PDFs.
		// Or only allow gif, jpg, or png images
		// 'type' => array(
		// 	'image/gif',
		// 	'image/jpeg',
		// 	'image/png',
		// ),
	),
	'preview_size' => 'large', // Image size to use when previewing in the admin.
) );

$image = wp_get_attachment_image( get_post_meta( get_the_ID(), 'wiki_test_image_id', 1 ), 'medium' );

$cmb->add_field( array(
	'name' => 'Test File List',
	'desc' => '',
	'id'   => 'wiki_test_file_list',
	'type' => 'file_list',
	// 'preview_size' => array( 100, 100 ), // Default: array( 50, 50 )
	// 'query_args' => array( 'type' => 'image' ), // Only images attachment
	// Optional, override default text strings
	'text' => array(
		'add_upload_files_text' => 'Replacement', // default: "Add or Upload Files"
		'remove_image_text' => 'Replacement', // default: "Remove Image"
		'file_text' => 'Replacement', // default: "File:"
		'file_download_text' => 'Replacement', // default: "Download"
		'remove_text' => 'Replacement', // default: "Remove"
	),
) );

/**
 * Sample template tag function for outputting a cmb2 file_list
 *
 * @param  string  $file_list_meta_id The field meta id. ('wiki_test_file_list')
 * @param  string  $img_size           Size of image to show
 */
function cmb2_output_file_list( $file_list_meta_id, $img_size = 'medium' ) {

	// Get the list of files
	$files = get_post_meta( get_the_ID(), $file_list_meta_id, 1 );

	echo '<div class="file-list-wrap">';
	// Loop through them and output an image
	foreach ( (array) $files as $attachment_id => $attachment_url ) {
		echo '<div class="file-list-image">';
		echo wp_get_attachment_image( $attachment_id, $img_size );
		echo '</div>';
	}
	echo '</div>';
}

<?php cmb2_output_file_list( 'wiki_test_file_list', 'small' ); ?>

$cmb->add_field( array(
	'name' => 'oEmbed',
	'desc' => 'Enter a youtube, twitter, or instagram URL. Supports services listed at <a href="http://codex.wordpress.org/Embeds">http://codex.wordpress.org/Embeds</a>.',
	'id'   => 'wiki_test_embed',
	'type' => 'oembed',
) );

$url = esc_url( get_post_meta( get_the_ID(), 'wiki_test_embed', 1 ) );
echo wp_oembed_get( $url );

$group_field_id = $cmb->add_field( array(
	'id'          => 'wiki_test_repeat_group',
	'type'        => 'group',
	'description' => __( 'Generates reusable form entries', 'cmb2' ),
	// 'repeatable'  => false, // use false if you want non-repeatable group
	'options'     => array(
		'group_title'       => __( 'Entry {#}', 'cmb2' ), // since version 1.1.4, {#} gets replaced by row number
		'add_button'        => __( 'Add Another Entry', 'cmb2' ),
		'remove_button'     => __( 'Remove Entry', 'cmb2' ),
		'sortable'          => true,
		// 'closed'         => true, // true to have the groups closed by default
		// 'remove_confirm' => esc_html__( 'Are you sure you want to remove?', 'cmb2' ), // Performs confirmation before removing group.
	),
) );

// Id's for group's fields only need to be unique for the group. Prefix is not needed.
$cmb->add_group_field( $group_field_id, array(
	'name' => 'Entry Title',
	'id'   => 'title',
	'type' => 'text',
	// 'repeatable' => true, // Repeatable fields are supported w/in repeatable groups (for most types)
) );

$cmb->add_group_field( $group_field_id, array(
	'name' => 'Description',
	'description' => 'Write a short description for this entry',
	'id'   => 'description',
	'type' => 'textarea_small',
) );

$cmb->add_group_field( $group_field_id, array(
	'name' => 'Entry Image',
	'id'   => 'image',
	'type' => 'file',
) );

$cmb->add_group_field( $group_field_id, array(
	'name' => 'Image Caption',
	'id'   => 'image_caption',
	'type' => 'text',
) );

$entries = get_post_meta( get_the_ID(), 'wiki_test_repeat_group', true );

foreach ( (array) $entries as $key => $entry ) {

	$img = $title = $desc = $caption = '';

	if ( isset( $entry['title'] ) ) {
		$title = esc_html( $entry['title'] );
	}

	if ( isset( $entry['description'] ) ) {
		$desc = wpautop( $entry['description'] );
	}

	if ( isset( $entry['image_id'] ) ) {
		$img = wp_get_attachment_image( $entry['image_id'], 'share-pick', null, array(
			'class' => 'thumb',
		) );
	}

	$caption = isset( $entry['image_caption'] ) ? wpautop( $entry['image_caption'] ) : '';

	// Do something with the data
}

// Or get just the title from the first group.
$first_entry_title = '';
if ( isset( $entries[0]['title'] ) ) {
	$first_entry_title = esc_html( $entries[0]['title'] );
}`