How to Add a Countdown Timer Widget in WordPress (3 Easy Ways)

Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.

The easiest way to add a countdown timer in WordPress is to install a dedicated countdown block plugin, insert its block into a page or post, and set the target date and time. If you need complete design control, use a Custom HTML block with HTML, CSS, and JavaScript. For a sidebar, footer, page builder, or WooCommerce location, choose a plugin that supports the required shortcode or widget placement.

Before publishing, confirm the deadline’s timezone and decide what should happen when the timer reaches zero. A countdown displays time; it does not automatically close registration, disable checkout, invalidate a coupon, or restrict access.

#	Preview	Product	Price
1		BN-LINK Indoor Countdown Timer with Repeat Function, 3-Prong Outlet Timer	$11.99	Buy on Amazon
2		BN-LINK 12 Hour Indoor Mechanical Accurate Countdown Timer, 3-Prong Grounded Outlet, 15 Minute...	$9.99	Buy on Amazon
3		Indoor Countdown Timer Outlet, NEARPOW Auto Shut Off Timers with Large Screen,Customize...	$14.99	Buy on Amazon
4		Techbee 1 s to 999 h Interval, Short/Long On-Off Repeat Cycle Timer Plug Outlet with Countdown and...	$18.99	Buy on Amazon
5		BN-LINK 2 Pack Indoor Countdown Timer with Repeat Function, 3-Prong	$21.99	Buy on Amazon

Choose the right WordPress countdown method

In WordPress, “widget” can mean several different things: a block in the Site Editor, a block placed in a widget area, a classic widget, a shortcode, an Elementor widget, or a WooCommerce placement. Check which type your theme and chosen plugin support before installing anything.

Before you begin

• Make sure you can access the WordPress dashboard.
• Confirm that you can install plugins, or ask an administrator to do it.
• Choose the page, post, template, sidebar, footer, or product area where the timer will appear.
• Write down the exact deadline, including its timezone. For example: December 31, 2026, at 11:59:59 p.m. Eastern Time.
• Decide what happens after expiry: an expired message, replacement call to action, waitlist link, hidden timer, or a timer that remains at zero.
• Prepare a private preview page or test device.

Also decide whether the deadline is fixed or visitor-specific. A fixed-date timer counts toward one real deadline shared by everyone. An evergreen timer gives each visitor a separate deadline and should only be used when that deadline is genuinely created and enforced for that visitor.

#1 Best Overall

Sale

BN-LINK Indoor Countdown Timer with Repeat Function, 3-Prong Outlet Timer

• ✓ FULLY ADJUSTABLE: Up to 6 hours countdown, the repeat function will run your previous setting again
• ✓ SIMPLE AND EASY TO USE: 6 Countdown Time buttons (15min, 30min, 1hour, 2hour, 4hour and 6hour), 1 ON/OFF Override button, 1 Repeat button.
• ✓ VERSATILE & CUSTOMIZABLE: Use for your home curling iron, hair straighter, coffee maker, slow cookers, crafting tools, Panini grills and many other household appliances.
• ✓ SAFE & RELIABLE: ETL listed, and conforms to UL Std. no. 917. Rated 125V, 60Hz, 1875W/15A General Purpose, 15A Resistive, 8A Tungsten, 1/2 HP, TV-5
• ✓ SAVE ENERGY & MONEY: Save costs on electricity. Use for lights, coffee machines, fans, and much more!

$11.99

Buy on Amazon

Method 1: Add a countdown with a dedicated block plugin

This is the best option for most beginners who need a countdown in a post or page without writing code. One example is Countdown Timer Block, which is listed in the WordPress plugin directory as a Gutenberg block with sidebar settings and reusable countdown blocks.

Install and configure the block

1. Open Plugins → Add New in the WordPress dashboard.
2. Search for Countdown Timer Block or Countdown Timer.
3. Check the plugin name, author, compatibility information, update history, reviews, and support activity.
4. Click Install Now, then click Activate.
5. Open the page or post where the countdown should appear.
6. Click the Block Inserter, or type /countdown if the plugin provides that block.
7. Insert the countdown block.
8. Set the target date and time. Select the timezone if the plugin provides a timezone control.
9. Choose the units to display, such as days, hours, minutes, and seconds.
10. Customize the labels, alignment, colors, typography, background, border, spacing, and layout.
11. Add nearby text explaining the deadline, such as “Registration closes December 31, 2026, at 11:59 p.m. Eastern Time.”
12. Configure the expired state if the plugin supports one.
13. Preview the page on desktop and mobile, then click Publish or Update.

The published page should show a live countdown that decreases according to the plugin’s implementation. When it reaches zero, the plugin may leave the timer at zero, show an expired message, hide the timer, or provide another action. Do not assume a particular behavior unless the plugin’s documentation or settings explicitly provide it.

The WordPress.org listing for Countdown Timer Block identifies advanced expiry behavior, including custom content after expiry or hiding the timer at zero, as Pro functionality. Treat those as plugin-specific features rather than capabilities provided by every countdown block.

Advantages and limitations

• Advantages: no coding, quick setup, visual controls, and less risk of JavaScript being stripped from post content.
• Limitations: you depend on the plugin, styling and behavior are limited by its controls, and advanced expiry or placement features may require a paid version.
• The plugin listing says front-end scripts are loaded only on pages where its block is used. Actual performance still depends on the plugin, theme, caching, other assets, and page configuration.

Method 2: Add a countdown with a Custom HTML block

Use this method when you want a lightweight, custom-designed timer and have permission to add JavaScript. WordPress documents the Custom HTML block as a way to enter HTML and preview its output. Current documentation for WordPress 7.0 also describes separate CSS and JavaScript panels for users with the unfiltered_html capability. Older WordPress installations or users without that capability may not have the same panels, and WordPress may remove disallowed markup such as <script>.

Rank #2

BN-LINK 12 Hour Indoor Mechanical Accurate Countdown Timer, 3-Prong Grounded Outlet, 15 Minute Increments, Energy Saving for Kitchen, Phone Charger, Lamps, Holiday Decoration 1875W, 1/2 HP, ETL Listed

• ✓ SIMPLE AND EASY TURN-DIAL OPERATION: Simply turn the dial to start the countdown. Timer will automatically turn off once the desired time has passed.
• ✓ FULLY ADJUSTABLE: Up to 12 hours countdown with 15 minute increments!
• ✓ MANUAL ON MODE: Flip the switch to the ‘On’ position to keep bypass the timer function
• ✓ SAFE & RELIABLE: ETL listed, and conforms to UL Std. no. 917. Rated 125V, 60Hz, 1875W/15A General Purpose, 15A Resistive, 8A Tungsten, 1/2 HP, TV-5
• ✓ SAVE ENERGY & MONEY: Save costs on electricity. Use for lights, coffee machines, fans, and much more!

$9.99

Buy on Amazon

For technical reference, WordPress identifies this block as core/html, a static block whose markup is saved in post content: Custom HTML block reference.

HTML

<div
  class="wp-countdown"
  data-countdown="2026-12-31T23:59:59-05:00"
  role="timer"
  aria-live="polite"
  aria-atomic="true"
>
  <span class="wp-countdown__label">Time remaining:</span>
  <span class="wp-countdown__value">Loading…</span>
</div>

<noscript>
  The countdown requires JavaScript. Please check the event details for the deadline.
</noscript>

CSS

.wp-countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #f3f4f6;
  color: #111827;
  font-weight: 700;
  text-align: center;
  border-radius: 0.5rem;
}

.wp-countdown__value {
  font-variant-numeric: tabular-nums;
}

JavaScript

(() => {
  const timers = document.querySelectorAll(".wp-countdown");

  timers.forEach((timer) => {
    const target = Date.parse(timer.dataset.countdown);
    const value = timer.querySelector(".wp-countdown__value");

    if (!Number.isFinite(target) || !value) {
      value.textContent = "Invalid deadline";
      return;
    }

    const update = () => {
      const remaining = target - Date.now();

      if (remaining <= 0) {
        value.textContent = "The deadline has passed.";
        clearInterval(interval);
        return;
      }

      const totalSeconds = Math.floor(remaining / 1000);
      const days = Math.floor(totalSeconds / 86400);
      const hours = Math.floor((totalSeconds % 86400) / 3600);
      const minutes = Math.floor((totalSeconds % 3600) / 60);
      const seconds = totalSeconds % 60;

      value.textContent =
        `${days}d ${String(hours).padStart(2, "0")}h ` +
        `${String(minutes).padStart(2, "0")}m ` +
        `${String(seconds).padStart(2, "0")}s`;
    };

    update();
    const interval = setInterval(update, 1000);
  });
})();

Exact setup path

1. Edit the target page or post.
2. Add a Custom HTML block. You can use the Block Inserter or type /html in a new paragraph block.
3. Paste the HTML into the block.
4. Add the CSS and JavaScript through the available panels if your WordPress version and user permissions provide them.
5. If those panels are unavailable, place the CSS in Appearance → Editor → Styles → Additional CSS where available, or use your theme’s documented CSS area. Add JavaScript through a child theme, custom plugin, or reputable snippets-management tool rather than pasting executable JavaScript into ordinary post content.
6. Replace 2026-12-31T23:59:59-05:00 with the actual deadline and correct UTC offset.
7. Preview the page and confirm that the timer works.
8. Save the page, log out, and test the public URL in a private browsing window.

Important limitations of the code example

• The timestamp uses ISO 8601 format with an explicit offset, so it does not depend on each visitor’s local timezone.
• -05:00 is only an example. It may not be correct for your event, and a fixed offset may not represent a named timezone throughout the year when daylight-saving rules change.
• Verify the timestamp against the intended event timezone before publishing, especially for a high-stakes deadline.
• The browser timer only displays remaining time. It does not enforce a sale, close registration, disable checkout, invalidate a coupon, or prevent access.
• The result can be affected by the visitor’s device clock. Server-side verification is required when the deadline must be enforced.
• A continuously changing aria-live region may be noisy for screen-reader users. Test it with assistive technology and consider less frequent announcements or a static text deadline.

Method 3: Use a shortcode- or widget-compatible plugin

Choose this route when the countdown must appear outside normal post content—for example, in a sidebar, footer, header, classic widget area, page builder, or WooCommerce product area.

The WordPress.org countdown-timer directory includes plugins advertising different combinations of blocks, shortcodes, widget placement, Elementor integration, WooCommerce support, recurring events, and product-page timers. These features vary by plugin and are not interchangeable.

Setup path

1. Go to Plugins → Add New.
2. Search for terms such as countdown timer, countdown widget, countdown shortcode, or WooCommerce countdown.
3. Review active-installation information, recent updates, “Tested up to” data, support activity, reviews, required WordPress version, and the exact placement methods supported.
4. Install and activate the selected plugin.
5. Create a timer in the plugin’s settings or editor.
6. Copy the generated shortcode if one is provided.
7. Paste it into the appropriate location: a Shortcode block, post or page, shortcode-enabled widget, sidebar, footer, page-builder module, or WooCommerce location.
8. Save the changes and test the public page.

A shortcode may appear as plain text if the plugin is deactivated or if it is pasted into a location that does not process shortcodes. A plugin’s “widget” may also mean a classic widget, block widget, shortcode, Elementor widget, or WooCommerce element, so verify the terminology in its documentation.

Rank #3

Indoor Countdown Timer Outlet, NEARPOW Auto Shut Off Timers with Large Screen,Customize Countdown,Repeat and Memory Function, Plug In Timers for Electrical Outlet for Charger Lights, 3-Prong 15A/1875W

• Dual Outlets with Large Screen: This 3-prong countdown timer outlet can control 2 appliances at the same time. Dual grounded outlets make it equal to 2 single-outlet indoor timers outlet. With Large LCD backlight screen, you can set your schducle and review it more ease at night
• Customize Countdown Function: Up to 99 hours 59 minutes countdown, you can simply press 5min/15min/30min/1H/2H/4H button to start, or you can use customize time options, only press the 5min/15min/30min/1H/2H/4H buttons repetaly to add up time options. NEARPOW indoor dual plug-in outlet timer offers a more feliaxble range of time settings to enhance different household appliances needs
• Repeat Function Mode: Save energy and save money timer outlet, can be uses for curling iron, hair straighter, coffee maker, slow cookers, crafting tools etc. Using repeat function to saving your time and energy to aovid setting it multiple times, it will run your previous setting again at the same time everyday until you turn off it(Not repeat multi times within one day)
• Memory Function & Space Saving Design: With 3.66 ×1.6×1.6 inchs size, small, compact and well-designed electrical outlet timer, helps to use the space of socket reasonablely. With memory function, no worry to reset it again and again when you meet a power off at countdown mode (Not Work at Repeat Mode)
• Widely Used: Countdown timer outlet, 125V/60HZ Input, 1875W 15A General and Resistive for indoor use only. Suitable for e-bike charging, coffee mug warmer, charger, electric blanket, boot dryer, electric heater, heated blanket, WiFi router etc

$14.99

Buy on Amazon

When this method makes sense

• Use it for a site-wide sidebar or footer timer.
• Use it when a page builder provides a dedicated widget or module.
• Use a WooCommerce-specific timer only when its rules match the product, sale, or campaign.
• Use recurring or evergreen features only when the underlying campaign system genuinely creates and enforces those deadlines.

Fixed-date versus evergreen countdowns

Fixed-date countdown

A fixed-date timer counts toward one real deadline. Use it for an event, webinar, livestream, product launch, public sale ending time, course enrollment deadline, or application closing date. Everyone should see the same target time.

Evergreen countdown

An evergreen timer may show a different deadline to each visitor. Use it only when each visitor genuinely receives an individualized offer period, the system records that deadline, and the offer terms explain it clearly. Do not use a resetting timer to create false scarcity or imply that a shared public deadline exists when it does not.

Common problems and fixes

The timer does not appear

Confirm that the block, shortcode, or widget was saved and that the plugin is active. Check whether the timer is hidden on the current device, page, product, or template. If a shortcode displays as text, move it to a Shortcode block or a location that supports shortcode processing.

JavaScript disappeared after saving

Check whether your user role has the unfiltered_html capability. WordPress may strip scripts from Custom HTML for users without that permission. Use a dedicated countdown plugin, add the script through a child theme or custom plugin, or use a reputable snippets tool. Do not grant broad permissions casually.

Rank #4

Techbee 1 s to 999 h Interval, Short/Long On-Off Repeat Cycle Timer Plug Outlet with Countdown and Light Sensor, Waterproof for Outdoor,15A 1HP

• Customizable Continuous Intervals: the on and the off repetitive intervals can be as short as 1s, and as long as 999 hours (about 41.5days), more flexible for your different needs. Please note: this timer doesn't allow programming based on actual time
• 3 Cycle Modes: the on and off interval cycle can be set to run infinitely(24/7), or to run only during the day or only at night for different purposes
• 4 ON/OFF Modes: always ON/OFF mode allows you to manually override the timer, allows quick set to on from dawn to dusk, or on from dusk to dawn
• 2 Countdown Modes: The countdown from dusk/dawn allows your devices to start automatically at dusk/dawn every day, run for the set duration, and then stop completely
• Safe to Use and Widely Used: weatherproof design for safe use outdoor and indoor; widely used on all kinds of electric pumps, lights, fans, heaters and humidifiers

$18.99

Buy on Amazon

The timer shows the wrong time

Check the site timezone, plugin timezone setting, selected event timezone, and timestamp offset. Confirm whether the plugin interprets the selected time as the site timezone or the visitor’s local timezone. Also check daylight-saving changes and the visitor’s device clock.

The timer is stuck at zero

Verify that the target date is in the future and that the timestamp is valid. Clear page, browser, and CDN caches, then test the public page in a private window. Confirm that the expiry behavior is configured and that the browser console does not show a JavaScript error.

The timer is not updating after caching

Browser-side JavaScript normally continues to tick on a cached page, but caching can preserve stale server-rendered markup or an outdated expired state. Test logged-in and logged-out views, a private window, a mobile device, and the CDN-cached public URL. Purge caches if the displayed markup is stale.

The timer overflows on mobile

Allow the units to wrap, shorten labels, reduce padding, and check the page at narrow widths. Make sure digits do not create horizontal scrolling or push the main call to action below the fold.

Best Value

BN-LINK 2 Pack Indoor Countdown Timer with Repeat Function, 3-Prong

• ✓ FULLY ADJUSTABLE: Up to 6 hours countdown, the repeat function will run your previous setting again
• ✓ SIMPLE AND EASY TO USE: 6 Countdown Time buttons (15min, 30min, 1hour, 2hour, 4hour and 6hour), 1 ON/OFF Override button, 1 Repeat button.
• ✓ VERSATILE & CUSTOMIZABLE: Use for your home curling iron, hair straighter, coffee maker, slow cookers, crafting tools, Panini grills and many other household appliances.
• ✓ SAFE & RELIABLE: ETL listed, and conforms to UL Std. no. 917. Rated 125V, 60Hz, 1875W/15A General Purpose, 15A Resistive, 8A Tungsten, 1/2 HP, TV-5
• ✓ SAVE ENERGY & MONEY: Save costs on electricity. Use for lights, coffee machines, fans, and much more!

$21.99

Buy on Amazon

Expired content does not appear

Confirm that the selected plugin supports replacement content and that the feature is enabled. Some plugins provide only a zero state in their free version, while custom expiry content may require a premium version. If the deadline is operationally important, update the page or campaign system separately rather than relying only on the visual timer.

The timer conflicts with a theme or page builder

Test the timer in a basic page or staging environment, then check the theme and page-builder documentation. Temporarily disable optimization or minification features to identify conflicts. Keep a backup and reactivate components one at a time.

Best practices for a reliable countdown

• Publish the deadline in plain text. A visitor should not need to interpret four changing numbers to understand when an event or offer ends.
• Use an explicit timezone. State the location or timezone in the nearby copy.
• Define the expired state. Use “Registration is now closed,” “This offer has ended,” a next-event link, or a waitlist rather than leaving visitors confused.
• Test after caching. Check logged-in, logged-out, mobile, private browsing, and CDN-cached views.
• Make it accessible. Use sufficient contrast, meaningful labels, keyboard-friendly controls, and a useful expired message. Do not rely on color or animation alone.
• Do not treat the timer as enforcement. The booking, commerce, registration, or access-control system must enforce the actual deadline.
• Review plugin maintenance. Install from WordPress.org or a trusted vendor, check updates and support activity, keep WordPress and extensions updated, and remove abandoned plugins.
• Avoid unofficial or nulled plugin ZIP files. WordPress’s block-plugin guidance describes the Block Directory as a safer, pre-vetted place to find block plugins, although not every plugin containing blocks belongs to that narrower directory category.

Which option should you use?

Choose a dedicated countdown block plugin if you want the fastest no-code setup in a post or page. Choose the Custom HTML method if you need a small, custom timer and can safely manage JavaScript. Choose a shortcode- or widget-compatible plugin if placement in a sidebar, footer, page builder, or WooCommerce area matters more than keeping the implementation minimal.

Whichever method you select, set the correct timezone, display the real deadline in text, test the expired state, and verify the public page after caching. Those checks matter more than the visual style of the timer.

Quick Recap

SaleBestseller No. 1

BN-LINK Indoor Countdown Timer with Repeat Function, 3-Prong Outlet Timer

$11.99

Bestseller No. 2

BN-LINK 12 Hour Indoor Mechanical Accurate Countdown Timer, 3-Prong Grounded Outlet, 15 Minute Increments, Energy Saving for Kitchen, Phone Charger, Lamps, Holiday Decoration 1875W, 1/2 HP, ETL Listed

✓ FULLY ADJUSTABLE: Up to 12 hours countdown with 15 minute increments!

$9.99

Bestseller No. 3

Indoor Countdown Timer Outlet, NEARPOW Auto Shut Off Timers with Large Screen,Customize Countdown,Repeat and Memory Function, Plug In Timers for Electrical Outlet for Charger Lights, 3-Prong 15A/1875W

$14.99

Bestseller No. 4

Techbee 1 s to 999 h Interval, Short/Long On-Off Repeat Cycle Timer Plug Outlet with Countdown and Light Sensor, Waterproof for Outdoor,15A 1HP

$18.99

Bestseller No. 5

BN-LINK 2 Pack Indoor Countdown Timer with Repeat Function, 3-Prong

$21.99

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.