CoolClock – a Javascript Analog Clock for WordPress

CoolClock – a Javascript Analog Clock

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

Description

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.

Features

  • Can be added via a widget, shortcode or theme function
  • No flash, meaning compatible with tablets 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 the CoolClock homepage 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.

Translators

  • Dutch * R.A. van Hagen https://status301.net/ (version 3.0)
  • French * R.A. van Hagen https://status301.net/ (version 3.0)
  • German * Manfred Mrak http://www.niftyfox.ch/ (version 3.2)
  • Serbian * Borisa Djuraskovic – WebHostingHub http://www.webhostinghub.com/ (version 2.9.4)
  • Slovenian * Adijan Dervišević – http://www.adijan.eu (version 3.2)
  • Russian * Наталия Завьялова – http://time-impressions.ru (version 2.9.8)

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

Privacy / GDPR

This plugin does not collect any user or visitor data nor set browser cookies. Using this plugin should not impact your site privacy policy in any way.

Installation

Quick installation: Install now !

… OR …

Search for “coolclock” and install with that slick Plugins > Add New back-end page.

… OR …

Follow these steps:

  1. Download archive.
  2. Upload the zip file via the Plugins > Add New > Upload page … OR … unpack and upload the complete directory with your favourite FTP client to the /plugins/ folder.
  3. Activate the plugin on the Plug-ins page.

Now visit your Widgets admin page and add the Analog Clock widget to your sidebar. 🙂

Frequently Asked Questions

There is no options page. Where do I start?

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 shortcodes 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, when the Advanced extension is added, one Minimal skin that only shows the clock arms, that can be useful for placing over a custom background image.

There are these options:

  • Custom skin parameters – see question below;
  • Radius – changes the clock size;
  • Hide second hand;
  • Show digital time (more options in the Advanced version);
  • Set digital time color;
  • 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?

Follow the steps on Creating a Custom Skin and if you are happy with the result, please consider sharing it with other users!

Can I share this fantastic custom skin I created?

If you made a nice skin and would like to share it, you can do so in the comments on Creating a Custom Skin or add it to your Plugin Review.

Thanks for sharing! 🙂

Can I insert a clock in posts or pages?

Yes, there the shortcode

available. You can find all parameters on How to use the CoolClock shortcode.

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

Known Issues

  1. When IE 8 is manually put or forced (through X-UA-Compatibility meta tag or response header) into Compatibility mode, the Clock will –even though the canvas area is put in place– remain invisible.
  2. When a shortcode is not placed on its own line but on the same line with text, image or even another shortcode, then the output (div with canvas tag) will be wrapped inside a paragraph tag. While most browsers do not have a problem displaying the clock, this will cause a validation error.

Please report any other issues on the Support page.

CoolClock – a Javascript Analog Clock

27 Comments

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?

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

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

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 http://thetimenow.com/gmt/greenwich_mean_time where it says on each city page the UTC/GMT offset plus if there is daylight savings to take into account.

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.

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?

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 ?

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.

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.

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 🙂

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.

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 🙁

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…

Hi,

Nice plugin.

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

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 🙂

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.

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

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 http://www.html5canvastutorials.com/tutorials/html5-canvas-text-color/ 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 🙂

Hi, there is known a bug in the widget. When you try a GMT offset of 0, the zero is interpreted as an empty value and subsequently GMT offset is ignored. The clock will default to the visitor local time. This bug will be addressed in the next release…

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: