CoolClock – a Javascript Analog Clock Shortcode

Below, you’ll find a detailed guide on how to add the CoolClock – a Javascript Analog Clock Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the CoolClock – a Javascript Analog Clock Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the CoolClock – a Javascript Analog Clock Plugin and the shortcodes it provides:

Plugin Icon
CoolClock – a Javascript Analog Clock

"CoolClock – a Javascript Analog Clock is a WordPress plugin designed to add a functional and stylish analog clock on your website. It's an innovative way to engage visitors with time tracking."

★★★★☆ (14) Active Installs: 3000+ Tested with: 6.3.2 PHP Version: 5.6
Included Shortcodes:
  • [coolclock]

CoolClock – a Javascript Analog Clock [coolclock] Shortcode

The CoolClock shortcode is a customizable clock feature for your WordPress site. It allows users to select from various clock skins, control the radius, hide the second hand, adjust timezone, and display digital time. The shortcode also includes options to change the digital time color, select the clock scale, add a subtext, and set the clock’s alignment. The handle_shortcode function ensures all inputs are sanitized and correctly formatted, delivering a safe, user-friendly experience.

Shortcode: [coolclock]


Here is a list of all possible coolclock shortcode parameters and attributes:

  • skin – Defines the visual style of the clock.
  • radius – Determines the clock’s size.
  • noseconds – Hides the second hand when set to true.
  • gmtoffset – Sets the clock’s timezone relative to GMT.
  • showdigital – Displays time in digital format when set to true.
  • fontcolor – Changes the color of the digital time display.
  • scale – Defines the clock’s time scale, linear or logarithmic.
  • subtext – Adds optional text below the clock.
  • align – Sets the clock’s alignment to left, right, or center.

Examples and Usage

Basic example – Displaying a simple clock with the default settings.

[coolclock /]

Advanced examples

Displaying a clock with a specific skin, radius, and hiding the second hand.

[coolclock skin="chunkySwiss" radius="150" noseconds="true" /]

Displaying a clock with a specific timezone offset, showing digital time in 12-hour format, and changing the digital time color.

[coolclock gmtoffset="3" showdigital="digital12" fontcolor="#ff0000" /]

Displaying a clock with a logarithmic time scale, a specific text below the clock, and aligning the clock to the right.

[coolclock scale="logClock" subtext="My Cool Clock" align="right" /]

Displaying a clock with a specific skin, hiding the second hand, showing the digital time, and changing the font color. The clock will also display a specific text below it and will be aligned to the right.

[coolclock skin="fancy" noseconds="true" showdigital="true" fontcolor="#0000ff" subtext="Fancy Clock" align="right" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [coolclock] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'coolclock', array( 'CoolClock_Shortcode', 'handle_shortcode' ) );

Shortcode PHP function:

function handle_shortcode( $atts, $content = null )
		* 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.
		* radius		A number to define the clock radius. Do not add 'px' or any other measure descriptor.
		* noseconds		Set to 'true' or 1 or without value 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 'true' or 1 or 'digital12' or without value to show the time in 12h digital format (with am/pm) too
		* fontcolor		Set to a color value to change the digital time color, digitalcolor for backward compatibility
		* 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'

		if ( is_feed() )
			return '';

		// set empty parameter noseconds to default
		if ( ! empty( $atts ) && in_array( 'noseconds', $atts, true ) && ! array_key_exists( 'noseconds', $atts ) ) {
			$atts['noseconds'] = true;
		// set empty parameter showdigital to default
		if ( ! empty( $atts ) && in_array( 'showdigital', $atts, true ) && ! array_key_exists( 'showdigital', $atts ) ) {
			$atts['showdigital'] = 'digital12';

		// filter shortcode attributes
		$defaults = array_merge( CoolClock::$defaults, CoolClock::$advanced_defaults );
		$atts = shortcode_atts( $defaults, $atts, 'coolclock' );

		// sanitize user input
		if ( $content )
			$content = wp_strip_all_tags( $content );

		// backward compat fontcolor
		if ( !empty( $atts['digitalcolor'] ) && empty($atts['fontcolor']) ) {
			$atts['fontcolor'] = $atts['digitalcolor'];

		// pre-treat possible empty attributes
		if ( is_int( array_search( 'noseconds', $atts ) ) )
			$atts['noseconds'] = true;
		if ( is_int( array_search( 'showdigital', $atts ) ) )
			$atts['showdigital'] = 'digital12';

		// parse skin
		$atts['skin'] = CoolClock::parse_skin( $atts['skin'], $content );

		// radius, used in wrapper style and coolclock fields
		$atts['radius'] = !empty( $atts['radius'] ) && is_numeric($atts['radius']) ? (int) $atts['radius'] : $defaults['radius'];
		if ( 10 > $atts['radius'] ) $atts['radius'] = 10; // absolute minimum size 20x20

		// clean gmtoffset
		if ( !empty( $atts['gmtoffset'] ) ) {
			$atts['gmtoffset'] = str_replace( ',', '.', $atts['gmtoffset'] );
			$atts['gmtoffset'] = str_replace( array('1/2','½'), '.5', $atts['gmtoffset'] );
			$atts['gmtoffset'] = str_replace( array('h',' '), '', $atts['gmtoffset'] );
			$atts['gmtoffset'] = is_numeric( $atts['gmtoffset'] ) ? (float) trim( $atts['gmtoffset'] ) : '';

		if ( !empty( $atts['scale'] ) )
			$atts['scale'] = wp_strip_all_tags( $atts['scale'] );

		// post-treat showdigital
		if ( in_array( $atts['showdigital'], array('true','1') ) )
			$atts['showdigital'] = true;
		elseif ( !in_array( $atts['showdigital'], array('false','0') ) )
			$atts['showdigital'] = wp_strip_all_tags( $atts['showdigital'] );
			$atts['showdigital'] = '';

		// post-treat noseconds
		if ( 'false' === $atts['noseconds'] )
			$atts['noseconds'] = false;

		if ( !empty( $atts['fontcolor'] ) )
			$atts['fontcolor'] = CoolClock::colorval( $atts['fontcolor'] );

		if ( !empty( $atts['font'] ) )
			$atts['font'] = wp_strip_all_tags( $atts['font'] );

		if ( !empty( $atts['subtext'] ) )
			$atts['subtext'] = wp_kses( $atts['subtext'], CoolClock::$allowed_tags );

		$align = !empty( $atts['align'] ) ? wp_strip_all_tags( $atts['align'] ) : $defaults['align'];
		$class = in_array( $align, array('left','right','center') ) ? ' align' . $align : '';

		// inline container style
		$styles = array(
			'width' => 2 * $atts['radius'] . 'px',
			'height' => 'auto' // leave height:auto at the end for old pro filter to find and replace
		$styles = apply_filters( 'coolclock_container_styles', $styles, $atts, $defaults );

		// set footer script flags
		CoolClock::$add_script = true;

		// Build output
		// begin wrapper
		$output = '<div class="coolclock-container ' . $class . '"' . CoolClock::inline_style( $styles ) . '>'; // should end with height:auto"> for old pro plugin to find and replace
		// add canvas
		$output .= CoolClock::canvas( $atts );
		// end wrapper
		$output .= '</div>';

		// Return filtered output
		return apply_filters( 'coolclock_shortcode', $output, $atts, $content );

Code file location:



Now that you’ve learned how to embed the CoolClock – a Javascript Analog Clock Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.


Leave a Reply

Your email address will not be published. Required fields are marked *