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:
"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."
- [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]
Parameters
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'] );
else
$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:
coolclock/coolclock/includes/class-coolclock.phpConclusion
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