and like us on FB

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 New Years Eve (in Sydney), we’ll use the shortcode of [countdown date="31st December 2017 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.

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 with WordPress Shortcode or PHP
Description: Dynamic Day Countdown with WordPress Shortcode or PHP. Displays a simple JavaScript countdown with shortcode.
Download: Shortcode (V0.2) | WP Plugin (V0.2) | PHP Code (V0.2)

Shortt URL for this post: http://shor.tt/2gQ6