---
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-04-14
author: "Aditya Sharma"
description: "Creating a sense of urgency can significantly enhance user engagement and drive conversions on your website. One effective way to achieve this is by incorporating a countdown timer in your..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Countdown-Timer-in-WordPress_-1024x519.jpg
word_count: 739
---

# How to Add a Countdown Timer in WordPress?

## Key Takeaways

- Nexter Blocks offers a Countdown block that allows users to add different types of countdown timers to their WordPress website.
- The Countdown block includes three countdown types: Normal, Evergreen (Pro), and Fake No (Pro).
- Users can set actions after the countdown ends, including showing a message, using a WordPress pattern (Pro), or redirecting to another page.
- The Countdown block provides styling options for typography, color, padding, margin, and border for the countdown timer and labels.

Creating a sense of urgency can significantly enhance user engagement and drive conversions on your website. One effective way to achieve this is by incorporating a countdown timer in your WordPress site.

With the Countdown block from Nexter Blocks, you can easily add different types of countdown timers to your WordPress website.

[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 **- You can choose from three countdown types Normal, Evergreen (Pro), and Fake No (Pro).

- **Multiple Countdown Styles** - You can choose from multiple countdown styles.

- **Show Message** - You can [show a message after the countdown timer ends](https://nexterwp.com/docs/show-custom-text-message-after-countdown-timer-ends-in-wordpress/).

- **Show WordPress Pattern** (Pro) - You can [show content using a WordPress pattern after the countdown timer ends](https://nexterwp.com/docs/show-a-particular-wordpress-pattern-template-after-countdown-ends/).

- **Page Redirect** - You can easily [redirect to a new page after the countdown timer ends](https://nexterwp.com/docs/redirect-to-different-page-after-wordpress-countdown-ends/).

## 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, you have to select the countdown type. Here you’ll find three options -

- **Normal **- To [create a normal countdown](https://nexterwp.com/docs/add-wordpress-countdown-timer-in-hello-top-bar-sale-fomo-banner/).

- **Evergreen** (Pro) - To [create a scarcity or evergreen countdown timer](https://nexterwp.com/docs/create-an-evergreen-countdown-timer-in-wordpress-loop-cookie-based-timer-per-user/).

- **Fake No** (Pro) - To [create a fake number counter](https://nexterwp.com/docs/add-a-fake-scarcity-counter-in-wordpress/).

Select the option as per your requirements, let’s select Normal here.

You can select a countdown style from the **Countdown Style** section.

You’ll see an **Inline Style** toggle option for the Simple style only, from here you can make the countdown timer layout inline.

Then in the **Time** and **Date** sections, you have to 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, you can set different actions after the countdown ends. Here you’ll find four options - 

![](https://nexterwp.com/wp-content/uploads/2024/12/countdown-expiry-new.png)

- **None** - With this option, nothing will happen after the countdown ends.

- **Message** - With this option, you can [show a message after the countdown ends](https://nexterwp.com/docs/show-custom-text-message-after-countdown-timer-ends-in-wordpress/).

- **Pattern** (Pro) - With this option, you can [show any content using a WordPress Pattern after the countdown ends](https://nexterwp.com/docs/show-a-particular-wordpress-pattern-template-after-countdown-ends/).

- **Redirect** - With this option, you can [redirect to another page after the countdown ends](https://nexterwp.com/docs/redirect-to-different-page-after-wordpress-countdown-ends/).

> *Note: The Countdown Complete option is only available with the Normal countdown option.*

### Label

From the **Show Labels** toggle, you can show or hide the labels from the counter. When enabled, you’ll see individual label options -

![](https://nexterwp.com/wp-content/uploads/2024/12/countdown-show-label-new.png)

- **Days Section Text** - From here, you can manage the Days label.

- **Hours Section Text** - From here, you can manage the Hours label.

- **Minutes Section Text** - From here, you can manage the Minutes label.

- **Seconds Section Text** - From here, you can manage the Seconds label.

> *Note: The Label tab is not available for the Fake No counter option.*

## How to Style the Countdown Block?

To style the Countdown block, you’ll find all options in the Style tab.

**Counter Styling** - From here, you can manage the countdown timer typography, color, padding, margin, border etc. You can also manage the countdown label color, background and border individually as well.

![](https://nexterwp.com/wp-content/uploads/2024/12/countdown-style-new.png)

**Expiry Message** - You’ll see this option when the Message option is selected in Countdown Expiry. From here, you can manage the message style. 

**Label Styling** - From here, you can manage the label padding and margin.

**Fake Message** - You’ll see this option when the Fake No option is enabled. From here, you can manage the message alignment, typography, color, padding, margin, border etc.

**Fake Number** - You’ll see this option when the Fake No option is enabled. From here, you can manage the counter number style.

**Background** - From here, you can manage the countdown timer container background style.

Advanced options remain common for all our blocks, you can explore all the options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the Countdown Block isn't showing up in WordPress?**
A: If the Countdown Block isn't appearing, first ensure that the Nexter Blocks plugin is installed and activated. Then, navigate to Nexter u2192 Blocks, search for the Countdown block, and activate it. This step is crucial because the block won't function without being activated.

**Q: How can I style the Countdown Block to match my website's design?**
A: Styling the Countdown Block is straightforward. You can manage typography, colors, padding, and margins from the Style tab. This customization ensures that the countdown timer aligns with your website's overall aesthetic, enhancing the user experience.

**Q: What types of countdowns can I create with Nexter Blocks?**
A: Nexter Blocks offers three types of countdowns: Normal, Evergreen (available in the PRO version), and Fake No (also in PRO). Each type serves different purposes, such as creating urgency for limited-time offers or simulating scarcity with fake counters.

**Q: How do I show a message after the countdown timer ends?**
A: To display a message after the countdown ends, select the 'Message' option in the Countdown Expiry section. This feature allows you to engage users further by providing information or a call to action once the countdown completes, enhancing interaction.