Skip to content
Article

Countdown Timer in WordPress

Here’s another WordPress plugin that creates a countdown timer showing days/months/etc until a specified date/time.  Put multiple timers anywhere on your site with shortcodes.  In the works: javascript animation (see branch 0.8-dev)

As taken from the readme file:


Description

Provides a shortcode/function to render a countdown timer of the form “Years until target: X, Months until target: Y, Days until target: Z…”. You can specify the date/time of the target, as well as output formats with placeholders (including HTML wrappers) all from within the admin options page. Display result using the shortcode; you can override global options from within the shortcode too. By default, result will be something like "Months 0/Days 0/Years 0; Hours 4:Minutes 59:Seconds 54".


Installation

  1. Unzip, upload plugin folder to your plugins directory (/content/plugins/)
  2. Activate plugin
  3. Add countdown shortcode anywhere you need it.

Check out the included admin help page for complete explanation within WordPress!


Frequently Asked Questions

What’s the shortcode?

In full glory:

[countdown_timer target_time="2012-05-05 14:03:00" complete_text="It's Done!" format= {CUSTOM HTML FORMAT - SEE BELOW} date_separator='<span>/</span>' time_separator='<span>:</span>' label_format="<em>%s</em>" timezone="America/New_York" ] 

Developer Hooks

The following filters are provided to adjust both the attributes (before rendering) and the format (after rendering).

You would use them like:

add_filter( 'abt_countdown_timer__pre_render', 'my_countdown_prerender' ); function my_countdown_prerender($attributes) { ... } add_filter( 'abt_countdown_timer__post_render', 'my_countdown_postrender' ); function my_countdown_postrender($output, $attributes) { ... } 

This is how they’re used in the plugin:

// hook - adjust attributes used to render the countdown $attributes = apply_filters( 'abt_countdown_timer__pre_render', $attributes ); // hook - add "before", "after"; alter rendered output $formatted_time = apply_filters( 'abt_countdown_timer__post_render', $formatted_time, $attributes ); 

Other Options

  • Title and Link – tooltip text when hovering over timer; optional link from clicking timer
  • Timezones – specify a timezone for calculations (if different than WP timezone)
  • Output format – HTML wrapper for result fields; uses special placeholder formats for label, separators, and time values (see strftime)
  • Date Separator – text between date values, if used in Output Format
  • Time Separator – text between time values, if used in Output Format
  • Interval Label – wrapper for laber for “Year”, “Month”, etc

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.