Humanmades Custom Meta Boxes | How to use checkboxes and radio buttons?

I’m not sure exactly what you are trying to do, but you should be able to use the checkbox and radio fields in a simlar way to any of the other fields.

If I had a group of fields for example, I could add a radio field to that group with color options that I could then use when displaying the group. see code for an example.

$meta_boxes[] = array(
	'title' => 'Test',
	'pages' => 'post',
	'fields' => array(
		array(
			'id' => 'my-group-1',
			'name' => 'My Group',
			'type' => 'group',
			'repeatable' => true,
			'fields' => array(
				array( 'id' => 'field-1', 'name' => 'Text input field', 'type' => 'text' ),
				array( 'id' => 'field-2', 'name' => 'Field Color', 'type' => 'radio', 'options' => array( 'red', 'green', 'blue' ) ),
			)
		)
	),
);

If you wanted to do this with a single field – it would make sense to create a group with your field and color field. Note that you can’t do groups within groups so this could be a limitation.

Thanks Matthew,

It’s actually the use and output of the fields that I struggle with. The way your class was made makes it very easy and intuitive to actually create any metabox or group of metabox that I require.

Sorry my question wasn’t that clear.

I’m using a function to call the meta boxes in my template files. Like so;

// Featurette Meta Box Tag
function src_get_featurettes( $page_id ){
	$featurettes = get_post_meta( $page_id, 'featurette', false );
		if ( $featurettes ) {
			$featurette_list = "\n<div class='featurette-list'>\n";
			foreach ( $featurettes as $featurette ) {
				$featurette_image = false;
				$featurette_head = false;
				$featurette_sub = false;
				$featurette_list .= "\t<div class='row featurette-wrap'>";
				if ( $featurette['a_feat_img'] ) {
					$featurette_image .= '<aside class="small-12 medium-3 large-3 columns">';
					$featurette_image .= wp_get_attachment_image( $featurette['a_feat_img'], 'thumbnail', false );
					$featurette_image .= '</aside>';
				}
				if ( $featurette['a_feat_head'] ) {
					$featurette_head .= '<article class="columns small-12 small-8 medium-8 right">';
					$featurette_head .=  '<h2>' . $featurette['a_feat_head'] . '</h2>';
				}
				if ( $featurette['a_feat_sub'] ) {
					$featurette_sub .=  wpautop ($featurette['a_feat_sub'] );
					$featurette_sub .= "</article>";
				}
				$featurette_list .= $featurette_image;
				$featurette_list .= $featurette_head;
				$featurette_list .= $featurette_sub;
				$featurette_list .= "</div>\n";
			}

			$featurette_list .= "</div>\n"; 

			return $featurette_list;
		}
		else {
			return false;
		}
}

function src_the_featurettes( $page_id ) { 

	if ( src_get_featurettes( $page_id ) ) {
		echo src_get_featurettes( $page_id );
	}
	else {
		return false;
	}

}

I’ve never used checkboxes or radio buttons before and I’m having trouble integrating it into the above. I’d like to add or remove the background colour of

$featurette_list .= "\t<div class='row featurette-wrap'>";

• You pass an array of options when creating the radio buttons.
• The array key of the selected option is saved in meta. In my example this is just the index but you could set a string for the color if you want.
• You can then use this how you wish in your output. I would probably use the stored value to output a different class. Something like this:

$featurette_list .= "\t<div class='row featurette-wrap featurette-style-' . $featurette['field-2'] . '>";

and then style it in CSS

.featurette-style-1 { background: red; }
.featurette-style-2 { background: blue; }
.featurette-style-3 { background: red; }