WordPress.org

Forums

Humanmades Custom Meta Boxes | How to use checkboxes and radio buttons? (4 posts)

  1. John Lion
    Member
    Posted 1 year ago #

    Hi there,

    I've been using Humanmades Custom meta boxes class for a few projects now and enjoying the extendability it gives wordpress immensely.

    I've got to the point now where I would like to start adding checkboxes or radio buttons that can change the colour of a field, a group of fields and/or a repeatable group of fields.

    At the moment I am stuck with... Nothing. Has anyone been doing this for a while and be willing to share a method or be able to point me in the right direction for some further reading?

    Thanks all in advance.

  2. Matthew Haines-Young
    Human Made
    Posted 1 year ago #

    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.

  3. John Lion
    Member
    Posted 1 year ago #

    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'>";

  4. Matthew Haines-Young
    Human Made
    Posted 1 year ago #

    • 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; }

Topic Closed

This topic has been closed to new replies.

About this Topic