ACF select field as separate items. Help!

How To
1

Hi. I need help!

Is it possible to separate every item in ACF select field?

As an example I have field Genre
image

In Bricksbuilder I use dynamic tag

image
image325×589 15.1 KB

On the frontend, I get simple line separated by comma
image
image

I need those Items to be separated to apply CSS to each item. Like this
image

2

Hi

I use a small code element with integrated CSS button style for this:

<style>
.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 5px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px;
  border-radius: 10px;
}  
</style>  
<?php

$colors = get_field( 'cuisine' );

// Create buttons from selected values.
if( $colors ):
foreach ($colors as $color){
 echo "<span class='button'>".$color."</span>";
}
endif;
?>

Output:

Buttons

Cheers

Patric

3

Hi Patric

I must be doing something wrong. I’ve inserted the code on my page. Replaced field name to my select filed
image

image
image798×484 12.3 KB

But I got an error.

image
image1133×135 7.17 KB

4

Hi

what did you select as the Return Value in the ACF field settings?

Value, Name or Both (Array)?

My field has ‘Value’:

field

5

Hi

if your ACF field has return setting as Both (Array), then change the line from this

echo "<span class='button'>".$color."</span>";

to this

echo "<span class='button'>".$color['label']."</span>";

Cheers

Patric

6

That helped! Thank you!!!:+1:

1 Like