A fully CSS-able jQuery countdown/countup timer available in both widget and shortcode. Based on jQuery Countdown by Keith Wood.
- Supports multiple countdowns
- Available as both a widget and a shortcode
- Localization based on your WordPress’s installation language
- Timer can be set to count down or count up
- You choose how much information to display from years to seconds
- Option to set expiration message
- Option to redirect to a new URL upon expiry
Most importantly, YOU have full control over the CSS! Every single element can be targeted and manipulated any way you want. Also works right out of the box with four pre-defined display styles if you don’t care to fiddle with the CSS yourself.
- Pre-built color schemes
- Upgrade to version 2.0.0
- Admin panel localization
Verify that you have the following minimum requirements:
- WordPress 2.5+
- PHP 5.1.3+
- jQuery 2.0.0+
Installing CSSable Countdown
- Activate the plugin through the ‘Plugins’ menu in WordPress
- How do I use the widget?
Widgetsand drag the CSSable Countdown widget where you want it. Expand the widget to fill out the particulars.
- How do I use the shortcode?
The shortcode is much more involved than the point-and-click interface of the widget.
The shortcode’s minimum syntax is:
You can specify additional options:
HH:MM:SSformat (make sure you use 24-hour time). Defaults to
±HH:MMGMT format (e.g. EST is
-5, India is
+5:30, etc). Defaults to your WordPress’s GMT offset as defined in
format– valid options are any of case-sensitive
YOWDHMS. Defaults to
ydHMS. See [*] below for more information.
significant– valid options are 1 through 7. See [+] below for more information.
direction– valid options are
up. Toggles countdown vs. countup timer. Defaults to
event– the event description.
display– valid options are
compact. Defaults to
default. Controls the presentation and basic styling options.
expirytext– plaintext string to display on time expired.
formatis the powerhouse that controls the digits displaying on the timer. It is case-sensitive:
- Uppercase values will always display
- Lowercase values will display only if non-zero
- Unspecified values will never display
For example, the default value of
ydHMSwill show you years and days if they’re non-zero, but hours, minutes, and seconds will always be shown. If you didn’t care about the time, you could show years, months, and days with just
significantcontrols how many significant digits are displayed.
significantproduces almost any combination of date and time values that you want displayed.
Note: you cannot set an expiration URL with the shortcode, since shortcodes are, by definition, parsed after headers are sent.
- I don’t want your bare-bones CSS! How can I disable it completely?
functions.phpfile, add these lines:
wp_dequeue_style( 'cssable-countdown-style-default' ); wp_dequeue_style( 'cssable-countdown-style-list' ); wp_dequeue_style( 'cssable-countdown-style-text' );
- How do I add my own CSS?
functions.phpfile, add these lines for every CSS file you’re including:
wp_enqueue_style( 'cssable-countdown-style-YOURNAMEHERE', 'PATH/TO/CUSTOM/CSS/FILE.css' , '', '1.1' );
YOURNAMEHEREwith a unique name so it won’t conflict with any other stylesheets.
PATH/TO/CUSTOM/CSS/FILE.csswith the path to your CSS file. It is suggested that you put the CSS file in your themes directory and use WordPress’s
get_stylesheet_directory()for your theme instead of giving it an absolute URL. Ex:
wp_enqueue_style( ‘cssable-countdown-style-YOURNAMEHERE’, get_stylesheet_directory() . ‘/css/YOURCUSTOMFILE.css’ , ”, ‘1.1’ );
- What languages are supported?
Although the admin panel is currently only localized in English, the countdown will automatically take the language you have your WordPress set to.
- Albanian (Gjuha shqipe)
- Arabic (العربية)
- Armenian (Հայերեն)
- Bengali/Bangla (বাংলা)
- Bosnian (Bosanski)
- Bulgarian (български език)
- Burmese (မြန်မာစာ)
- Catalan (Català)
- Chinese/Simplified (简体中文
- Chinese/Traditional (繁體中文)
- Croatian (Hrvatski jezik)
- Czech (Čeština)
- Danish (Dansk)
- Dutch (Nederlands)
- Estonian (eesti keel)
- Farsi/Persian (فارسی)
- Finnish (suomi)
- French (Français)
- Galician (Galego)
- German (Deutsch)
- Greek (Ελληνικά)
- Gujarati (ગુજરાતી)
- Hebrew (עברית
- Hungarian (Magyar)
- Indonesian (Bahasa Indonesia)
- Icelandic (Íslenska)
- Italian (Italiano)
- Japanese (日本語)
- Kannada ( ಕನ್ನಡ )
- Korean (한국어)
- Latvian (Latviešu Valoda)
- Lithuanian (lietuvių kalba)
- Malayalam (മലയാളം)
- Malaysian (Bahasa Melayu)
- Norwegian (Bokmål)
- Polish (Polski)
- Portuguese/Brazilian (Português)
- Romanian (Română)
- Russian (Русский)
- Serbian (српски језик)
- Serbian (srpski jezik)
- Slovak (Slovenčina)
- Slovenian (Slovenščina)
- Spanish (Español)
- Swedish (Svenska)
- Thai (ภาษาไทย)
- Turkish (Türkçe)
- Ukrainian (українська мова)
- Uzbek (O‘zbek tili)
- Vietnamese (Tiếng Việt)
- Welsh (Cymraeg)
Contributors and Developers
“CSSable Countdown” is open source software. The following people have contributed to this plugin.Contributors
- [SUPPORT BUGFIX] Fixed languages not applying correctly
- [SUPPORT BUGFIX] Fixed shortcode ignoring to the
mediaproperty of the various
wp_enqueue_style()s to default to
- Upgraded “tested up to” tag to 3.8.1
- Updated SVN to point to the actual location of the js files
- [SUPPORT BUGFIX] Fixed non-responsive dropdowns in widget options due to misplaced JS file
- [SUPPORT BUGFIX] Fixed shortcode not working due to misplaced JS file
- [SUPPORT BUGFIX] Removed anonymous function in
register_widgets()because they require PHP 5.3+
- [SUPPORT BUGFIX] Fixed non-responsive dropdowns in widget options
- Renamed plugin to
- WordPress plugin directory release
- Added screenshots and title banner
- Added slash handling to
- Split the shortcode off to its own file
expiryTextnot showing if countdown was already expired on page load
- Fixed all instances of
expiryUrloption from shortcode since can’t redirect after headers have been sent
- Improved widget UI by creating sections
- Added basic formatting option
- Added layout type option
- Created timezone and converter functions
- Changed option
compactto only print if
- Cleaned up files into folders
- Requires PHP 5.1.3+
- Added localization capabilites
- Fixed shortcode displaying blank date on default configuration
- Fixed shortcode lack of targeting ID when calling as widget (source)
- Fixed widget checkboxes not toggling correctly
- Created plug-in
- Created shortcode capability
- Created widget capability
- Stripped down and reconfigured CSS for maximum styling ability