Hosting Tutorial & Guide

How to Add a Countdown Timer to a WordPress Site

updated on Oct 25, 2016
How to Add a Countdown Timer to a WordPress Site Countdown timer is a useful component that is utilized on many WordPress sites. With the proper use of it, you can expect better user engagement, higher conversions, as well as more sales. Below are three great usages of a countdown timer.
  • Put it on a coming-soon page when you launch a new website or make website maintenance, so that visitors can get informed and track your progress.
  • Put it on a landing page of the special offers, new contests, webinars or any other activities that will be launched soon. Doing so arouses the visitors' interests and builds up their excitement for your events.
  • Use it to showcase the deadline of your time-limited special offers or discounts to deliver a sense of urgency so as to encourage the purchases.
Since your website is built with WordPress, there are some great ready-to-use plugins that can help add a well-designed countdown timer to the page you want. For this tutorial, however, we utilize POWr Countdown Timer, a free plugin that will properly meet your demands, too.

Create a Countdown Timer by Using POWr Countdown Timer

Maintaining a high rating in the WordPress plugin directory, POWr Countdown Timer is a good choice for those who want an easy way to add and manage simple countdown timers for events. It is mobile-responsive, supports text, and allows you to change the size, space, fonts, backgrounds, colors, etc. Besides, there are animations, too. Since the plugin is cloud-based, you can even edit the countdown timer on the live webpage.

POWr Countdown Timer

To use POWr Countdown Timer, you will have to install the plugin from your WordPress admin area, activate it, and then follow the tutorials below.

Deal with the basic countdown timer options

After activating the plugin, you will be redirected to the plugin's settings page automatically. There are several steps you need to take in order to create a custom countdown timer, and the first step is to deal with the basic options on the page.

Firstly, open the Counting option where you can configure the way to count. There are two counting types – date and number, and you can make a choice freely. For the type of date, you are able to select the target date and time, and then choose to count down or count up according to your needs. The selection of the date is super easy since a calendar is prepared.

Besides, a live preview is displayed on the right side of the screen, so that you can check the timer quickly.

Select Counting Date

And for the type of number, you need to set a starting number, choose the count-up or countdown way, and then select the frequency.

Select Counting Number

The second option offered by the plugin is Title. If there is a need, you can turn on the "Show Title" option, and then enter a custom title for the countdown timer.

Add Title

Thirdly, you are able to customize the time labels and separator style under the Display option. There are some pre-defined styles which should meet most people's needs.

Customize Display

For the last two options – During Count and After Count, you can choose "Display something", and then add a button to the countdown timer to encourage sales or visits to a certain page. However, note that these two options are exclusive to the paid versions, so you cannot use them in the free basic version.

During Count

After dealing with all the basic options, click on the "Next" button to proceed on.

Customize the countdown timer

On the next page, there are several design options which allow you to:
  • Change the countdown animation.
  • Change the font style of the counter, label and title.
  • Change the counter size and spacing.
  • Change the background color, transparency, shadow, the border size, and the border color.
  • Add custom CSS to further customize the counter.
Besides these free options, you can also upgrade to a premium version to get the POWr logo removed, and enable password protection.

Customize Countdown Timer Design

When the customization is done, you need to click on the "Save" button. To get the countdown timer saved, you will be required to create a free account with POWr. Simply enter your email account and a password, and then sign up. After giving the counter a name, you are able to save it successfully.

Sign up POWr

Add the Countdown Timer to WordPress

When the countdown timer is saved, you can see the detailed ways of adding it to your WordPress posts, pages, sidebar, and the website footer.

Add the countdown timer to a post or page

There are two easy ways to do this. One of the ways is to use the shortcode. For this method, you only need to copy the shortcode of the new countdown timer, and paste it anywhere you want. Then you can see the counter in the post/page you want.

Add Countdown Timer to Post

The other method, however, is to use the POWr icon in the visual editor. Just find the icon, click on it, and then select Miscellaneous > Countdown Timer. A shortcode will be added to your post content automatically.

Add Countdown Timer with Icon

Add the countdown timer to the sidebar or footer

The POWr Countdown Timer plugin comes with a widget which helps you add a countdown timer to widgetized areas. So if you'd like to display a countdown timer in the sidebar or the footer section, you can simply drag the widget to the right place, and then save it.

Add Countdown Timer with Widget

Now visit your website, and you will see the countdown time in the place you like.

Add Countdown Timer to Sidebar