Conditional Rendering Based on Current Date and Time in Bricks when Using Meta Box

A Pro member of our site asks:

Using bricks + Meta, conditionally show a post listing under 3 different conditions, based on the Current Date and Time… Would like to keep it simple, and use Radio for 3 options 1) Display Listing 24/7 2) Display during call center Hours (9-6EST) Monday To Friday 3) Display Only Monday To Friday (Hours not a concern)

This Pro tutorial shows how we can control the rendering of an element (a Top Banner Section in this example) depending on the value of a radio custom field on a Settings page when using Meta Box in Bricks.

• 24/7: If this is selected, the banner will be shown (output) all the time.
• Monday To Friday 9 am – 6 pm: If this is selected, the banner will be shown only during the weekdays between 9am and 6pm.
• Monday To Friday anytime: If this is selected, the banner will be shown only during weekdays (anytime)
• When no option is selected, the banner will not be output.

Step 1

Install Meta Box and Meta Box AIO plugins.

Go to Meta Box > Settings Pages and click New Settings Page.

Give it a title of say, “Sitewide”.

Click Publish.

Step 2

Go to Meta Box → Custom Fields and create a new field group named say “Settings Page Fields”.

Add a field like this (field export given below):

In the Settings tab, set the Location to your settings page.

Field Export json

Step 3

Click on Sitewide in the WP admin left menu and select an option.

Step 4

Edit your Header template with Bricks and add your Top Banner section above the header.

Step 5

At Settings → General, ensure that Timezone is set to the (closest) city in which the site’s business run from.

Step 6

Add the following in child theme‘s functions.php or a code snippets plugin:

// Avoid Undefined Function Error when Meta Box is not active.
if ( ! function_exists( 'rwmb_meta' ) ) {
	function rwmb_meta( $key, $args = '', $post_id = null ) {
			return false;
	}
}

add_filter( 'bricks/element/render', function( $render, $element ) {
	// if the element is not with the Bricks ID of "tbexbo", abort
	if ( $element->id !== 'tbexbo' ) {
		return $render;
	}

	// store the value of the Meta Box custom field "top_banner" in the "sitewide" Settings page into a variable
	$value = rwmb_meta( 'top_banner', [ 'object_type' => 'setting' ], 'sitewide' );

	switch ( $value ) {
		// 24/7
		case 'anytime':
			$render = true;
			break;
		
		// Monday To Friday 9 am - 6 pm
		case 'callcenterhours':
			// set $render to true if the current time is between 9am and 6pm EST on a weekday (Monday to Friday) else false
			$render = wp_date( 'N' ) < 6 && wp_date( 'G' ) >= 9 && wp_date( 'G' ) < 18;
			break;
		
		// Monday To Friday anytime
		case 'montofri':
			$render = wp_date( 'N' ) < 6;
			break;
		
		default:
			$render = false;
			break;
	}

	return $render;
}, 10, 2 );

Replace tbexbo with the Bricks ID of the element that should be conditionally output – the Top Banner section in this example.

wp_date( 'N' ) returns the day of the week as a number, with 1 being Monday and 7 being Sunday. Ex.: If today is Monday it would return 1.

wp_date( 'N' ) returns the hour of the day in 24-hour format.

$render = wp_date( 'N' ) < 6 && wp_date( 'G' ) >= 9 && wp_date( 'G' ) < 18

thus translates to:

$render = (is it a weekday) AND (it is after 9am) AND (it is before 6pm)

and it would be either true or false.