How To Create CMB2 Buttonset Field Type

CMB2 Buttonset Field Type 800x249 - How To Create CMB2 Buttonset Field Type

There are lots of built-in field types available in CMB2 that we can include in our metabox. However, while working you may look for some other type of fields. Fortunately, CMB2 comes with custom (Custom Metaboxes and Fields for WordPress) field type option so that we can add our own field type. Continuing from my previous posts on CMB2 custom metaboxes field creation, In this article I will share how to create a Buttonset field type.

Lets Create CMB2 Buttonset Field Type

just like my previous tutorial, Buttonset field also very simple to build using CMB2's field creation methods. Start by defining the field markup, you need to hook into the ‘cmb2_render_{field-type}’ action. So, our action to hook into is 'cmb2_render_buttonset'.


/* CMB2 Buttonset Field. Add the code below in a file named buttonset_metafield.php ------------- */
function cmb2_render_buttonset( $field, $escaped_value, $object_id, $object_type, $field_type_object ) {
        
    $buttonset = '<div class="cmb2-buttonset">';    
    $conditional_value =(isset($field->args['attributes']['data-conditional-value'])?'data-conditional-value="' .esc_attr($field->args['attributes']['data-conditional-value']).'"':'');
    $conditional_id =(isset($field->args['attributes']['data-conditional-id'])?' data-conditional-id="'.esc_attr($field->args['attributes']['data-conditional-id']).'"':'');
    $default_value = $field->args['attributes']['default'];  

    foreach ( $field->options() as $value => $item ) {
        $selected_input = ($value === ($escaped_value==''?$default_value:$escaped_value )) ? 'checked="checked"' : '';
        $selected_label = ($value === ($escaped_value==''?$default_value:$escaped_value )) ? ' selected' : '';        
        $buttonset .= '<input '.$conditional_value.$conditional_id.' type="radio" id="' .$field->args['_name'] . esc_attr( $value ) . '" name="' . $field->args['_name'] . '" value="' . esc_attr( $value ) . '" ' . $selected_input . ' class="cmb2-buttonset-item">
        <label class="cmb2-buttonset-label state-default'.$selected_label.'" for="' .$field->args['_name'] . esc_attr( $value ) . '"><span class="buttonset-text">' . esc_html( $item ) . '</span></label>';
    }
    
    $buttonset .= '</div>';
    $buttonset .= $field_type_object->_desc( true );
    echo $buttonset;
}add_action( 'cmb2_render_buttonset', 'cmb2_render_buttonset', 10, 5 );

Styling The Buttonset Field

Now we will style the field to look like a button set.

/* CMB2 Buttonset Field Styling. Add the code below in a file named buttonset_metafield.css ------------- */
.cmb2-buttonset{ margin-right: 20px; }
.cmb2-buttonset .state-default { background-color: #f5f5f5; background-image: none !important; border-color: #bfbfbf; border-image: none;
    border-style: solid; border-width: 1px; box-shadow: none !important; color: #707070; font-size: 13px; font-weight: normal; line-height: normal;
    overflow: visible; transition: background-image 0.1s linear 0s; vertical-align: middle;
}
.cmb2-buttonset label.cmb2-buttonset-label:nth-child(2) {border-bottom-left-radius: 4px; border-top-left-radius: 4px;}
.cmb2-buttonset label.cmb2-buttonset-label:nth-last-child(1) {border-bottom-right-radius: 4px;border-top-right-radius: 4px;}
.cmb2-buttonset .cmb2-buttonset-label { cursor: pointer; display: inline-block; font-size: 13px; line-height: normal; padding: 6px 12px; margin-left: 0; margin-right: -4px; }
.cmb2-buttonset .cmb2-buttonset-label .buttonset-text { display: block;}
.cmb2-buttonset .cmb2-buttonset-label.selected { background-color: #004a97 !important; background-image: none !important; border-color: #005077 !important;   box-shadow: none !important; color: #fff !important;}
.cmb2-buttonset .cmb2-buttonset-item { border: 0 none; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; overflow-wrap: normal !important; padding: 0; position: absolute; width: 1px; }

Enabling the sliding event for the CMB2 Buttonset Field

Now we need to use JavaScript to enable buttonset click event, using JQuery.

/* CMB2 Buttonset Event. Add the code below in a file named buttonset_metafield.js ------------- */
window.CMB2 = (function(window, document, $, undefined){
    'use strict';
    $(".cmb2-buttonset-label").click(function(){
        var parent = $(this).parents('.cmb2-buttonset');
        $('.cmb2-buttonset-label',parent).removeClass('selected');
        $(this).addClass('selected');
    });
})(window, document, jQuery);

Lets Find How we can integrate CMB2 Buttonset field in to a theme

To integrate the field in to a theme you must know "How to create custom meta boxes with CMB2"
If you know how to create custom meta boxes, then follow the codes below.

Add the following codes in you CMB2 metafields main file.

/** START --- Initialize the CMB2 Metabox & Related Classes */
function initialize_showcase_meta_box() {
	require_once('buttonset_metafield.php'); //CMB2 Buttonset Field
}
add_action('init', 'initialize_showcase_meta_box', 9999 );

/** LOAD --- Related CSS and JS */
function load_custom_cmb2_script() {
	wp_enqueue_style( 'cmb2_buttonset-css', 'buttonset_metafield.css', false, '1.0.0' ); //CMB2 Buttonset Field Styling
	wp_enqueue_script( 'cmb2_buttonset-js', 'buttonset_metafield.js' , '', '1.0.0', true );  // CMB2 Buttonset Event
} 
add_action( 'admin_enqueue_scripts', 'load_custom_cmb2_script', 20 );

Now we are ready to use CMB2 Buttonset Field

$cmb->add_field( array(
  'name'    => __( ' Position', 'cmb2' ),Title
  'id'      => $prefix . 'buttonset',
  'type'    => 'buttonset',
  'options' => array(
       "" => __("Default", 'cmb2'),
       "left" => __("Left", 'cmb2'),
       "center" => __("Center", 'cmb2'),
       "right" => __("Right", 'cmb2')           
  ),
  'default' => 'none',
) );
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

2 Comments

You can post comments in this post.


  • Thanks for this awesome post. This is really great. Exactly what I was looking for.

    James 9 months ago Reply


  • Good stuff! thanks for the tutorial. Exactly what was needed, great job 🙂

    Gray 9 months ago Reply


Leave A Reply