Style Checbox Values

• deejr

• July 10, 2018 at 7:18 pm

Hi really hope someone can help as I can’t figure out how to do this.

I have a field to collect data on the colour of a flower. The field is outputted in my website as a shortcode this is the code.

function summerfoc_sc() {
	$output .= "<div class='infoblock'>";
	if ($features = get_field('summer_foliage_colour')) {
	$field_name = "summer_foliage_colour";
	$field = get_field_object($field_name);
	$output .= '<strong>'.$field['label']. '</strong>';
$output .= 	"<div class='colourbullets'>";
	foreach ($features as $key => $val){
	$output .=   '<li>'.$val.'</li>';}
	$output .= 	"</div>";
	$output .= "</div>";
	return $output;
}
}
add_shortcode( 'summerfoc', 'summerfoc_sc' );

It all works fine the shortcode will output the word ‘yellow’ or ‘red’ etc etc.

What I want to do is colour the background of each colour with an actual colour. So the word yellow would have a yellow background etc etc.

Can anyone help in achieving this. Adding css to the value in field options works but this then gets stored in the database which isn’t good because other filters pull the div class info along with the colour word instead of the just the word Yellow or Red etc.

Any help would be amazing. Hope I’ve made sense.

• ausdamo

• July 17, 2018 at 5:21 pm

You could use the value and create a CSS class to match it.

So when output:

colourblocks

You could output:

colourblocks yellow

Or to avoid a generic class name something like

colourblocks block—yellow

• deejr

• July 17, 2018 at 5:56 pm

Hi thank you for your kind suggestion. I’m not sure what you mean though.

Were would I add this and what could it look like in terms of the code.

Sorry for being thick but still trying to learn a lot of this stuff.