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:
7 comments
Christian Gnos
Hi Sridhar
Thank you for this example. Is it possible to replace this script by a meta query in the bricksbuilder?
I have a CPT for the banners (banner message, start-date, end-date, active: true or false). I have different instances of banners. It is cool to store different banner messages but the script does not handle more than one instance.
Thanks
Sridhar Katakam
See if this helps: https://brickslabs.com/querying-posts-by-date-datetime-custom-fields-in-bricks/.
Naazim Mohungoo
Hi Sridhar
with the metabox, is there a way of doing it with a modal? obviously with bricksextras as no equivalent available yet
thanks
Sridhar Katakam
should be possible.
You just have to change the element’s Bricks ID in
if ( $element->id === 'mkpnzd' ) {Michal Prokop
Thank you for this Tutorial! Metabox version would be also welcoming, to cover a wider audience.
Sridhar Katakam
Done. Updated the tutorial.
Michal Prokop
Thank you! Amazing.