Event Countdown Shortcode

Last Updated on

The event countdown shortcode allows you to display a countdown tool that you can use for events such as an opening, marriage etc. This shortcode basically counts down from a given date and time to the current time.

In this article, we will explain how to display the event countdown shortcode, find the UTC time zone of your country and configure the style.

To see the event countdown shortcode in action, check out the demo page.

In this article

Displaying an Event Countdown Shortcode

To add the event countdown shortcode:

Add or edit an existing page.
In the Visual Composer section, Click on the + button.

Event countdown shortcode - visual composer section

In the Add Element pop-up screen, search for Event Countdown and click on it to be added to the page.

Event countdown shortcode - add element

When the shortcode is added, a new pop-up screen called Event Countdown Settings will open that allows you to configure the shortcode settings.

Event countdown shortcode - Event countdown settings

Click on Save Changes then Publish or Update the page to check the result.


Available Event Countdown Settings

There are a few settings in the event countdown pop-up screen regarding the countdown details.

TitleSets the countdown title.
Upcoming Event DateSets the countdown due time. The entered date must be in month/day/year hour:minute:second format. The result will be displayed in Days – Hours – Minutes – Seconds format.
UTC TimezoneSets the countdown time zone. Read the “Finding the UTC time zone of your country” section to find your time zone.
Extra Class NameAdds a classname to the shortcode for Custom CSS.

Finding the UTC Time Zone of Your Country

UTC is the time standard commonly used across the world. Every country has its own timezone, so it is important to choose this correctly to show your users the right time.

To find your UTC time zone:

Open this website and write your city name into the “Add a city to get started” search field.

Event countdown shortcode - time zone

After the results show up, You will see the UTC time zone value right below the city name. Keep this value in your mind for future reference.

Event countdown shortcode - time zone value

Configuring the Style

The event countdown shortcode does not have any styling options. This countdown shortcode style is set to dark colors by default but some users may need to make the event countdown text and border colors lighter to use the shortcode on a dark background.

To make the event countdown text and border colors lighter:

From the WordPress left menu, go to Jupiter > Theme Options > Advanced > Custom CSS.

Add the following code to the Custom CSS field.

/* Sets the countdown title */
.make-countdown-light .mk-event-countdown .mk-event-title {
 color: #fff!important;

/* Sets the countdown border color */
.make-countdown-light .mk-event-countdown-ul li {
 border-color: #fff!important;

/* Sets the countdown time stamp color */
.make-countdown-light .mk-event-countdown-ul li .timestamp {
 color: #fff!important;

/* Sets the countdown time reference */
.make-countdown-light .mk-event-countdown-ul li .timeRef {
 color: #fff!important;

Click on Save Settings.
From the WordPress left menu, go to Pages and click on Edit for the page that includes the event countdown.
Hover over the event countdown shortcode and click on the Edit button.

A new pop-up screen called Event Countdown Settings will open.

Add the make-countdown-light class name in the Extra Class Name field.

Click on Save Changes and publish or update the page to check the result.
Note: If you need to go beyond the default settings to customize the look and feel of the item’s design, you can add a custom CSS class in the Extra Class Name setting to be able to add specific styling to the shortcode through CSS. For more information, read the Adding a custom CSS class to a shortcode article.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket