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:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro