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.

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:

add_filter( 'bricks/element/render', function( $render, $element ) {
	// ensure that ACF is active.
	if ( ! class_exists( 'ACF' ) ) {
		return $render;
	}

	// Render banner element (ID "rzcnfn") during the set start and end dates
	if ( $element->id === 'rzcnfn' ) {
		$start_date = get_field( 'banner_start_date', 'option' );
		$end_date = get_field( 'banner_end_date', 'option' );

		// create a new DateTime object using the start date's string in the timezone set in WP settings
		$start_date_object = new DateTimeImmutable( $start_date, wp_timezone() );
		// format the above object into Unix timestamp
		$start_date_timestamp = $start_date_object->format( 'U' );
		
		// create a new DateTime object using the end date's string in the timezone set in WP settings
		$end_date_object = new DateTimeImmutable( $end_date, wp_timezone() );
		// format the above object into Unix timestamp
		$end_date_timestamp = $end_date_object->format( 'U' );

		return $start_date_timestamp <= time() && $end_date_timestamp >= time();
	}

	return $render;
  }, 10, 2 );

Replace both instances of rzcnfn with your Bricks ID for the banner section element.

---

Meta Box

If you want to use Meta Box instead of ACF:

Install Meta Box and Meta Box All In One extensions.

At Meta Box → Settings Pages create a new settings page named say, “Sitewide”.

Create a new field group having Date Picker or Datetime Picker type of fields attached to your settings page. Here‘s the export file.

Click on Sitewide admin menu item and populate the fields.

Add a Section above your regular site header in your Header template and add a Basic Text element inside it having:

{mb_sitewide_banner_text}<br>Hurry! Offer available only between {mb_sitewide_banner_stat_date} and {mb_sitewide_banner_end_date}

Add this in child theme’s functions.php:

add_filter( 'bricks/element/render', function( $render, $element ) {
	// prevent "Fatal error: Uncaught Error: Call to undefined function rwmb_get_value()" if Meta Box is not active.
	if ( ! function_exists( 'rwmb_get_value' ) ) {
		function rwmb_get_value( $key, $args = [], $object_id = null ) {
			return null;
		}
	}

	// Render banner element (ID "mkpnzd") during the set start and end dates
	if ( $element->id === 'mkpnzd' ) {
		$start_date = rwmb_get_value( 'banner_start_date', ['object_type' => 'setting'], 'sitewide' );
		$end_date = rwmb_get_value( 'banner_end_date', ['object_type' => 'setting'], 'sitewide' );

		// create a new DateTime object using the start date's string in the timezone set in WP settings
		$start_date_object = new DateTimeImmutable( $start_date, wp_timezone() );

		// format the above object into Unix timestamp
		$start_date_timestamp = $start_date_object->format( 'U' );

		// create a new DateTime object using the end date's string in the timezone set in WP settings
		$end_date_object = new DateTimeImmutable( $end_date, wp_timezone() );

		// format the above object into Unix timestamp
		$end_date_timestamp = $end_date_object->format( 'U' );

		return $start_date_timestamp <= time() && $end_date_timestamp >= time();
	}

	return $render;
  }, 10, 2 );

Replace mkpnzd with the Bricks ID of your Section.

References

https://www.epochconverter.com/

https://brickslabs.com/custom-conditions-in-bricks-builder/

https://docs.metabox.io/fields/datetime/

https://docs.metabox.io/functions/rwmb-get-value/