• WP Themes
    • Free Themes
      • Oswald Lite WP Theme
      • MariGold WP Theme
    • Premium Themes
      • Oswald WP Theme
  • WP Tuts
  • WP Reviews
  • WP Hosting
  • Freebies
  • Book a Review
  • Contacts
Home/How to Create Animated Countdown Timer in WordPress
2 shares
How to Create Animated Countdown Timer in WordPress
June 6, 2019 | Tutorials | 0 comments

How to Create Animated Countdown Timer in WordPress

You probably often see countdown timers when scrolling down the homepages of many modern websites. Lots of premium WordPress themes currently available on sale, also come with countdown timers.

Such timers are a great way to announce the upcoming event, a product launch or holiday sales. You can show people how soon they get some benefits and you can get them to foretaste the celebration.

So let’s see how to add a countdown timer in WordPress.

Creating a Timer with Countdown Timer – Widget Countdown

The first plugin I will use is Countdown Timer – Widget Countdown free solution available in the official WordPress repository. Just install and activate the plugin to start working.

The plugin creates a Gutenberg block, so you can easily place it into any post or on any page you prefer.

Define the amount of days, hours, minutes and seconds and

just see it live. The only animated elements in this countdown are figures, but the timer itself looks too standard and simple.

However, if you want to change the timer buttons type, shift the color of text and background, and make many more changes, you should upgrade to the pro version of this plugin.

This is why I’ve resolved to try another plugin for my purpose.

Creating a Timer with Countdown Timer Ultimate

So I prefer to use Countdown Timer Ultimate free plugin which I can easily install and activate right from my WordPress dashboard.

This is the timer’s dashboard where you can choose a smooth or ticks animations, circle, background and countdown width,

And of course, you can set the expiry time by moving the slider bar and setting the date in the calendar.

Here you can also choose the background and foreground colors of your timer.

When you are done, click the Publish button

and go to the Countdown Timer list to find your recently created timer with a shortcode.

Go to any page or post you prefer, select the shortcode Gutenberg block

and insert the shortcode on the page or into the post you want.

Here’s how the animated countdown timer looks live.

If you are using the classic editor, just insert the shortcode into the Text section of your editor and switch to the Visual one to see how it looks.

Hope this tut was helpful,

Melany H.

melany hollywell wpdaddy
wpdaddy

Hi! I’m an experienced writer exploring WordPress for more than 5 years. I’m happy to share my knowledge and ideas with you and I hope you join me.

Cheers,
Melany H.

Share this post:
Related Posts
May 16, 2017

How to Add Video in the Slider Revolution: A Simple Guide

If you are looking for a simple guide on how to add video in the Slider Revolution, you are at the right place. In this tutorial, we are going to share an easy way o...
Read this post
July 16, 2018

The Weirdest Stock Images – What Are They For?

When trying to be creative, artists step over the bounds and change habitual things with their creation. They try to see and show the reverse side of the reality, an...
Read this post
Subscribe to our Newsletter
Never miss out on the latest news, updates and tips. Subscribe now!
Download Revolution Slider Here!
revolution slider image
Categories
  • Art and Culture
  • Blog and Magazine
  • Business
  • Cars and Transport
  • Cleaning and Janitorial
  • Crypto ICO Token Sales
  • Design
  • Directory and Listing
  • Education
  • Entertainment
  • Events
  • Fashion
  • Free Themes
  • Freebies
  • Gutenberg
  • Health and Beauty
  • Hosting
  • Industry and Construction
  • Inspiration
  • Interview
  • Kids
  • Landscape and Gardening
  • Multipurpose
  • Non-Profit and Charity
  • Pets and Animals
  • Photography
  • Plugins
  • Portfolio
  • Real Estate
  • Restaurant
  • Reviews
  • Sports
  • Technology
  • Traveling
  • Tutorials
  • WooCommerce
Popular Posts:
  • Best Face Generators to C...
  • How to Add Video in the S...
  • How to Enlarge Images Whe...
  • How to Center a Shortcode...
  • How to Fix ‘Browser...

Copyright © 2020 WP Daddy. All Rights Reserved.

Follow Us: