Button Group

Overview

The Button Group field provides a neat UI for selecting a value.

Screenshots

Changelog

  • Added in version 5.6.3

Settings

Name Description
Choices Each choice is entered on a new line (eg. ‘Red’). For more control over the value and label, you may use a ‘ : ‘ character to specify both (eg. ‘red : Red’). You may also enter HTML as a choice as shown in the above screenshots.
Allow Null Allows no value to be selected
Default Value Specify the default value selected when first editing the field’s value. Enter only value (not label)
Layout Changes the layout style of inputs from Vertical to Horizontal
Return Format Change the value format returned by the get_field() and similar functions.

Template usage

The Button Group field will return the selected value, label or both (an array with value and label) depending on the Return Format setting.

Basic

This example shows how to display a selected value using the Format Value setting ‘Value’.

<p>Color: <?php the_field('color'); ?></p>

Display value and label

This example shows how to load a selected value and label using the Format Value setting ‘Both’.

<?php

// vars
$color = get_field('color');

?>
<p>Color: <span class="color-<?php echo $color['value']; ?>"><?php echo $color['label']; ?></span></p>

Conditional

This example shows how to use a selected value to conditionally perform a task.

<?php if( get_field('color') == 'red' ): ?>
	<p>Selected the Red choice!</p>
<?php endif; ?>

Query posts

This example shows how to query posts that have the value ‘red’ selected.

<?php

$posts = get_posts(array(
    'meta_query' => array(
        array(
            'key' => 'color', // name of custom field
            'value' => 'red',
        )
    )
));

if( $posts ) {
    //...
}

?>