Want to build some excitement for an upcoming banquet, conference, or registration deadline? You can add a live countdown timer to any page, post, or event on your chapter site — no coding required.
Adding the timer
In the block editor, add a Shortcode block (or a Custom HTML block works too) wherever you want the timer to appear, and paste in:
[assp_countdown target="2026-09-15 08:00:00"]
Replace the date and time with your own event’s start time, in the format YYYY-MM-DD HH:MM:SS using a 24-hour clock. A few examples:
- 9:00 AM on September 15, 2026 →
2026-09-15 09:00:00 - 6:30 PM on November 1, 2026 →
2026-11-01 18:30:00 - Midnight (start of the day) on October 1, 2026 →
2026-10-01 00:00:00
That’s all you need. The timer will automatically count down the days, hours, minutes, and seconds until that moment.
This works anywhere shortcodes work — regular pages, blog posts, and event descriptions (Event Espresso) all support it the same way.
Giving it a title
Add a label to show a heading above the timer:
[assp_countdown target="2026-09-15 08:00:00" label="Annual Awards Banquet"]Choosing a look
The timer comes in four ready-made color themes:
theme="green"— ASSP green background (this is the default if you don’t specify one)theme="gold"— ASSP gold backgroundtheme="dark"— black background, gold numberstheme="light"— light gray background, green numbers
Example:
[assp_countdown target="2026-11-01 18:00:00" label="Annual Awards Banquet" theme="gold"]
If your chapter uses different brand colors than national green/gold, reach out and we can set you up with a custom color combination that matches your site.
There are also three display sizes/styles if you want something other than the boxed default:
style="card"— a filled, boxed timer (default — good for a banner or featured spot on a page)style="inline"— a lighter-weight version that sits right in a line of textstyle="minimal"— just the numbers, no box or background at all
A few more options
You don’t need any of these, but they’re available if you want to fine-tune things:
| What you want | Add this |
|---|---|
| Hide the “Days / Hrs / Min / Sec” text under the numbers | show_labels="no" |
| Leave off the seconds counter (calmer, less “ticking”) | show_seconds="no" |
| Change the message shown after the event starts | expired_text="Doors are open — see you there!" |
| Make the timer disappear completely once the event starts, instead of showing a message | hide_on_expire="yes" |
| Your event is in a different time zone than Central | timezone="America/New_York" (or your zone) |
| Left- or right-align instead of centered | align="left" or align="right" |
| Bigger or smaller numbers | size="large" or size="small" |
Combine as many as you’d like in one shortcode. For example, a smaller, inline countdown without seconds:
[assp_countdown target="2026-10-01 23:59:59" style="inline" size="small" show_seconds="no"]
Troubleshooting
Nothing shows up on the page. Double-check your date is formatted like 2026-09-15 08:00:00 — the timer needs both the date and time, separated by a space. If you’re logged in as an editor and something’s wrong with it, you’ll see a red error message telling you what to fix; visitors just won’t see anything.
The countdown looks like it’s off by an hour or two. Add a timezone if your event isn’t in Central time. For example, an event on the East Coast would use timezone="America/New_York".
I have more than one countdown on the same page and they’re both showing the same time. Make sure each shortcode has its own target date filled in correctly — it’s easy to accidentally copy/paste the same one twice.
Related (Coming Soon)
- Adding shortcodes to a page
- Working with Event Espresso event descriptions