Plugin Directory

Test out the new Plugin Directory and let us know what you think.

CoolClock - a Javascript Analog Clock

Show an analog clock on your WordPress site sidebar or in post and page content.

Where do I start?

There is no options page. Just go to your Appearance > Widgets admin page and find the new Analog Clock widget. Add it to your sidebar and change settings if you want to see another than the default clock.

Other ways to integrate a clock into your site are ahortcodes or a theme function. See instructions below.

What options does the widget have?

First of all, you can pick a preset skin. There are 21 skins made by other users and one Minimal skin that only shows the clock arms, that can be useful for placing over a custom background image. Then there are:

  • Custom skin parameters - see question below;
  • Radius - changes the clock size;
  • Hide second hand;
  • Show digital time or date;
  • GMT Offset - use this if you want one or more clocks to show the time for other timezones;
  • Scale - linear is our standard clock scale, the other two show a logarithmic time scale;
  • Align - left, center or right;
  • Subtext - optional text, centered below the clock.

Then there are extra options availabe in the CoolClock - Advanced extension which allow for more customisation:

  • Background image - define the full URL or path to an image to serve as background;
  • Repeat image;
  • Background size - stretch or cover to make it match your clock size;
  • Background position - center, top, right, bottom or left of the wrapping div (define div size below);
  • Width and height - define the size of the wrapping div that holds the background image;
  • Background color - define a color value in hex or rgb(a) format, or a css color name;
  • Border radius - optional rounded corners, higher is rounder;
  • Clock position relative to background - here you can position the clock relative to top and left border of the wrapping div (as defined above) that holds the background image.
  • Custom skin parameters for shortcode

How can I create a custom skin?

Go to you the Analog Clock widget, select Skin: Custom and copy the following code (all of it, not just the modified parts!) into the field Custom skin parameters.

outerBorder: { lineWidth: 1, radius:95, color: 'black', alpha: 1 },
smallIndicator: { lineWidth: 2, startAt: 89, endAt: 93, color: 'black', alpha: 1 },
largeIndicator: { lineWidth: 4, startAt: 80, endAt: 93, color: 'black', alpha: 1 },
hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: 'black', alpha: 1 },
minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: 'black', alpha: 1 },
secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: 'red', alpha: 1 },
secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: 'red', color: 'red', alpha: 1 }

These parameters are the ones from the swissRail skin.

Now go and change some parameter values like color (you can use any web color name or hex color code), lineWidth or start/endAt points. The numbers refer to a percentage of the radius, so startAt: 0, endAt: 50 means a line from the center to 50% of the way to the edge. Alpha means the transparency of the element where alpha: 1 means solid. For example alpha: 0.5 means 50% transparent.

Then save the widget and reload your website front page (or wherever the clock is visible) to see the result of your work.

See more preset skin examples in moreskins.js if you like to start with another skin. Have fun tweaking and please do not hesitate sharing your custom skin (see below) !

Can I share this fantastic custom skin I created?

If you made a nice skin and would like to share it, then send it to the script creator at simon dot baird at gmail dot com or paste the custom parameters into a Review.

Thanks for sharing! :)

Can I insert a clock in posts or pages?

Yes, there is a shortcode available. Start with a default clock by pasting [coolclock /] into a post.

The following parameters are available:

  • skin -- must be one of these: 'swissRail' (default skin), 'chunkySwiss', 'chunkySwissOnBlack', 'fancy', 'machine', 'simonbaird_com', 'classic', 'modern', 'simple', 'securephp', 'Tes2', 'Lev', 'Sand', 'Sun', 'Tor', 'Cold', 'Babosa', 'Tumb', 'Stone', 'Disc', 'watermelon' or 'mister'. If the Advanced extension is activated, there is also 'minimal' available. Please note that these names are case sensitive.
  • radius -- a number to define the clock radius. Do not add 'px' or any other measure descriptor.
  • noseconds -- set to true (or 1) to hide the second hand
  • gmtoffset -- a number to define a timezone relative the Greenwhich Mean Time. Do not set this parameter to default to local time.
  • showdigital -- set to 'digital12' to show the time in 12h digital format (with am/pm) too
  • scale -- must be one of these: 'linear' (default scale), 'logClock' or 'logClockRev'. Linear is our normal clock scale, the other two show a logarithmic time scale
  • subtext -- optional text, centered below the clock
  • align -- sets floating of the clock: 'left', 'right' or 'center'

Example: [coolclock skin="chunkySwissOnBlack" radius="140" showdigital=digital12 align="left" /]

Then there are extra parameters and options availabe in the CoolClock - Advanced extension which allow for more customisation:

  • showdigital - extended with ‘digital24′ and ‘date’ options
  • background_image - define full URL or path to an image to serve as background
  • background_height - give a height in pixels (default: clock plus subtext height)
  • background_width - give a width in pixels (default: clock width)
  • background_color - define a CSS color value in hex, rgb(a) format, or color name
  • background_stretch - CSS backround size options "cover" or "contain"
  • background_position - CSS positioning like "left top", "bottom", "10% 70%" or "10px 20px" (default: "left top")
  • background_repeat - background repetition options "repeat", "repeat-x", "repeat-y", "no-repeat" (default: "no-repeat")
  • background_border_radius - optional rounded corners value, higher is rounder

Example: [coolclock skin="minimal" radius="63" align="left" background_image="http://i35.tinypic.com/990wtx.png" /]

Custom skins can also be used in shortcode with the Advanced extension. See more on

I'm building my own theme. Is there a theme function available?

Yes, you can use a built-in WordPress function that parses a shortcode. To place the same clock as in the shortcode example above, anywhere in your theme, use this:

<?php echo do_shortcode('[ coolclock skin="chunkySwiss" radius="140" showdigital=true align="left" ]'); ?>

Requires: 3.2 or higher
Compatible up to: 4.7.1
Last Updated: 4 months ago
Active Installs: 5,000+


5 out of 5 stars


Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.

100,1,1 0,1,0 100,2,2 100,1,1 100,2,2
100,1,1 100,1,1
100,1,1 100,1,1 100,1,1