Conditional Rendering in Bricks Based on CSS Class

Updated on 19 Jun 2024

A user asks:

Is there a way to apply the same conditions to several elements like we set styles appending a CSS class?

I have a button with class .btn-accent with dynamic condition to check if a function is equal to 1.
I’d like to set this same visibility conditions to other elements with same class.

Bricks has a great filter hook called bricks/element/render that can be used to programmatically control the rendering (output) of elements.

CSS class-based rendering is provided in example #2 on the above page.

This Pro tutorial provides another example of using the bricks/element/render filter to output any element having a class of render-if-status-is-checked only if a “Status” True / False type of custom field is checked on an ACF Options page.

After implementing the tutorial, to output an element based on the Options page field value all you have to do is assign the CSS class to the element. You are going to tell Bricks to check the list of classes for the elements before it renders the elements and if the CSS class name you specify is present for an element then it is going to run a function that returns a true or false. If it receives true, then the element is rendered. Otherwise, it won’t.

This is easier and quicker than using the Conditions dialog if you have a number of elements on which the condition should be applied.

Step 1

Install and activate ACF Pro.

Go to ACF → Options Pages.

Add a new Options Page.

Step 2

Create a field group having a True / False field attached to the above Options page.

In the Presentation tab for the field, you may want to toggle “Stylized UI” on.

Step 3

Click on Site Settings menu in the left admin menu.

Turn on the Status (technically speaking, it is a checkbox – so you are actually ticking it).

Click Update.

Step 4

Back in child theme’s functions.php or your code snippets plugin, add:

// Function to return true or false depending on whether the "status" True / False ACF field is checked.
function bl_get_status() {
	// if ACF is not active, return false
	if ( ! class_exists( 'ACF' ) ) {
		return false;
	}

	return get_field( 'status', 'option' );
}

// Function to define elements having a class of "render-if-status-is-checked" to be rendered only if the "status" True / False ACF Options page field is checked.
add_filter( 'bricks/element/render', function( $render, $element ) {
	// Get the element CSS classes
	$classes = ! empty( $element->attributes['_root']['class'] ) ? $element->attributes['_root']['class'] : false;

	// Check if the element has the special class "render-if-status-is-checked"
	if ( $classes && in_array( 'render-if-status-is-checked', $classes ) ) {
		return bl_get_status();
	}

	return $render;
}, 10, 2 );

We defined a custom function, bl_get_status() that returns true (represented as 1) if the Status field is ticked and false if it is not.

Then we attached a callback function (an anonymous one in this case – without a name) to the bricks/element/render filter and Bricks runs this function before it renders every element. Inside this function we are getting a list of all the element’s classes, and if render-if-status-is-checked class is in this list, we are returning the result of bl_get_status().

So effectively we are telling Bricks: “Yo! Before you output every element, first check if it has this CSS class I set and if it does, then go and check if my Options page custom field is ticked. If it is, only then output the element.”

Step 4

Whitelist the bl_get_status function.

Ex.:

<?php 

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'bl_get_status'
  ];
} );

You should also add any other functions (native or custom) being used in your Bricks instance in addition to bl_get_status. This can be checked at Bricks → Settings → Custom code by clicking the Code review button.

More info on whitelisting can be found here.

Step 5

Edit a test Page and add a Heading or Basic Text element (or just about any element).

In the STYLE tab, add render-if-status-is-checked under CSS classes.

The reason for not adding it in the elements classes input is because we typically don’t set any styles to such condition classes. Of course, you could still do it if you want and it would still work just as well.

Check the Page on the front end and you should see it.

Now go to the Options page and uncheck the Status field.

Reload the Page and now the element won’t be output.