ARTICLES

Create My Custom Conditional Visibility Feature In Bricks Theme Without Add-On

Currently working on a new website by using Bricks theme in WordPress. Conditional visibility still in the roadmap and really need to use it on that new website. Luckily Bricks v1.4.0.1 provides new WP filter to achieve this! Thanks to Thomas, Luis and everyone in Bricks team. If you would like to create the conditional visibility feature via coding way, just follow along this tutorial.

  • This might not for you if coding is not your cup of tea.
  • Conditional visibility checking is on PHP (backend), please beware if you are using page cache plugins.
  • There might be changes on the WP filter in the future Bricks theme, this tutorial just gives you a concept on how to achieve.
  • Please do not compare the functionality with a proper plugin.
  • This tutorial might takes you longer time to understand.

In the end of this tutorial, you will be able to create this feature like my screenshot:

My custom conditional visibility feature in Bricks
My custom conditional visibility feature in Bricks

Update 2022 July 08: Requested by the readers, I bundled the codes into a plugin. If you do not want to code it out, just download the plugin and use it. Download link v1.0.2 in the end of the article.

Update 2022 July 11: New compare data type ‘String Length’, if you want to compare the meta value is empty or not, just choose String Length compare data type, value A set the meta field, value B set y, Compare set Less than. Which means if the meta value string length is less than 1, then hide or show.

Example to check if acf text field is empty
Example to check if acf text field is empty

Tutorial Environment Setup

  • Bricks theme v1.4.0.1 (Tested up to v1.5)
  • WordPress 6.0
  • PHP 7.4
  • Open LiteSpeed Server
  • All custom codes in this tutorial place in child theme functions.php

Objective And Plan

I would like to show a section to visitor about 10% discount if register as a member, otherwise just hide the section from logged-in user. This scenario is very common to WooCommerce stores and so I use this as today tutorial objective. Once you able to achieve this, you can also use conditional visibility to hide/show other elements (buttons, product status ribbon, forms, menus etc.) based on different scenario.

Step 1: The Filter Hook bricks/element/render

The new WP filter hook in Bricks that playing the main role in this tutorial is bricks/element/render. It’s not documented yet but available since v1.4.0.1 (New added documentation in Bricks)

This filter is very simple, it returns boolean value, nothing will be rendered in frontend if the return value is false.

Let me give some examples on how to use it.

<?php

// To determine an element to be rendered or not, just use this filter
add_filter( 'bricks/element/render', function( $show, $element ){

	// if want to show this element, return true
	// if want to hide this element, return false
	
	return $show;
}, 10, 2 );


/**
 * Example if I want to hide all rich text element
 */
add_filter( 'bricks/element/render', function( $show, $element ){

	if ($element->name === 'text') return false;
	
	return $show;
}, 10, 2 );

/**
 * You can use $element->settings to get the settings of the element.
 * Example below check if the button id is "whatsapp-button" then hide it.
 */
add_filter( 'bricks/element/render', function( $show, $element ){

	if( $element->name != 'button' || !isset($element->settings['_cssId']) ) return $show;

	return ( $element->settings['_cssId'] === 'whatsapp-button' )? false : true;

}, 10, 2 );

?>

Well, once you understand this clearly, actually you could stop reading here, because you already able to hide or show the element dynamically. **If you want to know what are the elements name in Bricks, please check in the end of this tutorial**

Step 2: Simple Code To Achieve Our Plan

Okay, to check whether the current visitor is logged-in or not, just simply use is_user_logged_in method by WordPress.

Given promotion-container as the ID
Given promotion-container as the ID
<?php
/**
 * If user logged in, hide my container element which css Id is #promotion-container
 */
add_filter( 'bricks/element/render', 'itchycode_conditional_display_promotion_container', 10, 2 );

function itchycode_conditional_display_promotion_container( $show, $element ){

	// Return original $show value if not container element or without cssId set
	if( $element->name != 'container' || !isset($element->settings['_cssId']) ) return $show;

	// Return original $show value if cssId is not #promotion-container
	if( $element->settings['_cssId'] !== 'promotion-container' ) return $show;

	return !is_user_logged_in();

}

?>

Pretty easy right? You can try to browse the same page in incognito/private browser as visitor, you shall see the container showing as expected.

Step 3: Build Our Custom Controls In Bricks Builder

Honestly, if you want to set the conditional logic whenever a new section created or new criteria comes out, it’s pretty tired to keep coding and coding. I feel it, let’s do this in a more advanced way.

To make our code more flexible, we must add a few custom control fields inside the Builder mode. From Bricks Academy, we knew we can use bricks/elements/{$name}/control_groups and bricks/elements/{$name}/controls WP filters.

I am not going to guide on the usage of these 2 filters, please check in official documentation.

<?php

add_action( 'init', function() {

	/**
	 * I want to add my control fields on all available elements
	 * So no need to add each filter one by one
	 */
	$elements = \Bricks\Elements::$elements;
	$names = array_keys($elements);
	foreach( $names as $name ) {
		add_filter( "bricks/elements/{$name}/control_groups", 'itchy_add_control_groups', 10 );
		add_filter( "bricks/elements/{$name}/controls", 'itchy_add_controls', 10 );
	}
}, 30 );


/**
 *  This just register a group
 */
function itchy_add_control_groups( $control_groups ) {
	$control_groups['itchy_advanced'] = [
		'tab'      => 'style',
		'title'    => esc_html__( 'Itchy Advanced', 'itchycode' ),
	];

	return $control_groups;
}

?>
itchy_add_control_groups() register a new control group
itchy_add_control_groups() register a new control group
<?php

/**
 * Define our custom control fields
 */
function itchy_add_controls( $controls ) {

	// This is a checkbox to activate or deactivate the condition visibility feature on the element
	$controls['itchy_condition_active'] = [
		'tab'      => 'style',
		'group'    => 'itchy_advanced',
		'label'    => esc_html__( 'Use Conditional Visibility', 'itchycode' ),
		'type'     => 'checkbox'
	];

	// This is a dropdown to determine show or hide if the condition is met
	$controls['itchy_condition_met'] = [
		'tab'      => 'style',
		'group'    => 'itchy_advanced',
		'label'    => esc_html__( 'Conditional Type', 'itchycode' ),
		'type'     => 'select',
		'options'	=> [
			'show'	=> 'show',
			'hide'	=> 'hide',
		],
		'placeholder' => 'Choose a condition type',
		'required' => [ 'itchy_condition_active', '!=', '' ],
	];

	// This capture value A
	$controls['itchy_condition_value_a'] = [
		'tab'      => 'style',
		'group'    => 'itchy_advanced',
		'label'    => esc_html__( 'Conditional Value A', 'itchycode' ),
		'type'     => 'text',
		'placeholder' => '',
		'required' => [ 'itchy_condition_active', '!=', '' ],
		'description' => esc_html__( 'This will be compare with Value B', 'itchycode' ),
	];

	// This decide the compare operator
	$controls['itchy_condition_compare'] = [
		'tab'      => 'style',
		'group'    => 'itchy_advanced',
		'label'    => esc_html__( 'Compare', 'itchycode' ),
		'type'     => 'select',
		'options'	=> [
			'='           => esc_html( 'Equal', 'itchycode' ),
			'!='          => esc_html( 'Not equal', 'itchycode' ),
			'>'           => esc_html( 'Greater than', 'itchycode' ),
			'>='          => esc_html( 'Greater than or equal', 'itchycode' ),
			'<'           => esc_html( 'Lesser', 'itchycode' ),
			'<='          => esc_html( 'Lesser or equal', 'itchycode' ),
		],
		'required' => [ 'itchy_condition_active', '!=', '' ],
	];

	// This capture value B
	$controls['itchy_condition_value_b'] = [
		'tab'      => 'style',
		'group'    => 'itchy_advanced',
		'label'    => esc_html__( 'Conditional Value B', 'itchycode' ),
		'type'     => 'text',
		'placeholder' => '',
		'required' => [ 'itchy_condition_active', '!=', '' ],
		'description' => esc_html__( 'This will be compare with Value A', 'itchycode' ),
	];

	// This going to convert the value A and B to a desire data type before compare
	$controls['itchy_condition_data_type'] = [
		'tab'      => 'style',
		'group'    => 'itchy_advanced',
		'label'    => esc_html__( 'Compare Data Type', 'itchycode' ),
		'type'     => 'select',
		'options'	=> [
			'number'	=> 'Number',
			'string'	=> 'String',
			'boolean'	=> 'Boolean',
			'stringlength'	=> 'String Length',
		],
		'description' => esc_html__( 'Convert Value A and Value B before compare', 'itchycode' ),
		'required' => [ 'itchy_condition_active', '!=', '' ],
	];


	return $controls;
} 


?>
itchy_add_controls() register custom control fields
itchy_add_controls() register custom control fields

Once save above codes, refresh / reload your Bricks Builder, select one of your elements, navigate to Style tab, the new conditional visibility controls should be there!

Step 4: Enhanced Conditional Render Code

Okay, now just code our logic on bricks/element/render hook to make it more flexible and reusable. Please note that I just write all codes in single method, you could refactor them as you like.

<?php

/**
 * Enhanced Conditional display
 */
add_filter( 'bricks/element/render', 'itchycode_conditional_render', 20, 2);

function itchycode_conditional_render( $show, $element ) {

	$settings = $element->settings;

	// If nothing set, return original value
	if(
		!isset( $settings['itchy_condition_active'] ) ||
		!isset( $settings['itchy_condition_met'] ) ||
		!isset( $settings['itchy_condition_value_a'] ) ||
		!isset( $settings['itchy_condition_value_b'] ) ||
		!isset( $settings['itchy_condition_compare'] ) ||
		!isset( $settings['itchy_condition_data_type'] ) ||
		!$element->is_frontend 
	) return $show;

	$active = $settings['itchy_condition_active'];
	$met = $settings['itchy_condition_met'];
	$value_a = $settings['itchy_condition_value_a'];
	$value_b = $settings['itchy_condition_value_b'];
	$compare = $settings['itchy_condition_compare'];
	$data_type = $settings['itchy_condition_data_type'];

	// Ensure all required values are set
	if( 
		!$active ||
		$met == '' ||
		$value_a == '' ||
		$value_b == '' ||
		$compare == '' ||
		$data_type == ''
	) return $show;

	// Value A and Value B might be using dynamic data, so we need to get the actual value
	$value_a = $element->render_dynamic_data($value_a);
	$value_b = $element->render_dynamic_data($value_b);

	// Let's convert the value to the correct desired compare type
	switch( $data_type )
	{
		case 'number':
			$value_a = floatval($value_a);
			$value_b = floatval($value_b);
			break;
		case 'string':
			$value_a = strval($value_a);
			$value_b = strval($value_b);
			break;
		case 'boolean':
			$value_a = filter_var($value_a, FILTER_VALIDATE_BOOLEAN); // Updated, previously was boolval but it's not perfect if the variable is string
			$value_b = filter_var($value_b, FILTER_VALIDATE_BOOLEAN);
			break;
		case 'stringlength': // Updated, can compare string length, if meta field not set, length will be 0
			$value_a = strlen(strval($value_a));
			$value_b = strlen(strval($value_b));
			break;
		default:
			$value_a = $value_a;
			$value_b = $value_b;
			break;
	}

	// Let's compare the values!
	switch( $compare ) {
		case '=':
			$show = $value_a == $value_b;
			break;
		case '!=':
			$show = $value_a != $value_b;
			break;
		case '>':
			$show = $value_a > $value_b;
			break;
		case '<':
			$show = $value_a < $value_b;
			break;
		case '>=':
			$show = $value_a >= $value_b;
			break;
		case '<=':
			$show = $value_a <= $value_b;
			break;
		default:
			$show = false;
			break;
	}

	// Determine show or hide based on condition
	return ( $met === 'show' )? $show : !$show;

}


?>

Step 5: Use Custom Conditional Visibility

Cool, now we can head back to the container (promotion-container) created earlier. Please remember to remove or comment out our codes in Step 2.

Simple guide on how to use this custom conditional visibility feature.
Simple guide on how to use this custom conditional visibility feature.

Hit the save button and check it out in frontend now, does it works as expected?

I have tested if set conditional visibility on a container, it’s children elements will be hide or show together too! Very cool and I like it! Really save my times.

Another Example: I set my condition to display an image element if the WooCommerce product price greater than 30.

Example: Show if WooCommerce price greater than 30
Example: Show if WooCommerce price greater than 30
<?php
/**
 * My custom function to retrieve WooCommerce product price
 */
function itchy_get_price() {
	$post_id = get_the_ID();
	$product = wc_get_product($post_id);
	return ($product)? $product->get_price() : 0;
}

?>

Download Ready Made Plugin

If you would like to have this feature as a temporary plugin, just download it here (v1.0.2). Please note that I am not going to deploy this into WordPress repository as this feature will be covered by official Bricks team.

Conclusion

Have fun to try it out, tweak the code to your own scenario, and I am sure you can build something more cool and powerful codes than mine. Any discussions are welcome, drop me a message and I will get back to you once read it.

You might interested in this AJAX popup topic as well. Stay safe and happy coding!

Action & Filter hooks used in this tutorial:

  • bricks/element/render
  • bricks/elements/{element-name}/control_groups
  • bricks/elements/{element-name}/controls

Reference:

Label NameElement Name
Containercontainer
Headingheading
Basic Texttext-basic
Rich Texttext
Buttonbutton
Iconicon
Imageimage
Videovideo
Dividerdivider
Icon Boxicon-box
Icon Listsocial-icons
Listlist
Accordionaccordion
Tabstabs
Formform
Mapmap
Alertalert
Anim. Typinganimated-typing
Countdowncountdown
Countercounter
Pricing Tablespricing-tables
Progress Barprogress-bar
Pie Chartpie-char
Team Membersteam-members
Testimonialstestimonials
HTMLhtml
Codecode
Templatetemplate
Logologo
Facebook Pagefacebook-page
Image Galleryimage-gallery
Audioaudio
Carouselcarousel
Sliderslider
SVGsvg
WordPresswordpress
Postsposts
Paginationpagination
Nav Menunav-menu
Sidebarsidebar
Searchsearch
Shortcodeshortcode
Post Titlepost-title
Excerptpost-excerpt
Meta Datapost-meta
Post Contentpost-content
Social Sharingpost-sharing
Related Postsrelated-posts
Authorpost-author
Commentspost-comments
Taxonomypost-taxonomy
Post Navigationpost-navigation
All Bricks elements name in v1.4.0.2

  • About Author

    I like to solve problems by coding. I like websites, web applications and everything viewable from browser. Knowledge sharing can grows my confidence. A simple "thank you" will make my day :)
    More about me

Subscribe For Notification

Get notification whenever new article published.