Easy Timer

Easy Timer is a free WordPress plugin allowing you to easily insert into posts, pages and widgets of your website an unlimited number of count down/up timers that refresh every second, and the time or date. Each countdown timer shows the time remaining until the date you choose, and, if you want, reveals a hidden content when this date is reached. Each countup timer shows the time elapsed since the date you choose or the time spent by the Internet user on the webpage.

Easy Timer also allows you to schedule an automatic content modification.

WordPress Download

Summary

  1. Installation
  2. Upgrade
  3. Countdown Timers [+]
    1. The filter Attribute
    2. Display Of Remaining Time
    3. Automatic Content Substitution
    4. Succession Of Countdown Timers
    5. Periodics Countdown Timers
    6. Relative Dates
  4. Countup Timers [+]
    1. The filter Attribute
    2. Display Of Elapsed Time
    3. Automatic Content Substitution
    4. Succession Of Countup Timers
    5. Chronometers
    6. Relative Dates
  5. Countup And Countdown Timers [+]
    1. The filter Attribute
    2. Display Of Elapsed And Remaining Time
    3. Succession Of Counters
    4. Periodics Counters
    5. Relative Dates
  6. Time And Date [+]
    1. Time
    2. Year
    3. ISO 8601 Year And Week
    4. Day Of The Year
    5. Month
    6. Day Of The Month
    7. Weekday
    8. The filter Attribute
  7. Time Zone [+]
    1. The filter Attribute
  8. Display Of The Options [+]
    1. The default Attribute
    2. The filter Attribute
  9. Advanced Customization [+]
    1. Custom Files
    2. Custom Languages
  10. FAQ [+]
    1. In which language are displayed the count down/up timers, months and weekdays?
    2. Why does my count down/up timer not refresh every second?
    3. How can I use shortcodes in my WordPress theme?
    4. How can I use shortcodes in comments?
    5. How can I use shortcodes in attributes of shortcodes?
    6. How can I nest several identical shortcodes?

1. Installation

  1. Unzip the plugin file.
  2. Upload with your FTP software the easy-timer folder, and only this folder, to your plugins directory (it should be wp-content/plugins).
  3. Activate the plugin through the Plugins menu in WordPress.
  4. Configure the plugin through the Easy Timer options page in WordPress.

You can also install Easy Timer through the Add Plugins page of the Plugins menu in WordPress (Plugins => Add New => Upload Plugin). Upload the plugin file without unzipping it.

2. Upgrade

When you upgrade Easy Timer, you don't lose any settings or any data.

  1. Unzip the plugin file.
  2. Upload with your FTP software the easy-timer folder, and only this folder, to your plugins directory (it should be wp-content/plugins), without deleting the easy-timer folder that already exists in this directory.

You don't need to deactivate and reactivate the plugin.

You can also upgrade Easy Timer through the Plugins menu in WordPress, and through the WordPress Updates page of the Dashboard menu in WordPress (Dashboard => Updates).

3. Countdown Timers

To display a countdown timer, insert into your posts/pages/widgets a code like this:

[countdown date=YYYY/MM/DD-hh:mm:ss]
Just [timer] until this film comes out in cinemas!
[/countdown]

YYYY = year
MM = month (from 1 to 12)
DD = day number of the month (from 1 to 31)
hh = hours
mm = minutes
ss = seconds

In some cases, you can specify the date differently:

  • YYYY/MM/DD is equivalent to YYYY/MM/DD-00:00:00
  • YYYY/MM/DD-hh is equivalent to YYYY/MM/DD-hh:00:00
  • YYYY/MM/DD-hh:mm is equivalent to YYYY/MM/DD-hh:mm:00

The date shall be indicated according to the time zone of your website. Set correctly your time zone via the WordPress Administration Panel if you have not done. You may occasionally specify an offset to UTC time different from your time zone using the offset attribute:

[countdown date=YYYY/MM/DD-hh:mm:ss offset=x]
Just [timer] until this film comes out in cinemas!
[/countdown]

The offset attribute is the offset (in hours) to UTC time. You can specify any relative number for this attribute. In some countries, the offset to UTC time is not constant. It may distort the calculation of the remaining time. To solve this problem, you can use the offset attribute (offset=x for each date during winter time and offset=x+1 for each date during summer time, replace x with the right numeric value).

The countdown timer shows the same remaining time everywhere in the world. When the date is reached, the content between [countdown date=YYYY/MM/DD-hh:mm:ss] and [/countdown] disappears. You can format this content as any content of your website.

You can insert the [timer] shortcode as many times as you want between [countdown date=YYYY/MM/DD-hh:mm:ss] and [/countdown]. If you don't insert it, Easy Timer allows you to schedule a content disappearance without displaying a countdown timer:

[countdown date=YYYY/MM/DD-hh:mm:ss]
When this film comes out in cinemas, this sentence will disappear!
[/countdown]

3.1 The filter Attribute

You can specify a PHP function that will be applied to the content before this one is displayed, using the filter attribute, like this:

[countdown date=YYYY/MM/DD-hh:mm:ss filter=function]Content[/countdown]

Replace function by the name of the function you want to apply.

It is possible to specify several functions for the filter attribute, by separating the different functions by /, like this:

[countdown date=YYYY/MM/DD-hh:mm:ss filter=function1/function2/.../functionN]Content[/countdown]

The functions will be applied in the specified order.

3.2 Display Of Remaining Time

You are not limited to the [timer] shortcode. You can use the following shortcodes:

  • [timer] to display the remaining time
  • [dhmstimer] to display the remaining time in days, hours, minutes and seconds
  • [dhmtimer] to display the remaining time in days, hours and minutes
  • [dhtimer] to display the remaining time in days and hours
  • [dtimer] to display the remaining time in days
  • [hmstimer] to display the remaining time in hours, minutes and seconds
  • [hmtimer] to display the remaining time in hours and minutes
  • [htimer] to display the remaining time in hours
  • [mstimer] to display the remaining time in minutes and seconds
  • [mtimer] to display the remaining time in minutes
  • [stimer] to display the remaining time in seconds
  • [hmsrtimer] to display only the hours, minutes and seconds of the remaining time in days, hours, minutes and seconds
  • [hmrtimer] to display only the hours and minutes of the remaining time in days, hours, minutes and seconds
  • [hrtimer] to display only the hours of the remaining time in days, hours, minutes and seconds
  • [msrtimer] to display only the minutes and seconds of the remaining time in days, hours, minutes and seconds
  • [mrtimer] to display only the minutes of the remaining time in days, hours, minutes and seconds
  • [srtimer] to display only the seconds of the remaining time in days, hours, minutes and seconds

All countdown timers will display:

  • the remaining hours (and optionally minutes and seconds) if the remaining time is less than 1 day
  • the remaining minutes (and optionally seconds) if the remaining time is less than 1 hour
  • the remaining seconds if the remaining time is less than 1 minute

3.3 Automatic Content Substitution

If you want to schedule a content substitution, insert into your posts/pages/widgets a code like this:

[countdown date=2018/01/01]
Just [timer] until 2018!
[after]Happy New Year 2018![/countdown]

Result (with a little formatting, time zone = UTC):

Just 280 days 7 hours 9 minutes 22 seconds until 2018!

Insert the content you want to substitute between [after] and [/countdown]. When the date is reached, the content between [countdown date=YYYY/MM/DD-hh:mm:ss] and [after] disappears, and the content between [after] and [/countdown] appears. The content between [after] and [/countdown] is never sent to the browser before this date.

You can insert the [timer] shortcode as many times as you want between [countdown date=YYYY/MM/DD-hh:mm:ss] and [after]. If you don't insert it, Easy Timer allows you to schedule a content substitution without displaying a countdown timer:

[countdown date=2018/01/01]
We will be soon in 2018!
[after]Happy New Year 2018![/countdown]

Result (with a little formatting, time zone = UTC):

We will be soon in 2018!

3.4 Succession Of Countdown Timers

It is possible to specify several dates for the date attribute, by separating the different dates by //, like this:

[countdown date=2017/12/25//2018/01/01]
Just [timer] until Christmas![after]
Just [timer] until 2018![after]
Happy New Year 2018![/countdown]

Result (with a little formatting, time zone = UTC):

Just 273 days 7 hours 9 minutes 22 seconds until Christmas!

You can use the following shortcodes:

  • [total-timer] to display the remaining time until the last date of the date attribute
  • [total-dhmstimer] to display the remaining time until the last date of the date attribute in days, hours, minutes and seconds
  • [total-dhmtimer] to display the remaining time until the last date of the date attribute in days, hours and minutes
  • [total-dhtimer] to display the remaining time until the last date of the date attribute in days and hours
  • [total-dtimer] to display the remaining time until the last date of the date attribute in days
  • [total-hmstimer] to display the remaining time until the last date of the date attribute in hours, minutes and seconds
  • [total-hmtimer] to display the remaining time until the last date of the date attribute in hours and minutes
  • [total-htimer] to display the remaining time until the last date of the date attribute in hours
  • [total-mstimer] to display the remaining time until the last date of the date attribute in minutes and seconds
  • [total-mtimer] to display the remaining time until the last date of the date attribute in minutes
  • [total-stimer] to display the remaining time until the last date of the date attribute in seconds
  • [total-hmsrtimer] to display only the hours, minutes and seconds of the remaining time until the last date of the date attribute in days, hours, minutes and seconds
  • [total-hmrtimer] to display only the hours and minutes of the remaining time until the last date of the date attribute in days, hours, minutes and seconds
  • [total-hrtimer] to display only the hours of the remaining time until the last date of the date attribute in days, hours, minutes and seconds
  • [total-msrtimer] to display only the minutes and seconds of the remaining time until the last date of the date attribute in days, hours, minutes and seconds
  • [total-mrtimer] to display only the minutes of the remaining time until the last date of the date attribute in days, hours, minutes and seconds
  • [total-srtimer] to display only the seconds of the remaining time until the last date of the date attribute in days, hours, minutes and seconds

Another example:

[countdown date=2017/01/01//2018/01/01//2019/01/01//2020/01/01//2021/01/01]
Just [timer] until 2017 and [total-timer] until 2021![after]
Just [timer] until 2018 and [total-timer] until 2021![after]
Just [timer] until 2019 and [total-timer] until 2021![after]
Just [timer] until 2020 and [total-timer] until 2021![after]
Just [timer] until 2021![after]Happy New Year 2021![/countdown]

Result (with a little formatting, time zone = UTC):

Just 280 days 7 hours 9 minutes 22 seconds until 2018 and 1376 days 7 hours 9 minutes 22 seconds until 2021!

3.5 Periodics Countdown Timers

You can display a periodic countdown timer, like this:

[countdown date=YYYY/MM/DD-hh:mm:ss period=d:h:m:s]
Just [timer]![/countdown]

d = number of days
h = number of hours
m = number of minutes
s = number of seconds

In some cases, you can specify the period differently:

  • d is equivalent to d:0:0:0
  • d:h is equivalent to d:h:0:0
  • d:h:m is equivalent to d:h:m:0

The countdown timer repeats with a period equal to the duration specified for the period attribute.

Example (counter repeating every day):

[countdown date=2009/09/23 period=1]
Just [timer] before tomorrow![/countdown]

Result (with a little formatting, time zone = UTC):

Just 7 hours 9 minutes 22 seconds before tomorrow!

Another example (counter repeating every week):

[countdown date=2017/01/01//2017/01/04 period=7]
Just [timer] before Sunday![after]
Just [timer] before Wednesday![/countdown]

Result (with a little formatting, time zone = UTC):

Just 2 days 7 hours 9 minutes 22 seconds before Wednesday!

3.6 Relative Dates

It is possible to specify a relative date for the date attribute, like this:

[countdown date=+d:h:m:s]
Just [timer]![after]Countdown ended!
[/countdown]

d = number of days
h = number of hours
m = number of minutes
s = number of seconds

In some cases, you can specify the duration differently:

  • +d is equivalent to +d:0:0:0
  • +d:h is equivalent to +d:h:0:0
  • +d:h:m is equivalent to +d:h:m:0

The date is then the date of the first display of the content by the Internet user, increased by the specified duration.

Example:

[countdown date=+0:0:2]
Just [timer]![after]Countdown ended!
[/countdown]

Result (with a little formatting):

Just 2 minutes 0 second!

With the origin attribute, you can use the date of the last display of the content by the Internet user, instead of the date of the first display.

Example:

[countdown date=+0:18 origin=last-visit]
Just [timer]![/countdown]

Result (with a little formatting):

Just 18 hours 0 second!

4. Countup Timers

To display a countup timer, insert into your posts/pages/widgets a code like this:

[countup date=YYYY/MM/DD-hh:mm:ss]
For [timer], this film is released in cinemas!
[/countup]

YYYY = year
MM = month (from 1 to 12)
DD = day number of the month (from 1 to 31)
hh = hours
mm = minutes
ss = seconds

In some cases, you can specify the date differently:

  • YYYY/MM/DD is equivalent to YYYY/MM/DD-00:00:00
  • YYYY/MM/DD-hh is equivalent to YYYY/MM/DD-hh:00:00
  • YYYY/MM/DD-hh:mm is equivalent to YYYY/MM/DD-hh:mm:00

The date shall be indicated according to the time zone of your website. Set correctly your time zone via the WordPress Administration Panel if you have not done. You may occasionally specify an offset to UTC time different from your time zone using the offset attribute:

[countup date=YYYY/MM/DD-hh:mm:ss offset=x]
For [timer], this film is released in cinemas!
[/countup]

The offset attribute is the offset (in hours) to UTC time. You can specify any relative number for this attribute. In some countries, the offset to UTC time is not constant. It may distort the calculation of the elapsed time. To solve this problem, you can use the offset attribute (offset=x for each date during winter time and offset=x+1 for each date during summer time, replace x with the right numeric value).

The countup timer shows the same elapsed time everywhere in the world. If the date is not yet reached, the content between [countup date=YYYY/MM/DD-hh:mm:ss] and [/countup] doesn't appear. You can format this content as any content of your website.

You can insert the [timer] shortcode as many times as you want between [countup date=YYYY/MM/DD-hh:mm:ss] and [/countup]. If you don't insert it, Easy Timer allows you to schedule a content appearance without displaying a countup timer:

[countup date=YYYY/MM/DD-hh:mm:ss]
When this film comes out in cinemas, this sentence will appear!
[/countup]

4.1 The filter Attribute

You can specify a PHP function that will be applied to the content before this one is displayed, using the filter attribute, like this:

[countup date=YYYY/MM/DD-hh:mm:ss filter=function]Content[/countup]

Replace function by the name of the function you want to apply.

It is possible to specify several functions for the filter attribute, by separating the different functions by /, like this:

[countup date=YYYY/MM/DD-hh:mm:ss filter=function1/function2/.../functionN]Content[/countup]

The functions will be applied in the specified order.

4.2 Display Of Elapsed Time

You are not limited to the [timer] shortcode. You can use the following shortcodes:

  • [timer] to display the elapsed time
  • [dhmstimer] to display the elapsed time in days, hours, minutes and seconds
  • [dhmtimer] to display the elapsed time in days, hours and minutes
  • [dhtimer] to display the elapsed time in days and hours
  • [dtimer] to display the elapsed time in days
  • [hmstimer] to display the elapsed time in hours, minutes and seconds
  • [hmtimer] to display the elapsed time in hours and minutes
  • [htimer] to display the elapsed time in hours
  • [mstimer] to display the elapsed time in minutes and seconds
  • [mtimer] to display the elapsed time in minutes
  • [stimer] to display the elapsed time in seconds
  • [hmsrtimer] to display only the hours, minutes and seconds of the elapsed time in days, hours, minutes and seconds
  • [hmrtimer] to display only the hours and minutes of the elapsed time in days, hours, minutes and seconds
  • [hrtimer] to display only the hours of the elapsed time in days, hours, minutes and seconds
  • [msrtimer] to display only the minutes and seconds of the elapsed time in days, hours, minutes and seconds
  • [mrtimer] to display only the minutes of the elapsed time in days, hours, minutes and seconds
  • [srtimer] to display only the seconds of the elapsed time in days, hours, minutes and seconds

All countup timers will display:

  • the elapsed hours (and optionally minutes and seconds) if the elapsed time is less than 1 day
  • the elapsed minutes (and optionally seconds) if the elapsed time is less than 1 hour
  • the elapsed seconds if the elapsed time is less than 1 minute

4.3 Automatic Content Substitution

If you want to schedule a content substitution, insert into your posts/pages/widgets a code like this:

[countup date=2017/01/01]
For [timer], we are in 2017!
[before]We will be soon in 2017![/countup]

Result (with a little formatting, time zone = UTC):

For 84 days 16 hours 50 minutes 38 seconds, we are in 2017!

Insert the content you want to substitute between [countup date=YYYY/MM/DD-hh:mm:ss] and [before]. When the date is reached, the content between [countup date=YYYY/MM/DD-hh:mm:ss] and [before] appears, and the content between [before] and [/countup] disappears. The content between [before] and [/countup] is never sent to the browser after this date.

You can insert the [timer] shortcode as many times as you want between [countup date=YYYY/MM/DD-hh:mm:ss] and [before]. If you don't insert it, Easy Timer allows you to schedule a content substitution without displaying a countup timer:

[countup date=2018/01/01]
Happy New Year 2018![before]
We will be soon in 2018![/countup]

Result (with a little formatting, time zone = UTC):

We will be soon in 2018!

4.4 Succession Of Countup Timers

It is possible to specify several dates for the date attribute, by separating the different dates by //, like this:

[countup date=2017/01/01//2016/12/25]
For [timer], we are in 2017![before]
For [timer], Christmas has arrived![before]
Christmas will come soon![/countup]

Result (with a little formatting, time zone = UTC):

For 84 days 16 hours 50 minutes 38 seconds, we are in 2017!

You can use the following shortcodes:

  • [total-timer] to display the elapsed time since the last date of the date attribute
  • [total-dhmstimer] to display the elapsed time since the last date of the date attribute in days, hours, minutes and seconds
  • [total-dhmtimer] to display the elapsed time since the last date of the date attribute in days, hours and minutes
  • [total-dhtimer] to display the elapsed time since the last date of the date attribute in days and hours
  • [total-dtimer] to display the elapsed time since the last date of the date attribute in days
  • [total-hmstimer] to display the elapsed time since the last date of the date attribute in hours, minutes and seconds
  • [total-hmtimer] to display the elapsed time since the last date of the date attribute in hours and minutes
  • [total-htimer] to display the elapsed time since the last date of the date attribute in hours
  • [total-mstimer] to display the elapsed time since the last date of the date attribute in minutes and seconds
  • [total-mtimer] to display the elapsed time since the last date of the date attribute in minutes
  • [total-stimer] to display the elapsed time since the last date of the date attribute in seconds
  • [total-hmsrtimer] to display only the hours, minutes and seconds of the elapsed time since the last date of the date attribute in days, hours, minutes and seconds
  • [total-hmrtimer] to display only the hours and minutes of the elapsed time since the last date of the date attribute in days, hours, minutes and seconds
  • [total-hrtimer] to display only the hours of the elapsed time since the last date of the date attribute in days, hours, minutes and seconds
  • [total-msrtimer] to display only the minutes and seconds of the elapsed time since the last date of the date attribute in days, hours, minutes and seconds
  • [total-mrtimer] to display only the minutes of the elapsed time since the last date of the date attribute in days, hours, minutes and seconds
  • [total-srtimer] to display only the seconds of the elapsed time since the last date of the date attribute in days, hours, minutes and seconds

Another example:

[countup date=2020/01/01//2019/01/01//2018/01/01//2017/01/01//2016/01/01]
For [timer], we are in 2020 and for [total-timer], 2016 has arrived![before]
For [timer], we are in 2019 and for [total-timer], 2016 has arrived![before]
For [timer], we are in 2018 and for [total-timer], 2016 has arrived![before]
For [timer], we are in 2017 and for [total-timer], 2016 has arrived![before]
For [timer], we are in 2016![before]We will be soon in 2016![/countup]

Result (with a little formatting, time zone = UTC):

For 84 days 16 hours 50 minutes 38 seconds, we are in 2017 and for 450 days 16 hours 50 minutes 38 seconds, 2016 has arrived!

4.5 Chronometers

To display a chronometer, insert into your posts/pages/widgets a code like this:

[countup]You have spent [timer] on this webpage.[/countup]

Result:

You have spent 0 second on this webpage.

To display a chronometer that begins from n seconds (n must be a positive integer), insert into your posts/pages/widgets a code like this:

[countup date=n]Total time: [timer][/countup]

Result (with n=55):

Total time: 55 seconds

To display a chronometer that begins from m minutes and n seconds (m and n must be positive integers), insert into your posts/pages/widgets a code like this:

[countup date=m:n]Total time: [timer][/countup]

Result (with m=5 and n=8):

Total time: 5 minutes 8 seconds

4.6 Relative Dates

It is possible to specify a relative date for the date attribute, like this:

[countup date=-d:h:m:s]Total time: [timer][/countup]

d = number of days
h = number of hours
m = number of minutes
s = number of seconds

In some cases, you can specify the duration differently:

  • -d is equivalent to -d:0:0:0
  • -d:h is equivalent to -d:h:0:0
  • -d:h:m is equivalent to -d:h:m:0

The date is then the date of the first display of the content by the Internet user, decreased by the specified duration.

Example:

[countup date=-0]
Elapsed time since your first display of this page: [timer]
[/countup]

Result (with a little formatting):

Elapsed time since your first display of this page: 0 second

With the origin attribute, you can use the date of the last display of the content by the Internet user, instead of the date of the first display.

Example:

[countup date=-0 origin=last-visit]
Elapsed time since your last display of this page: [timer]
[/countup]

Result (with a little formatting):

Elapsed time since your last display of this page: 0 second

5. Countup And Countdown Timers

To display countup and countdown timers, insert into your posts/pages/widgets a code like this:

[counter date=YYY/MM/DD-hh:mm:ss]
Just [remaining-timer] until this film comes out in cinemas!
[after]For [elapsed-timer], this film is released in cinemas![/counter]

YYYY = year
MM = month (from 1 to 12)
DD = day number of the month (from 1 to 31)
hh = hours
mm = minutes
ss = seconds

In some cases, you can specify the date differently:

  • YYYY/MM/DD is equivalent to YYYY/MM/DD-00:00:00
  • YYYY/MM/DD-hh is equivalent to YYYY/MM/DD-hh:00:00
  • YYYY/MM/DD-hh:mm is equivalent to YYYY/MM/DD-hh:mm:00

The date shall be indicated according to the time zone of your website. Set correctly your time zone via the WordPress Administration Panel if you have not done. You may occasionally specify an offset to UTC time different from your time zone using the offset attribute:

[counter date=YYYY/MM/DD-hh:mm:ss offset=x]
Just [remaining-timer] until this film comes out in cinemas!
[after]For [elapsed-timer], this film is released in cinemas![/counter]

The offset attribute is the offset (in hours) to UTC time. You can specify any relative number for this attribute. In some countries, the offset to UTC time is not constant. It may distort the calculation of the elapsed and remaining time. To solve this problem, you can use the offset attribute (offset=x for each date during winter time and offset=x+1 for each date during summer time, replace x with the right numeric value).

The counter shows the same elapsed and remaining time everywhere in the world. When the date is reached, the content between [counter date=YYYY/MM/DD-hh:mm:ss] and [after] disappears, and the content between [after] and [/counter] appears. The content between [after] and [/counter] is never sent to the browser before this date.

You can insert the [elapsed-timer] and [remaining-timer] shortcodes as many times as you want between [counter date=YYYY/MM/DD-hh:mm:ss] and [/counter]. If you don't insert it, Easy Timer allows you to schedule a content disappearance without displaying a counter:

[counter date=2018/01/01]
We will be soon in 2018!
[after]Happy New Year 2018![/counter]

Result (with a little formatting, time zone = UTC):

We will be soon in 2018!

5.1 The filter Attribute

You can specify a PHP function that will be applied to the content before this one is displayed, using the filter attribute, like this:

[counter date=YYYY/MM/DD-hh:mm:ss filter=function]
Content 1[after]Content 2[/counter]

Replace function by the name of the function you want to apply.

It is possible to specify several functions for the filter attribute, by separating the different functions by /, like this:

[counter date=YYYY/MM/DD-hh:mm:ss filter=function1/function2/.../functionN]
Content 1[after]Content 2[/counter]

The functions will be applied in the specified order.

5.2 Display Of Elapsed And Remaining Time

You are not limited to the [elapsed-timer] and [remaining-timer] shortcodes. You can use the following shortcodes:

  • [timer] to display the elapsed time
  • [dhmstimer] to display the elapsed time in days, hours, minutes and seconds
  • [dhmtimer] to display the elapsed time in days, hours and minutes
  • [dhtimer] to display the elapsed time in days and hours
  • [dtimer] to display the elapsed time in days
  • [hmstimer] to display the elapsed time in hours, minutes and seconds
  • [hmtimer] to display the elapsed time in hours and minutes
  • [htimer] to display the elapsed time in hours
  • [mstimer] to display the elapsed time in minutes and seconds
  • [mtimer] to display the elapsed time in minutes
  • [stimer] to display the elapsed time in seconds
  • [hmsrtimer] to display only the hours, minutes and seconds of the elapsed time in days, hours, minutes and seconds
  • [hmrtimer] to display only the hours and minutes of the elapsed time in days, hours, minutes and seconds
  • [hrtimer] to display only the hours of the elapsed time in days, hours, minutes and seconds
  • [msrtimer] to display only the minutes and seconds of the elapsed time in days, hours, minutes and seconds
  • [mrtimer] to display only the minutes of the elapsed time in days, hours, minutes and seconds
  • [srtimer] to display only the seconds of the elapsed time in days, hours, minutes and seconds
  • [elapsed-timer] to display the elapsed time
  • [elapsed-dhmstimer] to display the elapsed time in days, hours, minutes and seconds
  • [elapsed-dhmtimer] to display the elapsed time in days, hours and minutes
  • [elapsed-dhtimer] to display the elapsed time in days and hours
  • [elapsed-dtimer] to display the elapsed time in days
  • [elapsed-hmstimer] to display the elapsed time in hours, minutes and seconds
  • [elapsed-hmtimer] to display the elapsed time in hours and minutes
  • [elapsed-htimer] to display the elapsed time in hours
  • [elapsed-mstimer] to display the elapsed time in minutes and seconds
  • [elapsed-mtimer] to display the elapsed time in minutes
  • [elapsed-stimer] to display the elapsed time in seconds
  • [elapsed-hmsrtimer] to display only the hours, minutes and seconds of the elapsed time in days, hours, minutes and seconds
  • [elapsed-hmrtimer] to display only the hours and minutes of the elapsed time in days, hours, minutes and seconds
  • [elapsed-hrtimer] to display only the hours of the elapsed time in days, hours, minutes and seconds
  • [elapsed-msrtimer] to display only the minutes and seconds of the elapsed time in days, hours, minutes and seconds
  • [elapsed-mrtimer] to display only the minutes of the elapsed time in days, hours, minutes and seconds
  • [elapsed-srtimer] to display only the seconds of the elapsed time in days, hours, minutes and seconds
  • [remaining-timer] to display the remaining time
  • [remaining-dhmstimer] to display the remaining time in days, hours, minutes and seconds
  • [remaining-dhmtimer] to display the remaining time in days, hours and minutes
  • [remaining-dhtimer] to display the remaining time in days and hours
  • [remaining-dtimer] to display the remaining time in days
  • [remaining-hmstimer] to display the remaining time in hours, minutes and seconds
  • [remaining-hmtimer] to display the remaining time in hours and minutes
  • [remaining-htimer] to display the remaining time in hours
  • [remaining-mstimer] to display the remaining time in minutes and seconds
  • [remaining-mtimer] to display the remaining time in minutes
  • [remaining-stimer] to display the remaining time in seconds
  • [remaining-hmsrtimer] to display only the hours, minutes and seconds of the remaining time in days, hours, minutes and seconds
  • [remaining-hmrtimer] to display only the hours and minutes of the remaining time in days, hours, minutes and seconds
  • [remaining-hrtimer] to display only the hours of the remaining time in days, hours, minutes and seconds
  • [remaining-msrtimer] to display only the minutes and seconds of the remaining time in days, hours, minutes and seconds
  • [remaining-mrtimer] to display only the minutes of the remaining time in days, hours, minutes and seconds
  • [remaining-srtimer] to display only the seconds of the remaining time in days, hours, minutes and seconds

All counters will display:

  • the elapsed/remaining hours (and optionally minutes and seconds) if the elapsed/remaining time is less than 1 day
  • the elapsed/remaining minutes (and optionally seconds) if the elapsed/remaining time is less than 1 hour
  • the elapsed/remaining seconds if the elapsed/remaining time is less than 1 minute

5.3 Succession Of Counters

It is possible to specify several dates for the date attribute, by separating the different dates by //, like this:

[counter date=2016/12/25//2017/01/01]
Just [remaining-timer] until Christmas![after]
For [elapsed-timer], Christmas has arrived!
Just [remaining-timer] until 2017![after]
For [elapsed-timer], we are in 2017![/counter]

Result (with a little formatting, time zone = UTC):

For 84 days 16 hours 50 minutes 38 seconds, we are in 2017!

You can use the following shortcodes:

  • [total-timer] to display the elapsed time since the first date of the date attribute
  • [total-dhmstimer] to display the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-dhmtimer] to display the elapsed time since the first date of the date attribute in days, hours and minutes
  • [total-dhtimer] to display the elapsed time since the first date of the date attribute in days and hours
  • [total-dtimer] to display the elapsed time since the first date of the date attribute in days
  • [total-hmstimer] to display the elapsed time since the first date of the date attribute in hours, minutes and seconds
  • [total-hmtimer] to display the elapsed time since the first date of the date attribute in hours and minutes
  • [total-htimer] to display the elapsed time since the first date of the date attribute in hours
  • [total-mstimer] to display the elapsed time since the first date of the date attribute in minutes and seconds
  • [total-mtimer] to display the elapsed time since the first date of the date attribute in minutes
  • [total-stimer] to display the elapsed time since the first date of the date attribute in seconds
  • [total-hmsrtimer] to display only the hours, minutes and seconds of the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-hmrtimer] to display only the hours and minutes of the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-hrtimer] to display only the hours of the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-msrtimer] to display only the minutes and seconds of the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-mrtimer] to display only the minutes of the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-srtimer] to display only the seconds of the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-elapsed-timer] to display the elapsed time since the first date of the date attribute
  • [total-elapsed-dhmstimer] to display the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-elapsed-dhmtimer] to display the elapsed time since the first date of the date attribute in days, hours and minutes
  • [total-elapsed-dhtimer] to display the elapsed time since the first date of the date attribute in days and hours
  • [total-elapsed-dtimer] to display the elapsed time since the first date of the date attribute in days
  • [total-elapsed-hmstimer] to display the elapsed time since the first date of the date attribute in hours, minutes and seconds
  • [total-elapsed-hmtimer] to display the elapsed time since the first date of the date attribute in hours and minutes
  • [total-elapsed-htimer] to display the elapsed time since the first date of the date attribute in hours
  • [total-elapsed-mstimer] to display the elapsed time since the first date of the date attribute in minutes and seconds
  • [total-elapsed-mtimer] to display the elapsed time since the first date of the date attribute in minutes
  • [total-elapsed-stimer] to display the elapsed time since the first date of the date attribute in seconds
  • [total-elapsed-hmsrtimer] to display only the hours, minutes and seconds of the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-elapsed-hmrtimer] to display only the hours and minutes of the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-elapsed-hrtimer] to display only the hours of the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-elapsed-msrtimer] to display only the minutes and seconds of the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-elapsed-mrtimer] to display only the minutes of the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-elapsed-srtimer] to display only the seconds of the elapsed time since the first date of the date attribute in days, hours, minutes and seconds
  • [total-remaining-timer] to display the remaining time until the last date of the date attribute
  • [total-remaining-dhmstimer] to display the remaining time until the last date of the date attribute in days, hours, minutes and seconds
  • [total-remaining-dhmtimer] to display the remaining time until the last date of the date attribute in days, hours and minutes
  • [total-remaining-dhtimer] to display the remaining time until the last date of the date attribute in days and hours
  • [total-remaining-dtimer] to display the remaining time until the last date of the date attribute in days
  • [total-remaining-hmstimer] to display the remaining time until the last date of the date attribute in hours, minutes and seconds
  • [total-remaining-hmtimer] to display the remaining time until the last date of the date attribute in hours and minutes
  • [total-remaining-htimer] to display the remaining time until the last date of the date attribute in hours
  • [total-remaining-mstimer] to display the remaining time until the last date of the date attribute in minutes and seconds
  • [total-remaining-mtimer] to display the remaining time until the last date of the date attribute in minutes
  • [total-remaining-stimer] to display the remaining time until the last date of the date attribute in seconds
  • [total-remaining-hmsrtimer] to display only the hours, minutes and seconds of the remaining time until the last date of the date attribute in days, hours, minutes and seconds
  • [total-remaining-hmrtimer] to display only the hours and minutes of the remaining time until the last date of the date attribute in days, hours, minutes and seconds
  • [total-remaining-hrtimer] to display only the hours of the remaining time until the last date of the date attribute in days, hours, minutes and seconds
  • [total-remaining-msrtimer] to display only the minutes and seconds of the remaining time until the last date of the date attribute in days, hours, minutes and seconds
  • [total-remaining-mrtimer] to display only the minutes of the remaining time until the last date of the date attribute in days, hours, minutes and seconds
  • [total-remaining-srtimer] to display only the seconds of the remaining time until the last date of the date attribute in days, hours, minutes and seconds

Another example:

[counter date=2016/01/01//2017/01/01//2018/01/01//2019/01/01//2020/01/01]
Just [remaining-timer] until 2016 and [total-remaining-timer] until 2020![after]
For [elapsed-timer], we are in 2016!
Just [remaining-timer] until 2017 and [total-remaining-timer] until 2020![after]
For [elapsed-timer], we are in 2017 and for [total-elapsed-timer], 2016 has arrived!
Just [remaining-timer] until 2018 and [total-remaining-timer] until 2020![after]
For [elapsed-timer], we are in 2018 and for [total-elapsed-timer], 2016 has arrived!
Just [remaining-timer] until 2019 and [total-remaining-timer] until 2020![after]
For [elapsed-timer], we are in 2019 and for [total-elapsed-timer], 2016 has arrived!
Just [remaining-timer] until 2020![after]
For [elapsed-timer], we are in 2020 and for [total-elapsed-timer], 2016 has arrived![/counter]

Result (with a little formatting, time zone = UTC):

For 84 days 16 hours 50 minutes 38 seconds, we are in 2017 and for 450 days 16 hours 50 minutes 38 seconds, 2016 has arrived! Just 280 days 7 hours 9 minutes 22 seconds until 2018 and 1010 days 7 hours 9 minutes 22 seconds until 2020!

5.4 Periodics Counters

You can display a periodic counter, like this:

[counter date=YYYY/MM/DD-hh:mm:ss period=d:h:m:s]
Just [remaining-timer]![/counter]

d = number of days
h = number of hours
m = number of minutes
s = number of seconds

In some cases, you can specify the period differently:

  • d is equivalent to d:0:0:0
  • d:h is equivalent to d:h:0:0
  • d:h:m is equivalent to d:h:m:0

The counter repeats with a period equal to the duration specified for the period attribute.

Example (counter repeating every day):

[counter date=2009/09/23 period=1]
Just [remaining-timer] before tomorrow![/counter]

Result (with a little formatting, time zone = UTC):

Just 7 hours 9 minutes 22 seconds before tomorrow!

Another example (counter repeating every week):

[counter date=2017/01/01//2017/01/04 period=7]
Just [remaining-timer] before Sunday![after]
Just [remaining-timer] before Wednesday![/counter]

Result (with a little formatting, time zone = UTC):

Just 2 days 7 hours 9 minutes 22 seconds before Wednesday!

5.5 Relative Dates

It is possible to specify a relative date for the date attribute, like this:

[counter date=+d:h:m:s]
Just [remaining-timer]![after]Countdown ended!
[/counter]
[counter date=-d:h:m:s][after]Total time: [timer][/counter]

d = number of days
h = number of hours
m = number of minutes
s = number of seconds

In some cases, you can specify the duration differently:

  • +d is equivalent to +d:0:0:0
  • +d:h is equivalent to +d:h:0:0
  • +d:h:m is equivalent to +d:h:m:0
  • -d is equivalent to -d:0:0:0
  • -d:h is equivalent to -d:h:0:0
  • -d:h:m is equivalent to -d:h:m:0

The date is then the date of the first display of the content by the Internet user, increased or decreased by the specified duration.

Example:

[counter date=+0:0:2]
Just [remaining-timer]![after]Countdown ended!
[/counter]

Result (with a little formatting):

Just 2 minutes 0 second!

Another example:

[counter date=-0][after]
Elapsed time since your first display of this page: [timer]
[/counter]

Result (with a little formatting):

Elapsed time since your first display of this page: 0 second

With the origin attribute, you can use the date of the last display of the content by the Internet user, instead of the date of the first display.

Example:

[counter date=-0 origin=last-visit][after]
Elapsed time since your last display of this page: [timer]
[/counter]

Result (with a little formatting):

Elapsed time since your last display of this page: 0 second

6. Time And Date

6.1 Time

To display the time, insert into your posts/pages/widgets a code like this:

It's [clock].

Result (time zone = UTC):

It's 16:50.

By default, the time is displayed in hours and minutes. If you want to display it in hours, minutes and seconds, use the format attribute and write [clock format=hms] instead of [clock]:

It's [clock format=hms].

Result (time zone = UTC):

It's 16:50:38.

The time is displayed according to the time zone of your website. Set correctly your time zone via the WordPress Administration Panel if you have not done. You may occasionally specify an offset to UTC time different from your time zone using the offset attribute.

To display the time of the Internet user:

It's [clock offset=local].

Result:

It's 16:50.

The offset attribute is the offset (in hours) to UTC time. You can specify any relative number for this attribute. You also can specify the local value to display the time of the Internet user. The offset attribute can be used for all shortcodes in the Time And Date and Time Zone sections.

6.2 Year

To display the year, insert into your posts/pages/widgets a code like this:

We are in [year].

Result (time zone = UTC):

We are in 2017.

By default, the year is displayed in 4 digits. If you want to display it in 2 digits, use the format attribute and write [year format=2] instead of [year].

6.3 ISO 8601 Year And Week

To display the ISO 8601 week number and year, insert into your posts/pages/widgets a code like this:

We are in the week [yearweek] of [isoyear].

Result (time zone = UTC):

We are in the week 12 of 2017.

6.4 Day Of The Year

To display the day number of the year, insert into your posts/pages/widgets a code like this:

Today, it's the day [yearday] of [year].

Result (time zone = UTC):

Today, it's the day 85 of 2017.

6.5 Month

To display the month, insert into your posts/pages/widgets a code like this:

We are in [month].

Result (time zone = UTC):

We are in March.

By default, the month is displayed in letters, with the first letter capitalized. Use the format attribute and give the value:

  • lower to display it in lowercase letters
  • upper to display it in uppercase letters
  • 1 to display it as a number with 1 or 2 digits (1 digit for the first nine months of the year, 2 digits for the others)
  • 2 to display it as a number with 2 digits (first digit equal to 0 for the first nine months of the year)

6.6 Day Of The Month

To display the day number of the month, insert into your posts/pages/widgets a code like this:

Today is [month] [monthday], [year].

Result (time zone = UTC):

Today is March 26, 2017.

By default, the day number of the month is displayed as a number with 1 or 2 digits (1 digit for the first nine days of the month, 2 digits for the others). If you want to display it as a number with 2 digits (first digit equal to 0 for the first nine days of the month), use the format attribute and write [monthday format=2] instead of [monthday].

6.7 Weekday

To display the weekday, insert into your posts/pages/widgets a code like this:

Today is [weekday], [month] [monthday], [year].

Result (time zone = UTC):

Today is Sunday, March 26, 2017.

By default, the weekday is displayed with the first letter capitalized. Use the format attribute and give the value:

  • lower to display it in lowercase letters
  • upper to display it in uppercase letters

Example:

Yesterday was [weekday offset=-24], [month offset=-24] [monthday offset=-24], [year offset=-24].
Today is [weekday format=lower offset=0], [month format=lower offset=0] [monthday offset=0], [year offset=0].
Tomorrow will be [weekday format=upper offset=24], [month format=upper offset=24] [monthday offset=24], [year offset=24].

Result:

Yesterday was Saturday, March 25, 2017.
Today is sunday, march 26, 2017.
Tomorrow will be MONDAY, MARCH 27, 2017.

6.8 The filter Attribute

The filter attribute (defined here) is available for all the shortcodes of the Time And Date section.

7. Time Zone

To display the time zone of your website, insert into your posts/pages/widgets a code like this:

The time zone of this website is [timezone].

Result:

The time zone of this website is UTC.

The displayed time zone will be automatically updated each time you will change the time zone of your website.

To display the time zone of the Internet user:

Your time zone is [timezone offset=local].

Result:

Your time zone is UTC.

7.1 The filter Attribute

The filter attribute (defined here) is available for the [timezone] shortcode.

8. Display Of The Options

To display an option of Easy Timer, insert into your posts/pages/widgets a code like this:

[easy-timer option]

by replacing option with:

  • cookies-lifetime to display the cookies lifetime
  • default-timer-prefix to display the default prefix of the [timer] shortcode
  • javascript-enabled to display the activation of JavaScript (possible values: yes, no)
  • version to display the version of Easy Timer

Example:

Default prefix of the <code>[timer]</code> shortcode: [easy-timer default-timer-prefix]

Result:

Default prefix of the [timer] shortcode: dhms

8.1 The default Attribute

You can specify a text that will be displayed instead of the option when this one is empty, using the default attribute, like this:

[easy-timer option default="text"]

Don't forget to include the quotes at the beginning and the end of the default value.

8.2 The filter Attribute

You can specify a PHP function that will be applied to the option before this one is displayed, using the filter attribute, like this:

[easy-timer option filter=function]

Replace function by the name of the function you want to apply.

Sometimes, the option is an English word. You can translate it into the language of your website by entering i18n as the value for the filter attribute.

Example:

JavaScript enabled: [easy-timer javascript-enabled filter=i18n]

Result:

JavaScript enabled: yes

It is possible to specify several functions for the filter attribute, by separating the different functions by /, like this:

[easy-timer option filter=function1/function2/.../functionN]

The functions will be applied in the specified order.

9. Advanced Customization

9.1 Custom Files

You can replace all Easy Timer files (except easy-timer.php) with your own files. For this, create the easy-timer-custom-files folder in the plugins directory (the one where you installed Easy Timer) of your website.

For example, if you want to replace the includes/data.php file of Easy Timer with a file you have customized, create the includes folder in the easy-timer-custom-files folder, and upload your data.php file to this folder.

You can set yourself the directory where your custom files are stored, by inserting this line:

define('EASY_TIMER_CUSTOM_FILES_PATH', ABSPATH.'custom-files/easy-timer/');

just after:

if ( !defined('ABSPATH') )
	define('ABSPATH', dirname(__FILE__) . '/');

in your wp-config.php file.

Replace custom-files/easy-timer with what you want. The value of EASY_TIMER_CUSTOM_FILES_PATH must end with a /.

9.2 Custom Languages

Easy Timer is developed in English and contains files that translate it in French. If you wish, you can translate it into another language.

To do this, create your custom files directory by following these guidelines. Create the languages folder inside of it, and upload your translation files to this folder.

You can create your translation files with the languages/easy-timer.pot file of the plugin, and by using the free software Poedit. Your MO and PO translation files must be named like this:

easy-timer-ll_CC.mo
easy-timer-ll_CC.po

ll_CC is the value displayed by this line of code:

echo get_locale();

when it's executed in one of the files of your WordPress website.

10. FAQ

10.1 In which language are displayed the count down/up timers, months and weekdays?

By default, they are displayed in English. But if your website language is Albanian, Arabic, Belarusian, Bulgarian, Chinese, Czech, Danish, Dutch, French, German, Hebrew, Hungarian, Italian, Japanese, Persian, Polish, Portuguese, Romanian, Russian, Slovak, Spanish, Swedish or Turkish, then they will automatically be displayed in this language.

10.2 Why does my count down/up timer not refresh every second?

Javascript may be deactivated in your browser. In this case, activate it. Check the Add JavaScript code field in the options page of Easy Timer. Check the footer.php file of your WordPress theme. Make sure there is a call to wp_footer.

10.3 How can I use shortcodes in my WordPress theme?

Insert into the PHP files of your theme a code like this:

<?php echo do_shortcode('[your-shortcode]'); ?>

10.4 How can I use shortcodes in comments?

Edit the functions.php file (create it if it doesn't exist) of your WordPress theme and add this line of code:

add_filter('comment_text', 'do_shortcode');

10.5 How can I use shortcodes in attributes of shortcodes?

You can use shortcodes in most attributes of Easy Timer shortcodes, provided to replace [ by ( and ] by ), like this:

[your-shortcode attribute='(your-other-shortcode)']

Don't forget to include the quotes at the beginning and the end of the shortcode.

10.6 How can I nest several identical shortcodes?

When you nest several identical shortcodes, you must add an integer between 1 and 3 at the end of the tags of these shortcodes, like this:

[countdown...]...
[countdown1...]...
[countdown2...]...
[countdown3...]...
[/countdown3]...
[/countdown2]...
[/countdown1]...
[/countdown]

Translators

  • Aboelabbas (Arabic)
  • Ales J. (Czech)
  • Alexander Ovsov - WebHostingGeeks (Belarusian)
  • Chris K. (Hungarian)
  • Dave (Portuguese)
  • Dovis (Chinese)
  • Flemming (Danish)
  • Gunlukucretsiz (Turkish)
  • Johan (Swedish)
  • Kaloyan (Bulgarian)
  • Krzysztof (Polish)
  • Mihalcea (Romanian)
  • Omer (Hebrew)
  • Peter (Slovak)
  • Reza E. (Persian)
  • Sofokli (Albanian)
  • Tohru M. (Japanese)
  • Vladimir (Russian)