How to Create a Countdown Timer in WordPress [Complete]

Have you ever seen a website with a countdown on it? Yes, it is a countdown timer. The countdown has a purpose as a reminder and so on. Can a website built using WordPress add a countdown to it?

The answer is of course you can, even how to make a countdown timer in WordPress is also very easy because it uses the help of a plugin. How to? Watch this discussion until it’s finished!

Countdown Function for Websites

Before we discuss technically how to create a countdown timer in WordPress, what is the countdown function? Is it just for the countdown? Of course not just for the countdown course.

Countdown timers are very useful for those working in e-commerce blogs, especially when your website is holding a certain event that has a time limit. In order to understand better, we try to take an example of an e-commerce website.

On e-commerce websites, the countdown timer can be used to count down related products to be launched. This can provide brand awareness to potential consumers regarding the product.

So, potential consumers will get ready to get the product to be launched and this is one of the effective tricks to increase sales. The point is that with this countdown timer, you can make other people always remember when and how many days are left before the event will start.

But, it turns out not only that. There is such thing as fear of missing, namely the tendency of a person not to want to miss information, news, and discounts. Therefore, having a countdown timer really helps build that feeling.

​The Right Time to Install a Countdown Timer

There are several moments when you should install a countdown timer, here are some of them:

• When the website is ready to be launched, then you can install a countdown timer. The goal is that visitors can know when the website can be reopened.
• When you are about to launch a new product.
• When your company holds a certain event.
• You can also use the countdown timer when the products you offer are heavily discounted.

​How to Create a Countdown Timer in WordPress

There are several ways to create a countdown timer in WordPress and the steps are not too difficult either. In this article, we will discuss two ways, including how to create a countdown timer using JavaScript and the second way using the help of a plugin.

Creating a Countdown Timer Using Javascript

For those of you who may be familiar with javascript programming, of course, you are no longer confused about how to make a countdown timer using javascript. However, some people may not be familiar with programming, so they are looking for another alternative, namely using a plugin.

However, for a more complete discussion. First, we will explain how to create a countdown timer using javascript first before using a plugin. Just follow the steps below:

Step 1: First login to the WordPress dashboard page.

Step 2: After successfully logging in, open the functions.php file by clicking dashboard > appearance > theme editor.

Step 3: Add the below javascript code and save.

<!– Display the countdown timer in an element –>

<p id="demo"></p>

<script>

// Set a valid end date

var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// Update the count down every 1 second

var x = setInterval(function() {

// Get today's date and time

var now = new Date().getTime();

// Find the distance between now and the countdown date

var distance = countDownDate – now;

// Calculate Remaining Time

var days = Math.floor(distance / (1000 * 60 * 60 * 24));

var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Display the result in the element with id="demo"

document.getElementById(“demo”).innerHTML = days + “d ” + hours + “h “

+ minutes + “m ” + seconds + “s”;

// If the countdown is finished, write some text

if (distance < 0) {

clearInterval(x);

document.getElementById(“demo”).innerHTML = “EXPIRED”;

}

}, 1000);

</script>

You can change some parts of the code as needed, such as:

• Set a valid end date: This section is used to determine when the countdown will end.
• Calculate Remaining Time: This section is used to write down the remaining time until the countdown ends.
• Display the result in the element: This section is used to set the countdown result to be displayed later.
• If the countdown is finished, write some text: This section determines what text will appear after the timer ends.

Done, you have successfully created a countdown using javascript. Now we discuss creating a countdown using a plugin, it’s much easier. Although using this javascript you more easily customize the user interface.

Creating a Countdown Using a Plugin

One of the advantages of WordPress is that it is easy to add custom features, due to the availability of plugins in WordPress. It’s very easy!

Step 1: Install and activate the Ultimate Countdown Timer plugin.

Step 2: Click Countdown timer > Add Timer in your WordPress dashboard.

Note: But first make sure that the timezone used is in accordance with the timezone of the server you are using.

Step 3: Next scroll down to set the expiration date, day, and time section that will be applied by you in the countdown timer view.

Step 4: Then, at the bottom select the type of animation to use. There are two choices, namely smooth or thick, and settings such as circle width, background, and so on according to need.

Step 5: Once all the settings have been set, click Publish.

Step 6: Now, click on the Countdown timer menu and the countdown template that was previously created will appear, choose one and copy the shortcode listed there.

Step 7: Once copied, paste the shortcode on the page you want to add a countdown to. For example, we paste the countdown at the top of the article, then we paste the shortcode.

Step 8: If successful, then the page will be displayed according to the settings you made earlier. Below is an example of an active countdown timer.

Step 9: Don’t forget to save and open the website to check whether the countdown is working properly or not. Here’s an example:

Done, now the countdown can run normally on the website.

​Increase Sales with Countdown Timer!

The function of the countdown timer is not only to create a countdown display, but it can also have an effect on potential customers getting ready to buy the product you are about to launch.

With the support of today’s technology, making a countdown timer can be done in various ways. You can make it manually by adding some Javascript code or using the help of many plugins that are already available. Not even a little, free WordPress templates currently provide a countdown feature.

Just adjust what you think is easier and saves time, hopefully, the guide we provide can provide more benefits to increase your sales. But what about those who don’t have a website yet?

Take it easy, now how to create a website is very easy. First have WordPress hosting, and domain, and install WordPress, then you can have a website. You can get cheap domains at Bluehost.

Good luck!