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.
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:
