I have built a simple page builder using ACF Pro flexible content fields. I want the user to be able to choose a background colour for the section using a radio button selector. I have set up the ACF fields but I want to get the value selected in the template and echo out a class name in the div which would then be styled with CSS.

I can't get the class name to show though, this is what I have so far:

if( get_field('background', $post->ID) == 'white' ):  
    $background = 'white';
elseif ( get_field('background', $post->ID) == 'light_grey' ): 
    $background = 'light-grey';
elseif( get_field('background', $post->ID) == 'dark_grey' ):
    $background = 'dark-grey';
    $background = '';

At the moment nothing prints out at all. This code is in a file called by my the main template that has the code for the different layouts.

Ok revised code:

if( get_row_layout() == 'full_width_col' ):

        $bg = get_sub_field('row_background');

                        if( $bg ) {
                                $background = $bg['value'];
                        } else {
                                $background ='';
                                    }  ?>

<div id="row-wrap-<?php echo $row;?>" class="<?php echo $background; ?> row-wrapper full-width clear">
            <div id="row-<?php echo $row;?>" class="row">
                 <?php get_template_part('template-parts/acf/layout', 'full-width-col'); ?>
<?php endif; ?>
  • Have you tried the_field('background', $post->ID) to verify what it's returning? ACF can return label or value so that will help you double-check what you're getting. Maybe you're getting White back as a label. Also - you could simplify by making the ACF values equal your CSS class, so for example update light_grey to light-grey and then you can always just use the_field() instead of a conditional. – WebElaine Aug 15 '18 at 14:58
  • It is returning dark_grey which is the value. I will try your suggestion of simplifying it. How would that work with a radio button field? – WebBee Aug 15 '18 at 15:30
  • yes, i changed the values in my example. – rudtek Aug 15 '18 at 15:31
  • what i gave is for a radio button – rudtek Aug 15 '18 at 15:32
  • Ah, I bet you don't have "format value" set to both. See my update below. – rudtek Aug 15 '18 at 16:13

You should show your whole code. What you've posted above won't output at all. Additionally there is no need to assign a variable as you have a value already...

your field values are set in ACF this way for a radio button:

white : White
light-grey : Light Grey
dark-grey : Dark Grey

(notice the space around the colon)

Now for your code:

$bg = get_field('background', $post->ID);
if( $bg ) {
    $background = $bg['value'];
} else {
    $background ='';

echo '<div class="mybackground '.$background.'">hi there</div>';

then your css:

.white {
.dark-grey {
.light-grey {

You will need to customize a bit for what you're actually doing but this should work.

If you have format value set to just return value then change this line:

$background = $bg['value'];

to this:

$background = $bg;
  • made a few typos. corrected now! – rudtek Aug 15 '18 at 15:28
  • Thank you, I thought something must be wrong with they way I was doing it. I have my values set up as you have above, but my output code is wrong. I will have a go with the code above – WebBee Aug 15 '18 at 15:37
  • 1
    also, if you're in a loop, you can omit the ",$post->ID" – rudtek Aug 15 '18 at 15:41
  • I was trying to output a string based on the selection, rather than just outputting the value itself. – WebBee Aug 15 '18 at 15:42
  • 1
    Why do you need to output a string that's different from the value? There are cases where that's helpful but if it's just adding a CSS class it simplifies code to just output the value directly. – WebElaine Aug 15 '18 at 15:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.