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.
First download these two files and put them in your blog directory. I have mine in my blog root.
The latter is does the countdown magic.
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>
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!
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.
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);
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!
Feel free to email me about this at erikwordpressplugins -at- gmail. May your countdowns be merry!