[Support request] Conditional CSS styling through ACF fields within Query Loop

[Mathieu]

Hi guys,

First of all, thanks for the amazing support always providing helpful information.
I’m struggling to find a decent solution to the following issue : I’m willing to style a CSS class depending on ACF-fields values. I usually succeed to do so by creating a PHP function and a shortcode.

Unfortunately, shortcodes don’t seem to work within Query Loops, which I am using in this case. I read some similar topics where filters seemed to be the best solution, but I’m not really confident with this yet.

Here’s my snippet with the shortcode solution, how could I translate this to make it work as a filter or whatever other solution it could be within a query loop ?
And here’s the page it should be displayed : https://3j.mathieu-dupuis.com/realisations/

Thanks a lot!
Best

if ( ! function_exists( 'css_status_block' ) ) {
function css_status_block() {
		ob_start();
	$status = get_field( 'statut' );

	if( $status == 'À venir' ) {
        $css_parameters = array (        
            'color' => 'var(--turquoise)',
            'display' => 'block'
        );
    }
    elseif( $status == 'En cours' ) {     
        $css_parameters = array (        
            'color' => '#F2C94C',
            'display' => 'block'
        );
    }
    elseif( $status == 'Livré' ) {  
        $css_parameters = array (       
            'color' => 'EB5757',
            'display' => 'block'
        );
    }
    elseif( empty($status) ) {  
        $css_parameters = array (     
            'color' => 'none',
            'display' => 'none'
        );
    }
?>
	<div class="statut-block" style="background-color: <?php echo $css_parameters['color']; ?>; display: <?php echo $css_parameters['display']; ?>;">
		<h3><?php the_field('statut'); ?></h3>
	</div>
<?php
	$output_string = ob_get_contents();
	ob_end_clean();
	return $output_string;
	}
}

add_shortcode( 'statut-block', 'css_status_block' );

[David]

Hi there,

theres a few ways to do this.

I personally like to separate CSS from PHP so i would add a class based on that custom field to the article using the post_class filter:

function db_custom_field_post_class( $classes ) {
    global $post;
    // if field exists do something
    if ( get_field( 'my_custom_field' ) ) {
        $class_prefix = 'db-'; // prefix class 
        $class_field = get_field( 'my_custom_field' );
        // create class string of prefix and kebab-case custom field
        $classes[] = $class_prefix . str_replace(' ', '-', strtolower($class_field));
    }
    return $classes;
}
add_filter( 'post_class', 'db_custom_field_post_class' );

For example a custom field value of En cours would return a post class of db-en-cours
This will get added to the article element in any single post or archive or query loop.
You can then use that post class to target the post content eg.

.db-en-cours .target-element-class {
    // your styles for a custom field value
}

When it comes to colors you may want to consider this.

1. in Cutomizer > Colors – Global Colors when you add a color it will generate a CSS variable.
For example name a color dynamic bg and it will generate a variable like:

--dynamic-bg: #ff0000

2. Now edit your block, and set its background to that CSS Variable color.

3. Now your dynamic CSS using the post_class overwrite that variable color:

.db-en-cours {
    --dynamic-bg: #00ff00;
}

Any block within the article.db-en-cours that has that color set will be updated.

[Author]

Posts