X

How to Create a Countdown Timer in WordPress (Step by Step)

countdown timer in wp

Want to add a countdown timer to your WordPress website but not sure know how to do it? Then you’re in the right place.

A countdown timer helps you create a sense of urgency on your site and encourage users to take the desired action like purchasing a product before they miss out on the offer. Using a countdown timer is effective in order to boost excitement about an upcoming sale, a webinar, reaching a milestone or celebrating an upcoming event that’s significant for your business.

You can use these countdown timer widgets to remind your audience about your upcoming events so they know exactly when to return to your site to avail or observe the big event.

When to Use a Countdown Timer

There are many cases when you might want to add a countdown timer to your site. But it works best in the following instances.

  • on a coming soon page before launching your website
  • to let visitors know when the website will be available again if it’s down for maintenance.
  • when hosting an event or conference
  • before introducing a new product or service
  • sale events

Adding Countdown Timer to WordPress

In WordPress, you can add a countdown timers to your website in several ways. We’ll explain about 2 ways in this article.

  1. Adding a Countdown Timer With OptinMonster
  2. Adding a Countdown Timer With SeedProd

Method 1: Adding a Countdown Timer With OptinMonster

This method is helpful if you want to display your countdown timer in the form of a widget on your website. With OptinMonster, adding a countdown timer widget is super easy.

optinmonster-popups

The best thing about using OptinMonster for adding a countdown timer is that it’s easy to set up and doesn’t require coding. It’s one of the most powerful lead generation apps that helps you achieve the conversion goals of your website quickly and easily. With this app, you can create some of the most advanced popup campaigns and display them accurately to your targeted audience.

Read our review on OptinMonster and learn more about it.

All you need to do is to create your account with OptinMonster and then install and activate the OptinMonster plugin on your website.

Step 1: Connecting the OptinMonster App With the Plugin

It’s to be noted that the plugin acts as a connector between your WordPress site and the app. Go ahead and install the OptinMonster plugin on your site.

Once the plugin is activated, go to your WordPress dashboard and click on OptinMonster on the left side of your screen. You’ll see two options here.

  • Get OptinMonster
  • Connect to your OptinMonster account

If you haven’t created an account with OptinMonster already then click on the 1st option to do so. If you set up the account already then go for the second option. You’ll see an option that says Authorize OptinMonster. Click on it.

authorize optinmonster

You’ll now be redirected to a new window where you’ll see an option to Connect with WordPress. Click on this option and your app will automatically connect itself with your WordPress dashboard.

Step 2: Creating Your Countdown Timer With OptinMonster

It’s now time for you to start creating your countdown timer widget. So first, you’ll have to go to your WordPress dashboard and click on OptinMonster » Campaigns » Create new campaigns.

optinmonster campaigns

Now select your campaign type and then pick a template of your choice. You can select any campaign type from the ones offered to you and then integrate a countdown timer into it. Let’s choose a Floating bar as the campaign type.

Scroll down to find the templates and select one you like the most.

In the next step, you’ll be asked to name your campaign. You also have to select the website where you want to display this countdown timer.

Once done, click on the Start building tab. This will launch the drag and drop builder where you can design your campaign. Here under the Design tab, click on the Add blocks tab.

Now scroll down to find the Element blocks. You’ll see the Countdown option. Drag this element and drop it on your designing panel on the right-hand side of your screen.

Now you can click on your design on the right and customize each of your elements to give it a perfect look. You can customize any element including your texts, fonts, color, etc.

To edit the countdown timer, simply click on the elements on your design panel and you’ll see several editable options in your editing panel on the left. Select Countdown » Settings.

Here you can work on how you want your countdown timer to appear. You can select the time when you want the countdown to start and end. To make it easier for your users to understand the beginning and end of your countdown globally you can add the visitor’s local time too. You can also add the unit display type like days, hours, minutes, seconds, etc. If you’re not happy with a certain element, just use the delete option to remove it.

Next go to the Display Rules tab where you can decide where and when to show the campaign.

optinmonster, welcome gate, wp welcome gate, list building

You can use the Integration tab to integrate your campaign with an email marketing service.

Step 2: Publishing Your Countdown Timer

Once done with all the settings click on the Save button. Now on the top of your screen, you’ll see a Yes/No option. Click on it and hit the activate now button.

Next, go to the Publish tab. To publish the campaign, make sure to enable the status to Live.

optinmonster, welcome gate, wp welcome gate, list building

Now go to your WordPress dashboard and click on the Edit output settings.

This will show you an option named Enable campaign on site. Select the box next to it. Below that, you can also customize who can see your welcome gate. Once done, hit the Save button and you’re good to go.

optinmonster, welcome gate, wp welcome gate, list building

And that’s it. Your campaign should be live now. You can now visit your website from the front-end and see the countdown timer in action. Here’s a preview of what we just created.

Method 2: Adding a Countdown Timer With SeedProd

This method is useful if you’re launching a new site or your already established site is under maintenance and you want to let your visitors know that it will be live soon.

SeedProd is an amazing coming soon plugin that lets you create stunning coming soon and maintenance mode pages within a matter of minutes. The plugin lets you add several elements to your coming soon page, including a countdown timer.

SeedProd

Let’s see how to add a countdown timer with SeedProd in a step-by-step manner.

Step 1: Installing SeedProd

The first step is to install the SeedProd plugin on your WordPress site.

Once the plugin is installed and activated, you’ll have to validate your license key. Your key is available in your SeedProd account created at the time of purchasing the product. Paste the key in the blank field and click on the check license box to validate it.

Once your license key is validated, go to SeedProd » Settings. You’ll now have the following window on your screen.

seedprod review - enable coming soon page

Here click on the Enable coming soon page option followed by Edit Coming Soon/Maintenance Page. You’ll now have several themes on your screen. So go ahead and select the theme you like the most.

SeedProd coming soon themes

Once done, you’ll be directed to the page builder where you can start creating your countdown timer.

Step 2: Creating Your Countdown Timer

Once you’re on your page builder in SeedProd, you’ll see all the editing options on your left and the visual builder on your right. You can go to each of these tabs on your left and work on the appearance of your coming soon page. Check out how to turn on maintenance mode and how to create a coming soon page.

You can customize your background by going to the Background settings tab. You can change its color, add an image or a video in the background and do a lot more here. If you want to work on the text of the page use the Content tab just above the Background tab.

You can also add social icons, email form, a progress bar and more to your coming soon page. To add the countdown timer, go to countdown. Now swap the Enable Countdown option.

You can then select the countdown timezone, select an end date and set the format of your countdown. Based on your end date, the timer will automatically disappear from your site on the specified date. Once done, hit the Save button on the top left corner of your screen.

Step 3: Publishing Your Countdown Timer

Now that the coming soon page is ready with the countdown timer, it’s time for you to publish it on your website. Just above the Save button on the top left corner, you’ll see an option called Back to Settings.

This will take you to the same window where you selected the Enable Coming Soon option in the beginning. Now click on the Save All Changes button for the page to go live.

seedprod review - enable coming soon page

Here’s how your page will appear to your visitors.

Countdown timer

That’s it!

We hope this guide helped you create a countdown timer on your site. You might also want to check out how to add social proof to your WordPress site to gain users trust and boost your conversion goals.

Comments  Leave a Reply

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!
[60% OFF Today!]
[60% OFF Today!]
[10% OFF Today!]
[10% OFF Today!]
[50% OFF Today!]
[50% OFF Today!]