How to use the CoolClock shortcode

Start with a default clock by pasting [coolclock /] into a Shortcode block or into a Classic block, or if you are using the Classic Editor, straight into the post/page content on a new line.

Please take care to always close the shortcode. This means either terminating with /] or when passing custom skin parameters (see below) with the longer [/coolclock].

Shortcode attributes

Default attributes

To modify the clock appearance, 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 added, there is also ‘minimal’ available.
  • radius — a number to define the clock radius. Do not add ‘px’ or any other measure descriptor.
  • noseconds — hide the second hand.
  • gmtoffset — a number to define a timezone relative the Greenwich Mean Time. Do not set this parameter to make the clock default to visitor local time.
  • showdigital — show the time in 12h digital format (with am/pm) inside the analog clock too.
  • fontcolor — set the font color of the digital time (use html color name or hex value).
  • scale — must be one of these: ‘linear’ (default), ‘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’.

Note: The attribute align makes the clock carry the corresponding class: ‘alignleft’, ‘alignright’ or ‘aligncenter’. This normally should take care of the alignment/floating with margins in correspondence with your theme’s style rules. But if not, try adding these basic rules to the Additional CSS field in your theme Customizer:

.alignleft {
    float: left;
    margin: 0.3rem 2rem 2rem 0;
.alignright {
    float: right;
    margin: 0.3rem 0 2rem 2rem;
.aligncenter {
    margin: 0.3rem auto 2rem auto;

Example shortcode: 

[coolclock skin="chunkyswiss" radius="140" showdigital noseconds align="left" /]

[PRO] Advanced attributes

Then there are extra parameters and options available in the CoolClock – Advanced extension which allow for more customization:

  • showdigital – multiple values:
    • digital12 (default) shows 12h clock (format: hh:mm am/pm)
    • digital12+ [new since v7.2] shows 12h clock with seconds (format: hh:mm:ss am/pm).
    • digital24 shows 24h clock (format: hh:mm).
    • digital24+ [new since v7.2] shows 24h clock with seconds (format: hh:mm:ss).
    • date shows date (format: depends on visitor browser locale settings).
    • text [new since v7.2] shows custom text, set in the text attribute (below).
  • text – set a custom text to show instead of digital time, must be used in combination with showdigital=”text”.
  • font[new since v7.2] set the font style of the digital time, default “15px monospace”. Example: font=”small-caps bold 16px serif”. Read more on
  • 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: “center” since v7.2.1).
  • background_repeat – background repetition options “repeat”, “repeat-x”, “repeat-y”, “no-repeat” (default: “no-repeat” since v7.2.1).
  • background_border_radius – optional rounded corners value, higher is rounder.


[coolclock skin="minimal" showdigital="date" font="bold 16px monospace"fontcolor="red" radius="64" align="left" background_image="" /]

Custom skin

When you wish to give the clock a custom skin, wrap the skin parameters in an opening and closing shortcode.

[coolclock skin="unique_skin_name"]{"skin_object":{"skin_parameter":"value"}}[/coolclock]

Examples can be found on Creating a Custom Skin.

How helpful was this page?

Do you have any feedback or suggestions to improve this page?