Dynamic Date in Bricks Countdown Element

As of Bricks 1.9.7.1, the built-in Countdown element’s Date control does not support dynamic data. That is, it is not possible to set this date from a custom field value natively.

Using BricksExtras‘ Pro Countdown element is one way of getting around this limitation.

The other option is to use the bricks/element/render filter to set the date programmatically to be equal to that of the custom field value.

This Pro tutorial shows how.

Step 1

Add a field of type ‘Date Time Picker’ using ACF.

Set Return Format to Y-m-d H:i:s.

Step 2

Edit your posts and populate the field.

Step 3

Edit the single template of your post type with Bricks.

Add a Countdown element.

Set the Time zone to where your site/business is located.

The value of Date does not matter since we are going to overwrite it via code.

Step 4

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

add_filter( 'bricks/element/render', function( $render, $element ) {
    if ( $element->id === 'txastx' && class_exists( 'acf' ) ) {
        $element->settings['date'] = get_field( 'countdown_date' );
    }

    return $render;
}, 10, 2 );

Replace txastx with the Bricks ID of your Countdown element.

Replace countdown_date with the name of your field.