Date: August 22, 2010 at 4:02 am |  Topics:  |  Permalink

The jQuery Countdown Clock Widget is a simple widget that uses the jQuery countdown library to generate an event countdown, and integrates completely with WordPress and is visually customizable using CSS.

It is available as a download in the WordPress plugin repository, and is also installable through the dashboard of your WordPress enabled site. Furthermore, we do offer the version 0.1 beta as a download here as well.

Click here to download.

Features

  1. Just drag the widget to the sidebar / widgeted area of your choice. All the configuration options are included in the widget, no need to visit a separate configuration page!
  2. Use your style.css sheet to customize the look of your countdown via CSS. From the font color, text size… even the background.
  3. Make your countdown linkable to the page or site that you choose!
  4. Set the time and date using easy drop downs!
  5. Choose how you want the countdown to be formatted. Do you want to see it countdown broken down in years, weeks, months, days, hours, minutes and seconds? Pick and choose how what parts you want to see. You can even hide the years, weeks, and days when they zero out! Or vice-versa!
  6. Timezone is synced to your WordPress install’s timezone configuration, so no need to mess with that setting unless you want to.
  7. Includes the needed jQuery libraries, so you don’t need to install anything else.

Installation

Installation is a breeze.

  1. Download the zip file and decompress.
  2. Upload the folder “jquery-countdown-widget” to your “/wp-content/plugins” directory.
  3. Go to your Dashboard > Plugins page and activate the jQuery Countdown Clock Widget.
  4. Once activated, go to your Appearance > Widgets page and drag the jQuery Countdown Clock Widget to the sidebar / widgeted area of your choice.
  5. Configure the plugin as you desire.

Configuration

You will need to add the following CSS code to your style.css page. To do that, you need to go to your Appearances > Editor and click on “style.css” (or your default style sheet, typically ending in .css).

Let’s say you named your sidebar widget “Countdown Product Launch.” That name is converted into “countdown-product-launch” and will be seen as the id for the <div> pair that encases your countdown.

<div id=”countdown-product-launch”>
[code would be here, encased in the DIVs]
</div>
This being the case, you can now define the following your CSS file:

#countdown-product-launch { color: #fff; font-size: 12pt; }

Adding that line would define your first countdown box as having white text (#fff) that is 12pt in size.

Further, you can customize it as much as your CSS abilities and knowledge permit. Good hunting!

Known Issues

The only known issue at present is the fact that you can only create one instance of the countdown widget.

Technical Support

Any technical support requests should be sent via our contact form. Please give us 24 to 48 hours to respond.

Do note that if FrakMedia! has to customize this plugin for use on your website, we do charge a fee starting at $40 USD. Half the payment is required up front before work will begin, and will be sent to you as a PayPal invoice.