Skip to content
AtlanticBT Monogram
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)

Download Countdown Timer ABT  Download from WordPress

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
capabilities covered
WordPress Amazon Web Services

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.

Questions & Answers

What is the best web development framework?
Many people commonly ask “what is a framework in web development?” Web development frameworks can easily be confused with web development tools, languages, or parts of the web development stack (like PHP, Ruby, or Javascript).
Learn More
What is the best programming language for web development?
If there was one “best” programming language, then everything else would be obsolete. The reality is that there are so many different programming languages because there is no “best” language for any situation.
Learn More
How much does web development cost?
Web development can vary from a few hundred to millions of dollars depending on what is needed. You may simply need some changes to something that already exists, or you'd like to build a large or complex application.
Learn More
What is web design and development?
People often lump web design and development together, so what's the difference? As the Internet has evolved, the skills required to produce a high quality website or web application have changed.
Learn More
What is React web development?
React is a popular JavaScript library. It is primarily used for building interactive user interfaces (UI).
Learn More
What is PHP web development?
PHP is a back end language primarily used for custom applications, content management systems (such as Wordpress), eCommerce engines (such as Magento), or even massive sites like Facebook.
Learn More
What is bootstrap in web development?
Bootstrap is a framework used in front-end development to save time, specifically for mobile-first development. It combines CSS and Javascript templates and libraries to speed up the development process.
Learn More