Cookbook


WordPress community offers an enormous number of plugins for extending a blog’s functionality. Even after a narrow search you may encounter dozens of similar plugins and a time-saver quick-start document is what you will need first to make a decision about which plugin to use. This article covers some of the most popular scenarios and gives concise and easy-to-follow instructions on how to get your countdown running almost out of the box.

Styling and fine-tuning details are omitted in this document. Once you have the countdown basically set up and running you can return to full documentation for details.

Case 1: I need a countdown to a future event in the sidebar

Solution:

  1. Open “Appearance / Widgets” screen in WordPress administration interface. Find “Smart Countdown FX” in available widgets list and add it to the target sidebar.
  2. Click on the sidebar the widget was added to on step 1 and expand “Countdown” settings.
  3. Click on “Title” field if you wish to change widget title (by default the title is “Countdown”).
  4. Click on “Event date and time” input control. A calendar popup will open. Choose date and time and press “Done” to close date selection popup.
  5. Enter you event description into “Title before counter for countdown mode” text box.
  6. Expand “Counter display mode:” drop-down and select “Countdown – no limit” if you wish the widget to disappear after event time arrives.
  7. Save widget settings.

Open site front-end – you should see the countdown widget running.

Case 2: I need a countdown to a future event in a post or page

Solution:

  1. Open the post or page in edit mode.
  2. Insert the following text: [smartcountdown deadline="2016-02-03 18:00:00" mode="countdown" title_before_down="Your personalized event description"] (change the date and time according to your event, enter date in MySQL format, the sample date means FEB 03 2016 6 p.m.)
  3. Save the post or open it as preview. You should see the countdown running.

Case 3: I have added the countdown to a wide widget area but the numbers are vertically aligned

Some WordPress themes provide widget areas which are not sidebars, e.g. header or footer areas, that may be as wide as the page content area. Displaying a counter widget with default vertical (sidebar) layout in such areas is not looking good.

Solution:

  1. Find “Widget layout preset” drop-down in widget settings and choose “Shortcode compact” option.
  2. Save.

Now the countdown should be displayed in a row, from left to right.

Case 4: I need a countdown widget that shows opening times of my shop

This is a typical scenario where recurring events support is required. You will need a companion plugin which makes recurring events easy to set up.

Solution:

  1. Install and enable Easy Recurring Events plugin.
  2. Open “Easy Recurring Events” in “Setting” section of your WordPress administration interface.
  3. Expand “Recurrence Pattern” drop-down in “Configuration 1” section and select “Weekly”.
  4. Enter “Weekdays” as a title for configuration 1.
  5. Check the days when your shop is open on workdays (normally you check Monday to Friday).
  6. Select opening time in “Time” setting.
  7. Enter duration in HH:MM format. Knowing you shop closing time a simple calculation (closing time – opening time) will do the trick.
  8. Expand “Recurrence Pattern” drop-down in “Configuration 2” section and select “Weekly”.
  9. Enter “Weekend” as a title for configuration 2.
  10. Check the day(s) when your shop is open on weekends (normally you check Saturday only).
  11. Select opening time in “Time” setting, it may be different from the one you have set in step 6.
  12. Enter duration in HH:MM format. Knowing you shop closing time on weekends a simple calculation (closing time – opening time) will do the trick.
  13. Save changes.

Now you have to connect Smart Countdown FX widget to Easy Recurring Events plugin.

Widget solution:

  1. Add Smart Countdown FX to the widget area of your choice (see Case 1) if you haven’t done it yet.
  2. Open widget settings and expand “
  3. Choose “Easy Recurring – merge configurations” option.
  4. Expand “Counter display mode:” drop-down and choose “Auto + countdown to event end while in progress”
  5. Set “Title before counter for countdown mode” text. This text will be displayed when your shop is closed and can be something like “Our store opens in”.
  6. Set “Title before counter for count up mode” text. This text will be displayed while your shop is open and can be something like “Our store will close in”.
  7. Save.

Post or page solution:

Add the following shortcode to the article text:

[smartcountdown import_config="scd_easy_recurrence::1::2" mode="countdown_to_end" title_before_down="Our store opens in:" title_before_up="Our store will close in:"]

Save the post or page.

Case 5: I need to center the counter horizontally

Widget solution:

Find “Widget style” setting in widget configuration and add the following text (CSS rule): text-align:center;

Post or page solution:

Add the following attribute to [smartcountdown] shortcode:

[smartcountdown <... other attributes ...> widget_style="text-align:center;"]

Case 6: I would like to hide “seconds” display

Widget solution:

Find “Display counter units:” group of check-boxes, uncheck the unit(s) you would like to hide (e.g. “seconds”) and save.

Page or post solution:

Add the following attribute to [smartcountdown] shortcode:

[smartcountdown <... other attributes ...> units="years, months, weeks,days,hours,minutes"]

“seconds” are not included into the comma-separated list above and will not be displayed. You can exclude other units, e.g. “weeks” using the same technique.

Case 7: I would like to display “Time has arrived!” message when countdown reaches zero

Widget solution:

  1. Find “Use titles for count up mode as Time has arrived message” checkbox and check it.
  2. Introduce your personalized Time has arrived message into “Title before counter for count up mode” box.
  3. Save.

Page or post solution:

Add the following attribute to [smartcountdown] shortcode:

[smartcountdown <... other attributes ...> title_before_down="Time left until event (you personalized message)" title_before_up="Time has arrived! (you personalized message)" mode="auto" hide_countup_counter="1"]