Countdown Timer Ultimate Shortcode

Below, you’ll find a detailed guide on how to add the Countdown Timer Ultimate 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 Countdown Timer Ultimate Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Countdown Timer Ultimate Plugin and the shortcodes it provides:

Plugin Icon
Countdown Timer Ultimate

"Countdown Timer Ultimate is a dynamic WordPress plugin. Its function is to create and manage beautiful countdown timers with ease, perfect for limited-time offers or event countdowns."

★★★★✩ (35) Active Installs: 20000+ Tested with: 6.3.2 PHP Version: false
Included Shortcodes:
  • [wpcdt-countdown]

Countdown Timer Ultimate [wpcdt-countdown] Shortcode

The Countdown Timer Ultimate shortcode is a versatile tool that provides a customizable countdown timer on your WordPress site. It allows you to set the timer’s expiry date and time, display text for days, hours, minutes, seconds, and style the timer to match your site’s aesthetics. It also supports compatibility with Divi Frontend Builder and Fusion Builder Live Editor.

Shortcode: [wpcdt-countdown]

Parameters

Here is a list of all possible wpcdt-countdown shortcode parameters and attributes:

  • id – Unique identifier for the countdown timer

Examples and Usage

Basic example – Displaying a countdown timer using its ID

[wpcdt-countdown id=1 /]

Advanced examples

Display a countdown timer using its ID, and customize the text for days, hours, minutes, and seconds. The timer will first try to load by ID, and if not found, it will use the default text.

[wpcdt-countdown id=1 timer_day_text="Days" timer_hour_text="Hours" timer_minute_text="Minutes" timer_second_text="Seconds" /]

Display a countdown timer using its ID, and customize the text for days, hours, minutes, and seconds. Also, specify whether to display each time unit. The timer will first try to load by ID, and if not found, it will use the default settings.

[wpcdt-countdown id=1 timer_day_text="Days" timer_hour_text="Hours" timer_minute_text="Minutes" timer_second_text="Seconds" is_timerdays="0" is_timerhours="1" is_timerminutes="1" is_timerseconds="1" /]

PHP Function Code

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

Shortcode line:

add_shortcode( 'wpcdt-countdown', 'wpcdt_countdown_timer' );

Shortcode PHP function:

function wpcdt_countdown_timer( $atts, $content = null ) {

	// Divi Frontend Builder - Do not Display Preview
	if( function_exists( 'et_core_is_fb_enabled' ) && isset( $_POST['is_fb_preview'] ) && isset( $_POST['shortcode'] ) ) {
		return '<div class="wpcdt-builder-shrt-prev">
					<div class="wpcdt-builder-shrt-title"><span>'.esc_html__('Countdown Timer - Shortcode', 'countdown-timer-ultimate').'</span></div>
					wpcdt-countdown
				</div>';
	}

	// Fusion Builder Live Editor - Do not Display Preview
	if( class_exists( 'FusionBuilder' ) && (( isset( $_GET['builder'] ) && $_GET['builder'] == 'true' ) || ( isset( $_POST['action'] ) && $_POST['action'] == 'get_shortcode_render' )) ) {
		return '<div class="wpcdt-builder-shrt-prev">
					<div class="wpcdt-builder-shrt-title"><span>'.esc_html__('Countdown Timer - Shortcode', 'countdown-timer-ultimate').'</span></div>
					wpcdt-countdown
				</div>';
	}

	// Taking some globals
	global $post;

	$atts = shortcode_atts( array(
		'id' => '',
	), $atts, 'wpcdt-countdown');

	$atts['unique']		= wpcdt_get_unique();
	$atts['timer_id']	= ! empty( $atts['id'] ) ? $atts['id'] : 0;

	extract( $atts );

	// If timer is not there, recursive loop or no query post found
	if ( empty( $timer_id ) ) {
		return $content;
	}

	// Taking variables
	$prefix			= WPCDT_META_PREFIX;
	$timer_date		= get_post_meta( $timer_id, $prefix.'timer_date', true );
	$current_time	= current_time( 'timestamp' );

	// If timer `Expiry Date & Time` is not there
	if( empty( $timer_date ) ) {
		return $content;
	}

	// Getting General Settings
	$timer_date	= strtotime( $timer_date );

	// Taking data in atts variable
	$content_data	= get_post_meta( $timer_id, $prefix.'content', true );
	$day_text		= ! empty( $content_data['timer_day_text'] )	? $content_data['timer_day_text']		: '';
	$hour_text		= ! empty( $content_data['timer_hour_text'] )	? $content_data['timer_hour_text']		: '';
	$minute_text	= ! empty( $content_data['timer_minute_text'] ) ? $content_data['timer_minute_text']	: '';
	$second_text	= ! empty( $content_data['timer_second_text'] ) ? $content_data['timer_second_text']	: '';
	$is_days		= ! empty( $content_data['is_timerdays'] )		? $content_data['is_timerdays']			: '';
	$is_hours		= ! empty( $content_data['is_timerhours'] )		? $content_data['is_timerhours']		: '';
	$is_minutes		= ! empty( $content_data['is_timerminutes'] )	? $content_data['is_timerminutes']		: '';
	$is_seconds		= ! empty( $content_data['is_timerseconds'] )	? $content_data['is_timerseconds']		: '';
	$expiry_date	= date_i18n( 'Y-m-d H:i:s', $timer_date );
	$current_date	= date_i18n( 'Y-m-d H:i:s', $current_time );
	$date_c			= date('c');
	$totalseconds	= ( $timer_date - $current_time );

	// Taking some variable
	$design_data = get_post_meta( $timer_id, $prefix.'design', true );

	// Taking some data
	$design	= get_post_meta( $timer_id, $prefix.'design_style', true );

	// Getting circle style 1 settings
	$timercircle_animation	= ! empty( $design_data['timercircle_animation'] )	? $design_data['timercircle_animation'] : '';
	$timercircle_width		= ! empty( $design_data['timercircle_width'] )		? $design_data['timercircle_width']		: 0.1;
	$timer_bg_width			= ! empty( $design_data['timerbackground_width'] )	? $design_data['timerbackground_width'] : 1.2;

	// Getting clock background colors settings
	$timer_bgclr			= ! empty( $design_data['timerbackground_color'] )			? $design_data['timerbackground_color']			: '#313332';
	$timer_day_bgclr		= ! empty( $design_data['timerdaysbackground_color'] )		? $design_data['timerdaysbackground_color'] 	: '#e3be32';
	$timer_hour_bgclr		= ! empty( $design_data['timerhoursbackground_color'] ) 	? $design_data['timerhoursbackground_color']	: '#36b0e3';
	$timer_minute_bgclr		= ! empty( $design_data['timerminutesbackground_color'] )	? $design_data['timerminutesbackground_color']	: '#75bf44';
	$timer_second_bgclr		= ! empty( $design_data['timersecondsbackground_color'] )	? $design_data['timersecondsbackground_color']	: '#66c5af';

	$classes = " wpcdt-timer-{$design} wpcdt-timer-{$timer_id}";

	// Timer Config
	$timer_conf = compact('current_date', 'expiry_date', 'timercircle_animation', 'timercircle_width', 'timer_bg_width', 'timer_bgclr', 'timer_day_bgclr', 'timer_hour_bgclr', 'timer_minute_bgclr', 'timer_second_bgclr', 'day_text', 'hour_text', 'minute_text', 'second_text', 'is_days', 'is_hours', 'is_minutes', 'is_seconds');

	wp_enqueue_script('wpcdt-timecircle-js'); // Enqueue Timer Circle JS

	// Dequeue Timer JS
	wp_dequeue_script( 'wpcdt-public-js' );

	// Enqueue Timer JS
	wp_enqueue_script('wpcdt-public-js');

	ob_start();

	// If timer greater then or qual to current time
	if( $timer_date >= $current_time ) {

		// Print Inline Style
		echo "<style type='text/css'>". wpcdt_generate_style( $timer_id, $design, $design_data ) ."</style>";

		// Include Design File
		include( WPCDT_DIR. '/templates/circle.php' );
	}

	$content .= ob_get_clean();
	return $content;
}

Code file location:

countdown-timer-ultimate/countdown-timer-ultimate/includes/shortcode/wpcdt-shortcode.php

Conclusion

Now that you’ve learned how to embed the Countdown Timer Ultimate 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.

Comments

Leave a Reply

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