How to add a countdown timer to a page or post

Prerequisites

• Editor access to the page or post, with permission to use the Custom HTML block
• The exact target date and time, including the time zone and whether daylight saving time will be active

Steps

1. Open the page or post in the block editor and add a Custom HTML block where you want the countdown to appear.

2. Paste the following code into the block, then edit the values marked below to match your content:

   <p id="countdown-number">&hellip;</p>
   <p id="countdown-label">days left</p>
   <noscript>
     <p>Check back soon for the current countdown.</p>
   </noscript>
   <script>
   document.addEventListener("DOMContentLoaded", function () {
     var target = new Date("2026-12-31T23:59:59-06:00");
     var msRemaining = target - new Date();
     var numEl = document.getElementById("countdown-number");
     var labelEl = document.getElementById("countdown-label");
   
     if (msRemaining > 0) {
       var days = Math.ceil(msRemaining / 86400000);
       if (numEl) { numEl.textContent = days; }
       if (labelEl) { labelEl.textContent = days === 1 ? "day left" : "days left"; }
     } else {
       // Deadline has passed — swap to a closed-out message instead of showing "0 days left" forever
       if (numEl) { numEl.textContent = "\u2713"; }
       if (labelEl) { labelEl.textContent = "Deadline has passed"; }
     }
   });
   </script>
   

3. Set your target date. Edit the date string in new Date("2026-12-31T23:59:59-06:00") to your deadline. Use this format: YYYY-MM-DDTHH:MM:SS-06:00 if the target date will be in Central Standard Time. Use YYYY-MM-DDTHH:MM:SS-05:00 if the date falls in Central Daylight Time. Check daylight saving time status.

4. Edit the label text in "days left" and "day left" if you want different wording — keep both the plural and singular forms so the label still reads correctly on the final day.

5. Edit the post-deadline message. The else branch runs once the target date has passed, so the countdown doesn't sit at "0 days left" forever. Change "Deadline has passed" to whatever's accurate once the window closes — for example, what to do next, or that a process has ended. If the number should show something other than a checkmark (a dash, "Closed," etc.), edit numEl.textContent in that branch too.

6. Preview the page. The countdown calculates from the visitor's own device clock the moment the page loads, so it stays accurate without you editing it again. Check both states — before and after the deadline — by temporarily testing with a target date in the past.