ACF Options Page Custom Field Conditional in Bricks

This Pro tutorial shows how we can set an element in Bricks to be output only if the value of a specific custom field on an ACF Pro Options page has a value i.e., is not empty.

In the past, we covered how to retrieve and output ACF Options Fields in Bricks.

To ensure that the Container/Div having the phone icon and the number is rendered only when the phone field on the Options page is populated, add the following in child theme’s functions.php or a code snippets plugin:

add_filter( 'bricks/element/render', function( $render, $element ) {
	// Check if ACF is active.
	if ( ! class_exists( 'ACF' ) ) {
		return $render;
	}

	// Get the element CSS classes
	$classes = ! empty( $element->attributes['_root']['class'] ) ? $element->attributes['_root']['class'] : false;

	// Check if the element has the special class "header__phone"
	if ( $classes && in_array( 'header__phone', $classes ) ) {
		return get_field( 'phone', 'option' );
	}

	return $render;
}, 10, 2 );

Add the class of header__phone to the element in question.