Fancy Countdown plugin

Create your own fancy count down for your posts or other WordPress pages. It is based on an idea found on the Internet by “BOOTSTRAPIOUS” and it is fully responsive.

The idea was to get this nice looking counter and make a WordPress plugin so it can be used anywhere and by little effort. So the “Bootstrap Countdown plugin” was borne. The plugin produces a shortcode that can be applied everywhere, even to an Elementor based post or page of your site.

Just apply the shortcode as per the example below:

[wp_countdown active='true' title='Days till Christmas' due_day='2020/12/25' message='At last its Christmas!!!']

1. Prerequisites

First of all you need to download the plugin from the link below:

https://github.com/brigosx/wp_countdown.git

Then open WordPress Plugins Manager and select Add New. At the corresponding page click on the “Upload Plugin” button and select the ZIP file you’ve downloaded. Do not activate it yet.

Before activating the wp_countdown plugin you need to add a plugin named JQuery Manager as shown in the screen-shot below:

This will resolve any JQuery version mismatch since the countdown library requires JQuery version 3.0 or greater and may cause troubles to your WordPress site.

After installing and activating this plugin you should un-check the Javascript optimization setting, if you use the “Autoptimize” plugin, like in the picture below:

Now you may activate the countdown plugin.

2. Apply the plugin to a page with shortcode

Create a post or page at which you will apply the count down plugin shortcode and add the following:

[wp_countdown active='true' title='your title here' message='your message or HTML code here' due_day='your date/time due day here as yyyy/MM/dd HH:mm format']

In case you have a nice saved template created with Elementor tool you can add as in the following snippet:

[wp_countdown active='true' title='your title here' template='your Elementor saved template here' due_day='your date/time due day here as yyyy/MM/dd HH:mm format']

The plugin, as is, comes with a nice style sheet (the one you’ve downloaded from the Bootstrapious page) and supports 4 beautiful gradient backgrounds. You select a color by applying the color parameter and a number between 1 and 4:

[wp_countdown active='true' title='your title here' message='your message or HTML code here' due_day='your date/time due day here as yyyy/MM/dd HH:mm format' color='a number from 1 to 4 here']

You may also select the period up to the plugin will display its contents by using the “show_day” parameter:

[wp_countdown active='true' title='your title here' message='your message or HTML code here' due_day='your date/time due day here as yyyy/MM/dd HH:mm format' show_day='your date/time due day here as yyyy/MM/dd HH:mm format']

This parameter should be used in combination with “due_day” and should always be greater than “due_day” parameter.

3. Available options

The plugin offers in total the following parameters:

• active: Possible values TRUE or FALSE
• title: A title that will appear at the top (Optional)
• due_day: The date/time up to the counter will count down. Possible formats yyyy/MM/dd or yyyy/MM/dd HH:mm
• show_day: The date/time up to the display will be active. Possible formats yyyy/MM/dd or yyyy/MM/dd HH:mm (Optional)
• message: A text message or HTML code that will be displayed upon finishing the counting (Optional)
• template: For Elementor use only. Can display a saved Elementor template by using it’s title (Optional)
• color: A gradient background color (default is 1) number. Possible values 1 up to 4 (Optional)

4. Final result

If you appropriately install and add the plugin’s shortcod you will end up with a banner like in the video below:

About the author

Bill Rigas is a Web Developer – Designer and co-founder of EverFounders blog with many years of professional experience on making software for airline companies. Owner of Msc Information of Technology diploma from University of East London and many certifications from edx. Also a certified Unity game developer from Walker Boys studio.