The Countdown block shows a live timer running down to the moment an event starts. It refreshes every second in the visitor’s browser, then swaps to a short text label once the event is under way.
Adding the block
In the inserter the block is called Event Countdown, in the HappenBoard category. It reads the event it is placed on, so it belongs on a single event page or in a single event template. There is nothing to select: the block picks up the current event by itself.
Two conditions have to be met or the block outputs nothing at all:
- The post it sits on must be an event. On a normal page or post it renders nothing.
- The event must have a start date. Without one there is nothing to count down to.
If you drop the block somewhere the editor cannot resolve an event, you get a placeholder telling you to move it into a single event template. Building a single event page walks through where these context blocks go.
What visitors see
Four boxes side by side: days, hours, minutes and seconds, each with a two-digit number above its label. WordPress writes the opening numbers on the server, so the countdown is already correct on the very first paint and is readable by search engines. A small script then updates the numbers once a second.
When the start time arrives, the numbers disappear and the live label takes their place. When the end time passes, the live label is replaced by the ended label.
Choosing which units to show
Open the block settings and use the Units panel. It holds one toggle each for Days, Hours, Minutes and Seconds. All four are on by default.
Turning seconds off is the usual choice for a countdown to something weeks away, where a ticking seconds box is more distracting than useful. Turning days off only makes sense for same-day events.
Changing the two labels
The Labels panel holds two text fields:
- When live: shown between the start and the end. The default is Event has started.
- After end: shown once the end time has passed. The default is Event has ended.
Replace them with anything you like, for example “Doors are open” and “This edition is over”.
Give the event an end time
If an event has a start but no end, the block treats the end as being the same moment as the start. The countdown then jumps straight from the numbers to the ended label, and the live label never appears. Set an end time on the event if you want the live label to show while the event is running. Dates, times and all-day events covers how the two fields work together.
Styling the block
The Countdown block accepts the standard block styling controls: text and background colour, padding, margin and the gap between the unit boxes, plus font size, line height and font weight. It can also be set to wide alignment when you want it to break out of the content column. Because the numbers are plain text, they inherit whatever font your theme uses.
If you would rather not build the header yourself, the HappenBoard patterns include a single event hero that already combines the featured image, the title, the countdown and the calendar buttons.