Blog, PHP, WordPress, WordPress Plugins, WordPress Shortcode

Dynamic Day Countdown with WordPress Shortcode or PHP

It's often necessary to provide some sort of countdown to an event in WordPress - particularly in the marketing world where we're often scheduling webcasts, live tutorials, and other edutainment. While we plan to provide about a dozen different countdown options, the first is the second most basic (the simplest is another scheduled post titled "Static Day Countdown with WordPress Shortcode or PHP"). Subsequent articles integrate existing countdown libraries for a very fancy rendering.

The Result

To count down to Sydney's 2025 New Years Eve, we'll use the shortcode of [countdown date="31st December 2025 11.59:59pm"]. The result:

With a little bit of style we can make it look a little more appealing.

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin. You may optionally download and install our plugin from the bottom of of the page.

<?php

Dynamic Day Countdown with WordPress Shortcode or PHP

http://www.beliefmedia.com/dynamic-countdown

function beliefmedia_simple_countdown($atts, $content = null) {

extract(shortcode_atts(array(

'text' => 'Passed',

'style' => 'text-decoration;none;',

'date' => 0,

'offset' => '',

), $atts));

$id = wp_rand( $min = 0, $max = 10000 );

/* Total seconds to event */

$remain = strtotime($date) - time();

/* UTC offset */

if ($offset != '') {

$operator = (strpos($offset,'-') !== false) ? '+' : '-';

$remain = $remain . $operator . (3600 * abs($offset));

}

/* Text to return */

$result = ($remain < 86400) ? 'minutes + " minutes " + remainingSeconds + " seconds"' : 'days + " days " + hours + " hours " + minutes + " minutes " + remainingSeconds + " seconds"';

$return = ' <script>

var upgradeTime = ' . $remain . ';

var seconds = upgradeTime;

function beliefmedia_timer_' . $id . '() {

var days = Math.floor(seconds/24/60/60);

var hoursLeft = Math.floor((seconds) - (days * 86400));

var hours = Math.floor(hoursLeft/3600);

var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));

var minutes = Math.floor(minutesLeft/60);

var remainingSeconds = seconds % 60;

if (remainingSeconds < 10) {

remainingSeconds = "0" + remainingSeconds;

}

document.getElementById(\'countdown_' . $id . '\').innerHTML = ' . $result . ';

if (seconds == 0) {

clearInterval(countdown_' . $id . 'Timer);

document.getElementById(\'countdown_' . $id . '\').innerHTML = "' . $text . '";

} else {

seconds--;

}

var countdown_' . $id . 'Timer = setInterval(\'beliefmedia_timer_' . $id . '()\', 1000);

</script>';

$span = '<span id="countdown_' . $id . '" style="' . $style . '"></span>';

return $return . $span;

}

add_shortcode('countdown', 'beliefmedia_simple_countdown');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Shortcode Attributes

text

The text is the string that is rendered once the expiry time has passed.

style

If you want to apply style to the countdown text, the style is applied to the span.

date

The date is a strtotime()

compatible

string of your target time. We used date="31st December 2017 11.59:59pm" for our example, but something like date="20171231235959" would work as well. Date values separated by slash are assumed to be in American order: m/d/y, and those separated by dash are assumed to be in European order: d-m-y.

offset

We calculate your end-time based on your server time. Once returned to the JavaScript function it'll be updated based on your PC clock. It's likely that your server will return a UTC (GMT time). To correct this, apply an offset. For example, Sydney is offset="10". For a negative offset, use a minus sign.

Considerations

For a fixed event, a fixed UTC offset will obviously apply. For the same event in different timezones (such as New Years Eve), you might consider obtaining the offset via our API and applying that in your code.
For this simple countdown, the intent is that it'll be used once on each page. Using multiple occurrences will produce erroneous results. Our future examples don't suffer the same limitation.

Download

Title: Dynamic Day Countdown in WordPress (WP Plugin)
Description: Dynamic Day Countdown with WordPress Shortcode or PHP. Displays a simple JavaScript countdown with shortcode.
Download • Version 0.2, 1.8K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (1.0K) PHP Code & Snippets, (953.0B)

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.