Countdown timers are a popular feature that can help you build anticipation for your next project, event, or release. However, they’re not something that WordPress enables you to implement out of the box. Therefore, the most efficient method to add a countdown timer in WordPress is to use a plugin. As you might expect, there are plenty of countdown timer solutions available for WordPress, and most of them can be set up in minutes, so there are no downsides to trying one out.
In this article:
- We’ll talk about why you might want to create a countdown timer in WordPress.
- Then, we’ll introduce you to two of our favorite plugin choices.
- After that, we’ll show you how to implement this feature on your WordPress site using our recommended plugin.
Time is running out, so let’s get to it!
Why you might want a countdown timer in WordPress
Countdown timers are easy to add, and they can help you create excitement around upcoming events.
Countdown timers are simple features – clocks that wind down to a specific date. Some may look fancier than others, but the underlying functionality remains the same.
In most cases, you’ll want to use countdown timers for drawing attention to important events or launches. Here’s why:
- They help you drum up excitement. A simple countdown timer on your home page can create anticipation among your users. Each time they visit, they’ll be reminded that they have something to look forward to.
- They remind your visitors about important dates. If you’re launching a new e-book, for example, you’ll want people to know when it comes out. A countdown timer can help you cement the date in your visitors’ minds before it arrives.
Countdown timers aren’t just for businesses, however. For example, you may want to add one to your wedding site. Weddings are important occasions, so they warrant the fanfare. Plus, a countdown timer may help you make your wedding site more engaging. The same goes for any upcoming event you want people to get excited about.
Two top countdown timer plugins for WordPress
As is usually the case, the community provides you with plenty of options to create a countdown timer in WordPress. Here are our two favorite plugins that can help you implement this feature.
1. T(-) Countdown
T(-) Countdown enables you to add HTML5 countdown timers to your website, using either widgets or shortcodes. You can also choose from multiple timer styles, and use CSS to customize your timers from the plugin’s settings screen.
Key Features:
- Lets you create as many countdown timers as you need.
- Makes it possible to place your timers using either widgets or shortcodes.
- Enables you to customize your timers using CSS.
- Provides the option to choose from different preset styles for any of your timers.
Price: T(-) Countdown is available in both free and premium versions.
2. Countdown Timer
Countdown Timer is a simple plugin that enables you to create multiple independent timers. Instead of using a calendar to specify your dates, the plugin can recognize and parse textual time descriptions.
For example, you can indicate either “31 July 2020” or “next Thursday”, and the tool will identify both as valid dates. Though, we recommend using the former format, since it’s more accurate. Once you have your date set, you can place your timer on your site using either a widget or a shortcode.
Key Features:
- Enables you to create multiple countdown timers.
- Lets you place your timers using widgets or shortcodes.
- Makes it easy to add dates using textual time descriptions in multiple formats.
Price: The Countdown Timer plugin is 100% free.
How to create a countdown timer in WordPress (in two steps)
For this tutorial, we’re going to use the T(-) Countdown plugin. Both of the tools we introduced above can get the job done, but this one offers more customization options, which gives it the upper hand. Before we jump in, remember to first install and activate the plugin. That way, we can get right to work.
Step #1: Add and configure your countdown timer
T(-) Countdown gives you two ways to add a countdown timer in WordPress:
- A widget
- Via a shortcode
We’ll show you the widget first and then give you a quick look at the shortcode.
Add your countdown timer via widget
After activating the plugin, you’ll find a new T(-) Countdown element under the Appearance → Widgets tab in your admin area:
You can drag this widget to any of the existing sections on the right side of your dashboard. We recommend using your sidebar, since it’s usually more visible than any of your footer areas. Once you’ve placed the widget, you can pick a title for it and set a date:
Finally, you can choose from among a list of default timer styles for your new element. T(-) Countdown packs 12 different styles out of the box (most of which contain Star Wars references!). In our case, we decided to go with the Jedi theme, which comes with a brushed metal look:
If you’re looking for a more minimalist approach, we also recommend the Hoth theme:
Once you’ve chosen a style you like, remember to save the changes to your widget.
Add your countdown timer via shortcode
If possible, we recommend using the widget because it’s a little more user friendly. But you can also use shortcodes if you want more control over your timer’s placement. You can find all the available options within T(-) Countdown’s documentation.
You have a ton of control over your countdown timer with shortcode modifiers, which can make things a little complicated.
To help you out, here’s a basic shortcode template to get you started:
[tminus t= "DD-MM-YYYY HH:MM:SS"]Text that is displayed when timer reaches zero[/tminus]For example:
[tminus t= "10-09-2018 05:01:01" style="hoth"]Text that is displayed when timer reaches zero[/tminus]Would create a countdown timer that:
- counts down to September 10th 2018 at 5:01:01.
- uses the Hoth timer style
- displays the text inside the shortcode when the countdown timer reaches zero
Step #2: Customize your countdown timer’s style
If you’re not satisfied with the styles this plugin offers out of the box, you can further customize your timer using CSS. To do this, head to the Settings → T(-) Countdown tab and look for the plugin’s Custom CSS field:
You can use this section to add custom CSS to any of T(-) Countdown’s pre-built themes. However, keep in mind that you’ll need to find out the names of the classes for each element that makes up your countdown timer in WordPress. To locate this information, you can use a browser inspector such as Chrome’s DevTools, which enables you to view the code behind any element on your site. Then simply make whatever tweaks you’d like until you achieve the style you’re looking for:
If you want to use the custom CSS feature, we recommend that you have at least a passing understanding of CSS first. Otherwise, you’ll probably be best off sticking with the default styles.
Conclusion
Countdown timers are a simple feature that can add some fun to your site. They help you drum up excitement for new projects or events, and they can keep your audience waiting eagerly for the timer to reach zero.
Best of all, it’s easy to create a countdown timer in WordPress by using a plugin such as T(-) Countdown. Here’s how to do it in just two steps:
- Add and configure your countdown timer widget.
- Optionally, customize your timer’s style with CSS.
Do you have any questions about how to create a countdown timer in WordPress? Let us know in the comments section below!
Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!