15th Aug '22
/
7 comments

Seasonal banner display in Bricks

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

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

[Function] Current Term Has Children

[Function] Current Term Has Children

Updated on 20 Jul 2024 A user asks: I'm working on an archive template for WooCommerce products. I'm trying to hide a section if there…
Conditional Output on the First Page of Archives in Bricks

Conditional Output on the First Page of Archives in Bricks

How to output an element on an archive page only if we're on the first page of the archive.
Categories:
Pro
Month and Day Condition in Bricks

Month and Day Condition in Bricks

This Pro tutorial shows how we can define a custom function that takes in a month in the three-letter format (like Dec) and a day…
Categories:
Pro
Condition to Check if the Current Category Has At Least One Child

Condition to Check if the Current Category Has At Least One Child

Looking to render an element in the category archive Bricks template only if the category of the current category archive page is a parent? This…
Categories:
Condition for Checking Current Post Category in Bricks

Condition for Checking Current Post Category in Bricks

How we conditionally display an element based on the current post's categories.
Categories:
Pro
Checking if the current Page/Post has Children i.e. is a Parent in Bricks

Checking if the current Page/Post has Children i.e. is a Parent in Bricks

Shows how we can check whether the current Page or Post (of any hierarchical post type) is a parent
Categories:
Pro
Conditional Output in Bricks based on if Content has Headings

Conditional Output in Bricks based on if Content has Headings

How to prevent the output of the table of contents if the content has no headings.
Categories:
Tags:
Pro
Checking ‘PublishPress Future’ plugin’s Future Action enabled posts

Checking ‘PublishPress Future’ plugin’s Future Action enabled posts

PublishPress Future is a handy plugin for scheduling actions like unpublishing or deleting posts (of any post type) at a specified date and time in…
Categories: