Journal

So there is an amazing project on GitHub that I’ve been utilizing for just about a year, Custom MetaBoxes and Fields for WordPress. It’s similar to the Advanced Custom Fields plugin, but there are some things about it I like more…one of those being that it’s not setup like a plugin and I can build it with unlimited flexibility into my client solutions.

The project is also very well supported and documented and has frequent commits, which I also like ;)

I posted a question on GitHub asking if CMB had a built-in feature to show MetaBoxes/Fields on condition, which I came to find it cannot. So, I wrote a solution for my situation and have since gotten a few emails requesting that I share the setup. So, instead of responding to these per instance, I figured I would just post the method here and refer people to it.

Note: Please forgive my jQuery…I know there is a way to simplify this, but jQuery/Javascript are not yet my strong suit….I’m working on it!

Update 3/27/13:

The jQuery and CSS portions of this walkthrough were slightly altered to target ONLY pages that are using this feature. My original solution was hiding the post thumbnail (featured image) on every page…oops!

Solution:

In this instance, I am using a MetaBox with radio buttons so the client can choose which type of featured content they would like on their page: static photo, slideshow or video. Per their choice, the MetaBox containing that field will appear on the page. Here is the setup for the MetaBox that handles the radio buttons:

	$meta_boxes[] = array(
		'id' => 'featured_choose',
		'title' => 'Featured Item',
		'pages' => array('page'), // post type
		'show_on' => array( 'key' => 'page-template', 'value' => array( 'template-page.php', 'default' ) ),
		'context' => 'normal',
		'priority' => 'high',
		'show_names' => true,
		'fields' => array(
			array(
				'name' => 'Choose Feature',
				'id' => $prefix . 'feature_choose',
				'type' => 'radio_inline',
				'options' => array(
					array('name' => 'Image', 'value' => 'image'),
					array('name' => 'Slide Show', 'value' => 'slide'),
					array('name' => 'Video', 'value' => 'video')				
				)
			),								
		),
	);

In addition, here is the setup for the individual MetaBoxes related to the slideshow and video content (the static image is using WP featured image, not a CMB):

	$meta_boxes[] = array(
		'id' => 'featured_video',
		'title' => 'Featured Video',
		'pages' => array('page'), // post type
		'show_on' => array( 'key' => 'page-template', 'value' => array( 'template-page.php', 'default' ) ),
		'context' => 'normal',
		'priority' => 'high',
		'show_names' => true,
		'fields' => array(
			array(
				'name' => 'YouTube Video ID',
				'desc' => 'Paste in your YouTube video ID. Refer to the help page if you need instruction on finding it.',
				'id' => $prefix . 'featured_video',
				'type' => 'text'
			),						
		),
	);
		$meta_boxes[] = array(
		'id' => 'featured_slideshow',
		'title' => 'Featured Slideshow',
		'pages' => array('page'), // post type
		'show_on' => array( 'key' => 'page-template', 'value' => array( 'template-page.php', 'default' ) ),
		'context' => 'normal',
		'priority' => 'high',
		'show_names' => true,
		'fields' => array(
			array(
				'name' => 'Showcase Gallery Shortcode',
				'desc' => 'Paste in the shortcode to the gallery you would like on this page, example: [showcase id="###"]',
				'id' => $prefix . 'slideshow_shortcode',
				'type' => 'textarea_code'
			),						
		),
	);

So based on these MetaBoxes, I wrote the following jQuery condition and added it to the bottom of the cmb.js file. I don’t know how you manage your updates for CMB, but you may want to put this code somewhere else, as an update would override your changes. Some notes: #postimagediv is referring to the WordPress built in Featured Image MetaBox, #featured_slideshow and #featured_video are referring to the MetaBoxes we setup in the step before this where you see 'id' => $prefix .'some_id'.

Also, note the input values. These are specific to the options array for our radio buttons: array('name' => 'Image', 'value' => 'image'), we are taking the value, in this first case ‘image’ and using that in the following  condition:

	if ($('#featured_choose').length){

		$('#postimagediv', '#featured_slideshow', '#featured_video').addClass('hide_feature');

		if (jQuery('input[value=image]:checked').length > 0){
				jQuery('#postimagediv').show()
		}
			else {
				jQuery('#postimagediv').hide();
			}
			jQuery('input[name=bj_cmb_feature_choose]').change(function() {
				var selected = jQuery(this).val();console.log(selected);
				if(selected == 'image'){
					jQuery('#postimagediv').show();
			} else {
				jQuery('#postimagediv').hide();
			}
		});

		if (jQuery('input[value=slide]:checked').length > 0){
				jQuery('#featured_slideshow').show()
		}
			else {
				jQuery('#featured_slideshow').hide();
			}
			jQuery('input[name=bj_cmb_feature_choose]').change(function() {
				var selected = jQuery(this).val();console.log(selected);
				if(selected == 'slide'){
					jQuery('#featured_slideshow').show();
			} else {
				jQuery('#featured_slideshow').hide();
			}
		});

		if (jQuery('input[value=video]:checked').length > 0){
				jQuery('#featured_video').show()
		}
			else {
				jQuery('#featured_video').hide();
			}
			jQuery('input[name=bj_cmb_feature_choose]').change(function() {
				var selected = jQuery(this).val();console.log(selected);
				if(selected == 'video'){
					jQuery('#featured_video').show();
			} else {
				jQuery('#featured_video').hide();
			}
		});

	}

The last step you need to take is some simple CSS that again, I included in the bottom of the style.css file included with CMB.

	.hide_feature {
		display:none;
	}

Explanation:

Once our MetaBoxes have been setup, we are fist checking to see that our MetaBox with the id #featured_choose exists on the page. If it does, we are hiding our three featured options (#postimagediv, #featured_video and #featured_slideshow) with the CSS. Our jQuery is checking to see what radio button value is currently selected, and if that value is selected it will change our CSS display:none to display:block, which “shows” our previously hidden MetaBox. The great thing about this too, is that the data that was entered in any one of these MetaBoxes remains there unless you remove it. In my case this is ideal, since the client will frequently be changing between video, image etc. and won’t need to reinsert assets that were previously used.

Note:

For this to make sense from a UI perspective, make sure you “slide” your conditional MetaBoxes to be one on top of the other so that when the hide/appear it happens in the same area in the page editor. I moved “featured image” from it’s standard spot in the right column to directly above the video and slideshow MetaBoxes.