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 timer 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. But, you can also use this plugin to create any type of landing page with a countdown timer.

SeedProd is an amazing drag and drop landing page builder for WordPress that comes with easy coming soon and maintenance mode functionality. The plugin lets you add several elements to your landing page, including a countdown timer.

SeedProd Landing Page Builder

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 verify 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 Verify Key box to validate it.

add seedprod license

Once your license key is validated, scroll further down the page and click on the Create Your First Page button.

This will take you to the SeedProd dashboard. Here you can choose which type of page you want to create a countdown timer on. There are 4 different options:

  • Coming soon mode: Create a coming soon page to build excitement for your website launch.
  • Maintenance mode: Put your website into maintenance mode while you work on it behind the scenes.
  • Login page: Create a custom login page for your website.
  • 404 page: Replace the default 404 page with a custom 404 page.

And you can scroll further down the screen to create a regular landing page.

click the set up a new coming soon page button

For this tutorial, we’ll create a coming soon page with a countdown timer. To get started, click on the Set up a Coming Soon Page button.

Step 2: Creating Your Countdown Timer

First, you need to choose a coming soon page template. SeedProd offers over 100 professionally-designed templates to choose from, so go ahead and pick the template you like best.

choose a template to create a countdown timer

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

Once you’re on your page builder in SeedProd, you’ll see all the Block options for customizing your page on your left and a live preview of your page on your right.

seedprod visual page builder

To add a countdown timer, go to the Blocks on the right, and under the Advanced section, drag the countdown timer and drop it onto your page.

drag and drop the countdown timer block onto your page

You can customize the countdown timer by clicking on it. You can then select the countdown timezone, select an end date and time, choose the style of your countdown, and more. Based on your end date, the timer will automatically disappear from your site on the specified date.

customize the countdown timer and set the end date

If you want, you can add more content to your page using SeedProd’s ready-made landing page blocks. You can add contact forms, social profiles, video, email optin forms, progress bars, and much more.

To customize your page even more, you can hit the Global Settings button in the bottom left corner of the screen.

configure global settings

Here you can change the background image, choose your page colors, select a new font, and so on.

Once you’re happy with how your page and countdown timer looks, hit the Save button.

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. Click the dropdown arrow beside the Save button and click the Publish button.

publish the countdown timer

You’ll then see a success message that your page is published and you can click the See Live Page button to view how it looks.

success message showing the countdown page has been published

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

live countdown timer page

Lastly, activate the page by going to SeedProd » Pages from your WordPress admin area. Under the Coming Soon Mode section, toggle the button from Inactive to Active.

enable coming soon mode in wordpress

Now when users visit your website, they’ll see the countdown timer page you just created.

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!
[50% OFF Today!]
[50% OFF Today!]
[63% OFF Today!]
[63% OFF Today!]
[60% OFF Today!]
[60% OFF Today!]
[50% OFF Today!]
[50% OFF Today!]