Installation and Configuration

Smart Countdown plugin installation is quite easy and straightforward. The recommended method is to install it using WordPress Admin Panel / Plugins / Add New search option.

If you have downloaded the plugin from this site, you can install it uploading the “.zip” file with plugin package using the alternative “Upload” tab in Plugins Manager. And finally, Smart Countdown can be installed manually using an FTP manager. Download and save plugin “.zip” package on your hard drive and unzip it. Locate “smart-countdown” folder and copy it to your WordPress installation “/wp-content/plugins/” folder.

Do not forget to activate the recently installed plugin.

Smart Countdown doesn’t require configuration in Plugins Manager. This plugin is designed to display countdown widgets or countdowns in your posts and pages using shortcodes. More that one Smart Countdown instance can be displayed on your site, that is why actual configuration is needed when you add a widget or insert “smartcountdown” shortcode in a post. Both widget and shortcode configuration deal with the same set of options. For details on shortcode attributes please, refer to Reference page.

The easiest way to get started with Smart Countdown is adding a widget. Open your WordPress Admin Panel / Appearance / Widgets Manager. You should see “Smart Countdown” in the list of available widgets (if it’s not there you have probably forgot to activate the plugin). Add Smart Countdown to the Widgets Area.

Open WordPress frontend in a new browser tab to be able to instantly check the changes in the widget configuration. The new “Countdown” widget should appear right away but it will show time interval to “GMT+00 NOW” moment and its value will depend on the time zone your WordPress installation is configured for. If you reload the frontend page the counter will start from the same value (quite useless, unless you wanted to check your time zone offset) – it means that you haven’t set event date and time yet.

Return to Admin Panel browser tab and expand Smart Countdown widget configuration. Click on “Deadline” field and select the desired date and time. Save the widget configuration. Open the frontend window and reload the page. You should now see meaningful counter values and the counter should not reset to initial values when you refresh the page again. If it worked you can continue with the rest of the settings. Return to the widget configuration in Admin Panel.

Most of the options are quite self-explaining. At the time of this writing the plugin is still in beta stage, so some configuration fields may have been already renamed and this document not yet synchronized with the latest changes.

Basic widget options:

(for complete list of options and shortcode attributes see this page)

Title – Widget title. If not empty it will appear along with the widget.

Deadline – target date and time or event time, as it is called in the rest of documentation. It is a basic setting. The time interval the counter displays is calculated between the moment the page is viewed and event date and time. Please, keep in mind that you should select event time in your time zone. Daylight saving time (DST) effects (if any) are applied automatically.

Counter display mode – by default the counter widget is always visible and its mode is set automatically – countdown to the specified date if the event date is in future or count up from a date if it is in past. If default setting doesn’t meet your requirements you can change it selecting another option:

  • “Countdown – no limit” – the widget will be displayed only before the event and will disappear after the event date and time is reached.
  • “Count up – no limit” – the widget will be displayed only after the event and will be hidden before it.
  • More options in both “Only before event” and “Only after event” groups – they will have the same effect as their “no limit” versions but will add timing condition, e.g. “only before event and if the time left is less that 24 hours” and so on. Shortcode “mode” attribute supports even more fine-tuning. Please refer to Reference page for details.

Next group of settings (“Title before the counter for countdown mode”, “Title before the counter for count up mode”, “Title after the counter for countdown mode”, “Title after the counter for count up mode”) defines how and where event title will be displayed. Smart Countdown allows you to configure different texts for counting down and for counting up, also one part of event title can be placed before the counter block and the other will go after the digits. It’s not required to fill in values in all “title” fields. It would be quite natural to display event title as one phrase before or after the counter block. Just fill in “Title before the counter…” fields and leave the other two (“Title after…”) empty and the event title will be displayed on top of the counter block. If you prefer to display the title below the digits leave “Title before…” fields empty and use “Title after…” fields to introduce the desired texts. All title texts may include HTML tags allowed in posts.

Event titles are set individually per counter mode (countdown or count up), that is why the titles you provide play the role of the counter description and normally will say e.g. “Time left until our meeting ABC” in countdown mode and “Our meeting ABC is in progress” in count up mode.

Obviously, if you choose any option except “Auto” in “Counter display mode” the counter will be hidden automatically if its current mode is not allowed, so event titles for this mode will never be displayed even if you fill in these titles and save.

Actually you can leave all title fields empty – no event title will be displayed, but you can use the widget title or the text surrounding “smartcountdown” shortcode in a post to explain the counter meaning. Please, keep in mind that event titles configured in the widget have an important advantage: two sets of texts, one per counter mode, switched automatically at the event moment.

Counter animation profile – the animation profile defines how the digits of your counter will look and which transitions will be applied to digits when its values change.  Basic animations are pre-installed with the plugin, more animation profiles can be downloaded and installed later.

Widget layout preset – choose desired layout for the counter. Each preset defines a group of settings that should look good together, e.g how counter units should be placed (in a column or inline), were to show the labels (days, hours, minutes, etc.) and how the widget will respond to different window sizes. The recommended and default layout for a sidebar widget is “Sidebar”, for a counter embedded into a post or page you will likely choose one of “Shortcode…” presets. A layout preset is an XML document, quite straightforward and new layout presets can be easily created using a copy of an existing one as a starting point. The “responsive” section of layout preset document is a bit tricky. Detailed documentation is coming soon.

Use titles for count up mode as “Time has arrived” message – a special feature which replaces the counter block with a custom message designed to inform your site visitors that event time has arrived. It will be displayed automatically if the page is open at the event moment (i.e. when countdown reaches zero) or when the page is opened at a later time.

There is no magic in the feature. The only thing it actually does is hide the counter block when in count up mode, leaving event titles visible. The “message” your site visitors will see is simply the event title for count up mode you provided in “Title… for count up mode” group of settings. The fact that event titles are updated automatically on counter mode change (from countdown to count up) guarantees that this “message” will be displayed right at the event moment.

Display counter units – choose which units the counter should display. You can select any combination (if you uncheck all the widget will be hidden), the value of the time interval will be correct in all cases although in some rare combinations the counter may look strange. E.g. if you leave “hours” and “seconds” checked but uncheck “minutes”, the seconds in your counter will tick from 0 to 3599.

By default the higher units will be hidden from the counter if their value is zero. E.g. even if you check “years” but less than 1 year is left before the event, the counter will not show “0 years”, it will start with “months”, naturally, if more that 1 month is left and so on. This option is encoded in layout presets and is active in all included presets by default, but it can be easily changed.

Find <hide_highest_zeros>1</hide_highest_zeros> node in preset XML document and change its value to 0.

You can safely uncheck lower units. Counter animations each second may distract your site visitors, especially if several countdowns are displayed on the same page, so unchecking “seconds” might be a reasonable solution.

If you uncheck more lower units the counter value will be evidently less precise but it can be a good practice when displaying intervals to a date when the time is not important. Of course you set “Event date and time” as usual (you can opt for midnight or midday in the time portion) but your visitors will see how may days are left before the event. Keep in mind that if the lowest displayed unit value becomes 0 (in our example, when less than 24 hours are left before event) it will be automatically replaced by the next lower non-zero unit. This option is encoded in layout presets and is active in all included presets by default, but it can be easily changed.

Find <allow_all_zeros>0</allow_all_zeros> node in preset XML document and change its value to 1.

Let’s continue with the example. You have selected to display only days and the event is in 25 hours. The counter will show “1 day” left. When less that 24 hours are left the counter will display “23, 22, 21, …, 1 hour” left. When less that 1 hour is left the counter will show “59, 58, 57, …, 1 minute” left and switch to seconds. In count up mode the counter will start showing seconds during the first minute after event, then minutes during the first hour and so on.

Goto URL on widget click – optionally it is possible to make the whole widget act as a link to an URL. Leave this field empty (default) to disable this feature.

Redirect to URL on contdown zero – automatically redirect to another URL when countdown reaches zero (i.e. at event time). Leave this field empty (default) to disable this feature. Use this option with caution if the widget is displayed on a page with forms. The redirection is automatic and users will lose all unsaved form data.

The rest of options are self-explaining. The “font-size” group allows setting custom sizes for all counter elements. The “CSS” group of settings can be used to add more styles (CSS rules) to counter elements, e.g. change the font for the labels or the color of event title text. Depending on the animation profile, some styles will have no effect on digits: if the animation uses images to display digits setting font-weight or color on digits will be useless. A basic CSS knowledge is required to manage these settigns.