CoolClock – a Javascript Analog Clock

CoolClock – a Javascript Analog Clock

Install now

Download Version 3.3

Requires WordPress: 3.2 or higher
Compatible up to: 4.6.1
Downloads: 33288

Rating: 5 out of 5 stars
# Votes: 9

This plugin integrates CoolClock – The Javascript Analog Clock into your WordPress site. You can add it as a widget to your sidebar or insert it into your posts and pages with a shortcode. See the FAQ’s for available shortcode parameters and how to build the clock into your theme.


  • Can be added via a widget, shortcode or theme function
  • No flash, meaning compatible with pads and most other javascript enabled mobile devices
  • 22 different skins to choose from or
  • Custom skin option to create your own skin style
  • Linear or logarithmic time scale

Read more on or see the FAQ’s to learn how to configure your own skin settings.

Pro features

  • Show date or 24h digital time
  • Background image or color
  • Border radius (rounded corners for background))
  • Advanced positioning options (relative to background)
  • Advanced shortcode parameters (including background image and custom skin)
  • One extra clean skin for use with background image
  • Support on the CoolClock Pro forum

Pro features come with the CoolClock – Advanced extension.


Please contact me to submit your translation and get mentioned here 🙂

Commercial message:


  1. coolclock screenshot 1

    Example analog clock in sidebar. The background logo is added with the CoolClock – Advanced extension.

  2. coolclock screenshot 2

    Widget settings. The background options are availabe in the CoolClock – Advanced extension.

Frequently Asked Questions

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
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’


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


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" ]'); ?>


Latest version: Download CoolClock – a Javascript Analog Clock 3.3 [zip]
Downloaded 33288 times.

Rated 5 out of 5 stars with a total of 9 votes on »

27 thoughts on “CoolClock – a Javascript Analog Clock

  1. Pingback: CoolClock for WordPress |

  2. Pingback: CoolClock voor WordPress |

  3. Pingback: CoolClock pour WordPress |

  4. Matt

    I can’t seem to get this to work when I paste the php code into my header in WordPress v3.5.1. May be a bug you’re not aware of?

    1. RavanH Post author

      Hi Matt, could you elaborate? What code are you using exactly, in which file and do you have a link to your site?

  5. delazi

    Hi, RavanH. Could you elaborate, how to set gmtoffset parameter. One example with that code would be nice. I want to show several clocks at one page, for example – Berlin, London, Moscow

    1. RavanH Post author

      Hi delazi, if you want three clocks on one page side by side, you can insert these shortcodes (be sure to put each one on a new line) :

      [coolclock align="left" gmtoffset="2" subtext="Berlin"]

      [coolclock align="left" gmtoffset="1" subtext="London"]

      [coolclock align="left" gmtoffset="4" subtext="Moscow"]

      But be aware that the London and Berlin times are offsets of GMT plus 1 hour extra for daylight savings. This hour needs to be manually retracted again coming winter time. For current GMT offset times across the world, start on where it says on each city page the UTC/GMT offset plus if there is daylight savings to take into account.

  6. delazi

    Thank you, RavanH for your answer. Is it possible to display 24h clock instead of 12h AM/PM version ? If not, it would be nice to add this function in next plugin update.

    1. RavanH Post author

      Hi Greg,

      There is no such option as margins in this plugins widget but there is an option to set a (background) width and height and then an offset (top/left) to position the clock against that background… You could use this to form a sort of margin.

      Or is that not what you are looking for? If not, could you elaborate?Which plugin versions (both CoolClock and the CoolClock Pro extension) are you using? And what exactly do you want to achieve?

  7. Matilde

    Hi, could you elaborate, where does the clock plugin take its data from ? When I change time on my desktop it automatically changes the time displayed on my home page.
    Does it take data from my own computer ? If yes, can that be changed somehow ?

    1. RavanH Post author

      Hi Matilde, the script does indeed take the time from the visitors computer. If you want to ‘fix’ the time to a certain timezone, use the GMT Offset field. Please be aware that this will need manual adjustement for summer/winter time.

  8. Jase

    Hi, RavanH
    Is it somehow possible to adjust time to real, exact time from any other source ? That would be great, because than visitors would be able to check real time.

    1. RavanH Post author

      Not in the current version, sorry. The Coolclock script is a client side gadget and takes client side time to work with… But the idea is appealing and a sort of work-around — embedding server time in web page source and work with that somehow — might (theoretically) be possible. I’ll consider it for a future Pro extension 🙂

  9. edgar

    Hi, ravanh, cool plugin, but unfortunatelly it sometimes shows crazy time. When I viewed one of my sites on iphone it showed 27:19:56. Is it a bug ? I thought the time is synchronised with Greenwitch or somewhere else, but it clearly isn’t.

    1. RavanH

      Hi edgar, the script uses the visitors device time. It can calibrate for GMT but it does not query any external time server. That would be too complicated… Apparently it cannot access the iphones time 🙁

  10. Edgar

    I would be ready to pay – say 30$ or buy the pro version if the clock would show real external time. @phareo, @ravanH – can you guys code that ?

    1. RavanH Post author

      Hi Edgar, we could but do not have time at the moment. You might want look for another clock solution, preferably one that is based on PHP (which usually takes server time) instead of javascript…

  11. Jake


    Nice plugin.

    If I purchase the CoolClock Pro extension will I get the capability to use a custom skin in a shortcode?

    1. RavanH Post author

      Hi Jake, yes with the new CoolClock Advanced 5.0 in combination with the latest CoolClock 2.9.7 it is possible to define custom skins for shortcodes. Please see the updated example #3 on this page 🙂

    1. RavanH Post author

      Hi Ben, no the clocks are drawn with canvas. Numbers is not the most self evident thing to draw… The Advanced version allowes you to set a backgound image. You could create your own clock face image with numbers to use as background.

  12. Yuri Gracida

    Is there a way to change digital text color and font family, font size ?, maybe by changing css, js or php itself ?

    1. RavanH Post author

      Hi Yuri, that would need a script modification. Inside the script there is defaultFont: "15px sans-serif" which you can change to your preferred font, but the color is a bit more difficult. An example on shows the font parameter in action (this corresponds with the defaultFont parameter in the plugin script) and you can also see a parameter fillStyle which controls the color. This last parameter has no equivalent in the coolclock script yet.

      I’ll consider this as a feature request 🙂


Leave a Reply