WordPress Countdown Widget

April 08, 2007 By: erik Category: Wordpress 14,410 views

Rate this post:
1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 5.00 out of 5)
Loading ... Loading ...

Several people have found my blog lately searching for a countdown widget for WordPress. I briefly considered writing one with a nice back-end interface for entering the date, etc., but in the end, I think it’s going to take less time and be more flexible if I just explain how I have mine done.

1) Download

First download these two files and put them in your blog directory. I have mine in my blog root.

prototype.js

duration.js

The latter is does the countdown magic.

2) Include

Now include them in your header.php:

<script type="text/javascript" src="/blog/prototype.js">
// tag has to be open because of stupid IE
</script>
<script type="text/javascript" src="/blog/duration.js">
// tag has to be open because of stupid IE
</script>

3) Create Text Widget

Then, create a text widget and fill it with the proper code. Mine looks like this:

<div class="countdown">
  <span id="weddingCountdown">
    enable javascript to see the countdown
  </span>
  until the wedding
</div>
<script type="text/javascript">
  Duration.countdown("weddingCountdown",
                     Date.UTC(2007, 9, 13, 11, 30, 00));
</script>

The important thing here is that the id on the destination span and the id passed to the countdown function (both shown in red) have to match. And if you have more than one countdown on your page at the same time, the id for each one has to be unique.

The content of the span will be replaced with the countdown. That’s why it has a message informing people without javascript that they won’t see it until they enable javascript.

You can put any text you want before and after the countdown span. For example:

There are only
<span id="graduationCountdown">
    enable javascript to see the countdown
</span>
until graduation!

4) Setting the Date

Now for the hard part: the javascript UTC date. You have to figure out the date of your event in Coordinated Universal Time. It’s basically Greenwich Mean Time without Daylight Savings Time. So if your event was at 9:30 AM today (April 8, 2007), in New York City, then we would remove the effect of daylight savings time, giving us 8:30, and then add five hours (the difference between EST and GMT), giving us 13:30. So if your event was at 9:30 this morning, you would put the time parameters as 13:30. Make sense? Here is a conversion table that might help.

The other important thing to remember is that the javascript Date.UTC() function requires that the month be zero-indexed, so January is 0, February is 1, … December is 11.

So if you wanted to set a countdown to 9:00 AM Christmas morning, 2007, in Los Angeles your date parameters would be:

Date.UTC(2007, 11, 25, 17, 00, 00)

The parameters are year, month (zero indexed!), day, hour, minute, and second, respectively.

5) Choosing a display method

You may optionally choose an abbreviated display. For example:

Normal: 3 days, 4 hours, 10 minutes, 45 seconds
Abbreviated: 3d, 04:10:45

To use abbreviated mode, pass a “true” to the Duration.countdown() function, like so:

Duration.countdown("myCountdown",
                   Date.UTC(2007, 9, 13, 11, 30, 00), true);

6) Internationalization

Changing the language is simple. Simply change the first few lines of duration.js. So for Spanish, it would be:

units:
{
  day: 'día',
  days: 'días',
  d: 'd',
  hour: 'hora',
  hours: 'horas',
  minute: 'minuto',
  minutes: 'minutos',
  second: 'segundo',
  seconds: 'segundos'
},

And that’s all there is to it!

Questions or Comments

Feel free to email me about this at erikwordpressplugins -at- gmail. May your countdowns be merry!

 
  • http://urlredacted Max

    Very useful information. Thanks!!

    • Anonymous

      Hi, Every One

      How r u? How do u do? How is your job. recently New Launching website. that site is http://blogger-tips-tricks4u.blogspot.com How to Make tricks Online thru This website. You can blogger tips all type of tricks online in this website. plz visit.

      Thank&Regards
      Babu Veera.
       

       

  • http://wsblog.net wonsore

    it works bad in my blog (2.6.1)
    page is deformed….
    i don’t know why..

  • http://www.beachdog.com beachdog

    I’m in 2.6.1 also and it’s acting like it has an open tag, but I sure can’t find one. It really does a number on the layout.

  • http://www.scrawnynomore.com/blog Matt “Hardgainer” Rose

    Were the problems fixed with this yet?

  • http://urlredacted Health Product Reports

    I just installed it – works fine for me – Thanks!

  • http://www.top-dogs-names.com/ Andy

    Also just installed -works like a dream–Thanks–Andy

  • http://hustlercash.com/hit/17/1/427479/0/0/1 Hustler VOD

    Yep! installed and working excellent. thank you very much

  • http://urlredacted The Hotel Box

    Installed! huge thanks it’s excellent!

  • http://bestskincream.net Catherine

    Erik,
    I just found your blog and thanks for the countdown widget. Just what I was looking for.

  • http://www.techyshell.com Naveed

    working fine on my blog with WP 2.8. thanks much.

  • http://www.techyshell.com Naveed

    Why my comment is not being accepted, this is lame, even though I am posting a real comment, its working fine in 2.8 but not good in 2.6.1.

    • http://www.erik-rasmussen.com/ Erik R.

      Sorry about that. These plugin posts get tons of comments that are very generic like yours. Many of them are bots.

  • cv tips

    gonna try this plugin and tweet, thank you.

  • http://zebar.de Bara

    @@ -57,6 +57,7 @@ Duration.prototype =
    if (minutes < 10)
    buffer.push('0');
    buffer.push(minutes);
    + buffer.push(':');
    if (seconds < 10)
    buffer.push('0');
    buffer.push(seconds);

  • Mohar Basu

    I have tried it on my blog and it works very well. Thank you so much. This is a great thing.

  • Mohar Basu

    I have tried it on my blog and it works very well. Thank you so much. This is a great thing.

  • MKS

    Just installed and it seems to be working awesome. Thanks for the help.

    MKS | Diet
    pills that work fast

  • Anonymous

    [email protected]

    Online Printing Supplier for Cheap Flyers, Brochure, Letterhead and
    Leaflet Printing

     

    Welcome
    to Creative Printer. Creative Printer is the UK’s Largest online printer. Creative
    Printer has been the leading online suppliers of cheap flyers, brochure, letterhead
    and cheap leaflet printing
    for the last 19 years in the UK and Europe. Creative Printer is the cheapest
    online printing shop for the highest quality products.  We stock
    everything from cheap brochures, business cards
    and folded leaflets
    to cheap A5 flyer printing, letterhead
    and digital display stands.
    Our Services also include NCR book printing
    and Presentation folders printing.

    Order
    online and we’ll deliver your order in unbranded neutral packaging anywhere in
    the UK and selected countries in Europe. Delivery and packaging is included in
    the order package price.

  • sarong manufacturer

     “Hello Sir good article i really love it i have reading this article is awesome so good work keep working.sarong manufacturer

  • http://weblopedi.net/ Gencstyle

    Thank you for this share! Webmaster

  • Chinna Reddy

    This is really
    interesting; you’re a very skilled blogger. I have joined your feed and stay up
    for in the hunt for extra of your fantastic post. Also, I have shared your
    website in my social networks

    cheapest International Air Tickets

  • chris10martin

    pallet racking

    I have always cherished internet as it is such a great source of knowledge and this very post just prove me right. Cheers and hip hip to internet technology.

  • Boiler Replacement

    Really its great article. Keep it up
    Boiler Replacement

  • Deportment classes

    Thanks for the effort, keep up the good work Great work, I am going to
    start a small Blog Engine course work using your site I hope you enjoy blogging
    with the popular Blog Engine.net. The thoughts you express are really awesome.
    Hope you will right some more posts.
    Deportmentclasses

  • South Coast Tours Jamaica

    Take adventure with Gabby who has
    been showing the South Coast to visitors for over 30 years in Jamaica.

    http://www.jamaicanroutes.com/south-coast-tours-jamaica/

  • Danish Smith

    Thanks for coding ……. i’ll try it .. !!

    http://www.maxlapelpins.com/