--- title: "How to Add a Countdown Timer in WordPress?" url: https://nexterwp.com/docs/add-a-countdown-timer-in-wordpress/ date: 2024-12-09 modified: 2026-08-10 author: "Aditya Sharma" description: "A countdown timer creates urgency on your WordPress pages and prompts visitors to take action before a deadline. Sale pages, product launches, and event registrations all benefit from a visible..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Countdown-Timer-in-WordPress_-1024x519.jpg word_count: 1081 --- # How to Add a Countdown Timer in WordPress? ## Key Takeaways - Nexter Blocks Countdown block offers three countdown types, Normal, Evergreen (Pro), and Fake No (Pro), for fixed deadlines, per-visitor deadlines, and fake scarcity counters. - Countdown block supports multiple display styles, and the Simple style includes an Inline Style toggle that shows the timer in a horizontal row for banner or header-bar sections. - Countdown Expiry lets the page stay unchanged, show a custom Message, display a Pattern (Pro), or Redirect to another page when the countdown reaches zero. - Countdown labels are editable for Days, Hours, Minutes, and Seconds, but the Label tab is not available for the Fake No counter option. A countdown timer creates urgency on your WordPress pages and prompts visitors to take action before a deadline. Sale pages, product launches, and event registrations all benefit from a visible timer that counts down to a set date and time. The Countdown block in [Nexter Blocks](https://nexterwp.com/nexter-blocks/) gives you three countdown types and multiple display styles, so you can add a WordPress countdown timer without writing custom code. **Best Used For:** - eCommerce sale pages where a limited-time offer expires at a fixed date- Product launch pages with a public reveal countdown- Webinar and event registration pages counting down to the start time [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-countdown-timer/) ## Required Setup - Make sure the default WordPress Block editor is active.  - You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated. - Make sure the Countdown block is activated, to verify this visit Nexter → Blocks → and Search for Countdown and activate. - This is a Freemium block, to unlock the extra features, you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text). ## Learn via Video Tutorial https://www.youtube.com/watch?v=NDRUShspxfM&t=4s ## How to activate the Countdown Block? Go to  - **Nexter **→ **Blocks ** - **Search **the block name and** turn**** on the toggle**. ![](https://nexterwp.com/wp-content/uploads/2024/12/Nexter-Blocks-Countdown-Activation.png) ## Key Features - **Multiple Countdown Types** - Choose from Normal (fixed end date), Evergreen (Pro, resets per visitor), or Fake No (Pro, fake number counter). Use Normal for sale events, Evergreen when you want each visitor to see a personal deadline, and Fake No for social-proof displays. For urgency-focused pages, pair the countdown with the [Popup Builder block](/docs/add-popup-builder-in-wordpress/) to display a timed offer as a popup overlay. - **Multiple Countdown Styles** - Choose from different display styles for the timer. The Simple style includes an Inline Style option that lets you display the countdown in a horizontal row, which is useful for banner or header-bar sections. - **Show Message** - Display a custom text message when the countdown reaches zero. Use this when you want to inform visitors that a sale has ended or that enrollment is now closed. - **Show WordPress Pattern** (Pro) - Display any saved WordPress pattern when the countdown ends. Use this when you need to show a richer replacement section, such as an alternative offer layout or a confirmation block. - **Page Redirect** - Redirect visitors to a different page when the countdown reaches zero. Use this when you want to automatically send visitors to a new sale page or an alternative offer after the deadline. ## How to Use the Countdown Block? Add the Countdown block to the page. Then click on the **Design from Scratch** button to design the layout from scratch. ![](https://nexterwp.com/wp-content/uploads/2024/12/countdown-design-type-1024x192.png) > *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.* ### Countdown Options From the **Countdown Setup** section, select the countdown type. You will find three options: - **Normal** - [Create a fixed-date countdown](https://nexterwp.com/docs/add-wordpress-countdown-timer-in-hello-top-bar-sale-fomo-banner/) that counts to the same deadline for all visitors. Use this for sale events, product launches, or event registrations where all visitors share the same end date. - **Evergreen** (Pro) - [Create a per-visitor countdown](https://nexterwp.com/docs/create-an-evergreen-countdown-timer-in-wordpress-loop-cookie-based-timer-per-user/) that resets based on a cookie when each visitor first lands. Use this when you want a personalized deadline that increases urgency regardless of when the visitor arrives. - **Fake No** (Pro) - [Create a fake number counter](https://nexterwp.com/docs/add-a-fake-scarcity-counter-in-wordpress/) that decreases over time to show apparent scarcity. Use this when you want to display reducing stock counts or viewer numbers to drive purchase urgency. Select the countdown type that fits your use case. The steps below use the Normal type as an example. Select a display style from the **Countdown Style** section. For the Simple style only, you will see an **Inline Style** toggle. Enable it to display the countdown in a horizontal row, which works well in banner or header-bar sections. In the **Time** and **Date** sections, set the countdown end date and time. > *Note: The time will be set based on your time zone.* ### Action After Countdown Ending From the **Countdown Expiry** section, select what happens when the countdown reaches zero. You will find four options. To show a visual goal-progress meter alongside the countdown on the same page, the [Progress Bar block](/docs/add-a-progress-bar-in-wordpress/) in Nexter Blocks lets you add a horizontal percentage bar that updates as visitors move toward a goal.  ![](https://nexterwp.com/wp-content/uploads/2024/12/countdown-expiry-new.png) - **None** - The page remains unchanged when the countdown ends. Use this when you want to keep displaying the block after the deadline without triggering any additional action. - **Message** - [Show a custom message](https://nexterwp.com/docs/show-custom-text-message-after-countdown-timer-ends-in-wordpress/) when the countdown ends. Use this when you want to inform visitors that a sale has ended or that registration is now closed. - **Pattern** (Pro) - [Display any WordPress pattern](https://nexterwp.com/docs/show-a-particular-wordpress-pattern-template-after-countdown-ends/) when the countdown ends. Use this when you need to show a complete replacement section with a new CTA or alternative offer. - **Redirect** - [Redirect to another page](https://nexterwp.com/docs/redirect-to-different-page-after-wordpress-countdown-ends/) when the countdown ends. Use this when you want to automatically send visitors to a different landing page after the deadline passes. > *Note: The Countdown Complete option is only available with the Normal countdown option.* ### Label Enable the **Show Labels** toggle to display labels below each number in the countdown. When enabled, you will see individual label fields: ![](https://nexterwp.com/wp-content/uploads/2024/12/countdown-show-label-new.png) - **Days Section Text** - Edit the label shown below the days counter. This is useful when you want to localize the label or replace it with a custom term that fits your campaign. - **Hours Section Text** - Edit the label shown below the hours counter. - **Minutes Section Text** - Edit the label shown below the minutes counter. - **Seconds Section Text** - Edit the label shown below the seconds counter. > *Note: The Label tab is not available for the Fake No counter option.* ## How to Style the Countdown Block? To style the Countdown block, go to the **Style** tab. **Counter Styling** - Controls the typography, color, padding, margin, and border of the countdown numbers. You can also manage the countdown label color, background, and border individually. ![](https://nexterwp.com/wp-content/uploads/2024/12/countdown-style-new.png) **Expiry Message** - Appears when you select the Message option in Countdown Expiry. Control the message typography, color, and spacing. **Label Styling** - Controls the padding and margin of the countdown labels. **Fake Message** - Appears when the Fake No option is enabled. Control the message alignment, typography, color, padding, margin, and border. **Fake Number** - Appears when the Fake No option is enabled. Control the counter number typography, color, and size. **Background** - Controls the background color, gradient, or image of the countdown timer container. Advanced options are available in the **Advanced** tab and apply to all Nexter Blocks. [See the Advanced tab documentation for details.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)