Seasonal banner display in Bricks

This Pro tutorial shows how a banner Section can be conditionally output only during/between the start and end dates set in ACF Options page in Bricks.

Update on 17 Aug 2022: Meta Box-specific changes are also provided.

Step 0 - Set timezone

Go to Settings → General and select the city in which the website business operates from for the Timezone.

If this is not set, the times will be GMT-based (universal time instead of local time).

Step 1 - Create ACF Options page

Install and activate ACF Pro.

Add this code in child theme's functions.php or a code snippets plugin:

/**
 * Create ACF Options page
 * @link https://www.advancedcustomfields.com/resources/options-page/
 */
if ( function_exists( 'acf_add_options_page' ) ) {
	acf_add_options_page();
}

Step 2 - Set up the fields

Create a new field group called say, "Banner" having these 3 fields:

  • Banner Text - Wysiwyg Editor
  • Banner Start Date - Date Time Picker (or Date Picker)
  • Banner End Date - Date Time Picker (or Date Picker)

The Display and Return formats can be any.

Screenshot from my test site

Location rule: Options Page = Options.

Step 3 - Populate the fields

Click on Options in the admin menu and populate the fields.

Step 4 - Add the banner in Header

Edit your Header template with Bricks.

Add a Section above your actual header containing logo and nav menu. You may want to change its label to Banner.

Add a Basic Text element inside the Section's Container.

Set its text to:

{acf_banner_text}<br>Hurry! Offer available only between {acf_banner_start_date} and {acf_banner_end_date}

Make design changes as needed.

Step 5 - bricks/element/render filter

Add this code 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