CMB2 Metabox Inline Multicheck Checkbox Tutorial

One of my latest repeated challenges was to add checkboxes again to the backend of WordPress. Having done it before, I knew what was expected but since it’s been awhile since I last coded metaboxes I had to look up some notes, blog posts and new software to use. I used to use Advanced Custom Fields, which is an amazing plugin. But, I think it’s an overkill for the functionality we need on this particular site. I needed something that would be able to load fast, has a small library and not too much UI. Also, I wanted to be able to inject it into WordPress as a dependency and not a plugin.

I found CMB2 for that, it had it all: calendar, text, email, checkbox, dropdown and more fields. So, I got to work. First by including it using composer and a “composer.json” file. I will discuss how that is done at a later period.

Generating a Multicheck Checkbox in the Admin of a Post Type

I started by using the following code in a dedicated php file to create my metaboxes. This one is for a hotelier to include the services they offer at each hotel. But it could really be anything (as always). You can just try it out and change the Metabox Title, post_type and ID to what you want. Here are some examples on GitHub to get your started: example-functions.php Or check out this Snippet Lirary.

add_action( 'cmb2_init', 'cmb2_add_metabox' );
function cmb2_add_metabox() {

	$prefix = '_cmb_';

	$cmb = new_cmb2_box( array(
		'id'           => $prefix . 'metabox',
		'title'        => __( 'Metabox Title', 'cmb2' ),
		'object_types' => array( 'post_type' ),
		'context'      => 'normal',
		'priority'     => 'high',
	) );

	$cmb->add_field( array(
		'id' => $prefix . 'hotel_amenities',
		'type' => 'multicheck_inline',
		'default' => '0',
		'options' => array(
			'Dry cleaning/laundry service ' => __( 'dry cleaning/laundry service ', 'cmb2' ),
			'24-hour front desk ' => __( '24-hour front desk ', 'cmb2' ),
			'Facilities for disabled guests' => __( 'facilities for disabled', 'cmb2' ),
			'airport_transportation' => __( 'airport transportation', 'cmb2' ),
		),
	) );

}

Generate the Checbox

To create the checkbox we just use $cmb->add_field and type out the type multicheck_inline with some options. That was really straightforward and easy. I could immediately understand why people like CMB2.

Here is an image with the result on the backend.

Unserialize the Checkbox data

This is something I’m still experimenting with. If anyone can help me explain how unserialze works and how I can use it that would be awesome.

$custom_checkbox_group = unserialize($post_meta_data['_cmb_hotel_amenities'][0]);

echo $custom_checkbox_group['_cmb_hotel_amenities'][0];

Just a quick check on how Post Meta is being stored

Paste this code to test and seee on the front-end how the data is being stored into an array. I think unserialize has something to do with how our _cmb_hotel_amenities data is stored.

$test = get_post_meta( $post->ID, $custom_checkbox_group, true ) . '<br>';
echo '<pre>';
print_r($test);
echo '</pre>';

You can show it on the front-end like this and start playing around with the values

A foreach loop will go through each value and basically show it on the front-end.

<?php if ( $amenities = get_post_meta( get_the_ID(), '_cmb_hotel_amenities', true ) ) { 


?>
		<?php foreach ( $amenities as $amenity ) { ?>
			<?php echo $amenity; ?>
		<?php } ?>
<?php } ?>

You can add the following code (below) to add html to the data.

		
//remove spaces just in case
$meta = str_replace( '|', '<li>', $meta );
 
//split strings into array on commas
$meta = implode( '</li>', $meta );

echo $meta;
?>

Basically this goes through each item in the loop and shows each as a list item. Quite useful.

Another way to process the data on the front-end

In the end I went with the following way to show the data.

<h6 class="widget-title">Amenities</h6>
<ul>
<?php 
//get meta value as string
$meta = get_post_meta( get_the_ID(), '_cmb_hotel_amenities', true );
 
foreach ( $metas as $metas ) { 
	?>
	<li>
		<?php
			echo $metas; 
		?>
	<li>
	<?php
}