If you want to get your visitors attention by direction them to upcoming releases, openings or events, Visual Composer Extensions has you covered with the “Countdown Timer” element. Just add your data, time or both, select one of the available styles and you are ready to go. Of course, you can style the countdown timer a little more by using custom colors and by enabling/disabling some parts of it.

The “Countdown Timer” provides you with the following options:

When using the “date” only or “date/time” target for the countdown, you also have the option to provide a separate shortcode as value for the target date/time, instead of directly entering a date/time. That shortcode should dynamically generate the desired date/time in the required format, as the countdown will otherwise fail to work.

When using the shortcode option, you can NOT cache the page with the countdown, as WordPress will otherwise not be able to update the shortcode value anymore. If WordPress is loading a cached version of the page, the generated date/time will always stay the same.

  • 8 different styles to select from
  • Select date only (date can also be provided via dynamic shortcode)
  • Select time only
  • Select date and time (date/time can also be provided via dynamic shortcode)
  • Apply automatic reset with intervals up to 24 hours
  • Apply link to another page to countdown, to be opened once countdown has expired
  • Set different colors for numbers and text
  • Change background color for overall countdown element
  • Add border to countdown element (set width, type and color)
  • Disable “days”, “hours”, “minutes” and/or “seconds” from showing
  • Change column background and add column borders (for basic style with columns)
  • Change width of circles; give each circle its own color (for circles style)
  • Change color of bar and bar background (for bars style)
  • … and more!

Minimum Style

This counter is using another shortcode in order to dynamically generate the target date and time. It will always count down to the next Wednesday, 7:00 PM. If today is Wednesday, it will count down to next Wednesday’s date; if today is Tuesday, it will count down to tomorrows date.

// Define Shortcode Callback Function
function TS_VCSC_NextDayOfTheWeek($atts) {
    ob_start();
    
    extract(shortcode_atts(array(
        "day"		      => "Monday",
        "time"		     => "false",
        "hours"		    => 0,
        "minutes"	    => 0,
        "seconds"	    => 0,
    ), $atts));
  
    // Check Time Syntax
    if ($time == "true") {
        if (($hours >= 0 && $hours <= 24) && ($minutes >= 0 && $minutes <= 59) && ($seconds >= 0 && $seconds <= 59)) {
            $time       = $time;
        } else {
            $time       = "false";
        }
    }
	
    $finddate		       = strtotime("next " . ucfirst($day));
    if ($time == "true") {
        $maketime 	    = mktime($hours, $minutes, $seconds, date('m', $finddate), date('d', $finddate), date('Y', $finddate));
    } else {
        $maketime 	    = mktime(0, 0, 0, date('m', $finddate), date('d', $finddate), date('Y', $finddate));
    }

    if ($time == "true") {
        // Required Output: dd/mm/yyyy hh:mm AM/PM
        echo date('m/d/Y h:i A',	$maketime);
    } else {	
        // Required Output: dd/mm/yyyy
        echo date("m/d/Y", 			$maketime);
    }
	
    $myvariable = ob_get_clean();
    return $myvariable;
}

// Register Shortcode with WordPress
add_shortcode("TS_VCSC_NextDayOfTheWeek", "TS_VCSC_NextDayOfTheWeek");

// Shortcode Usage Example (in Countdown Element Settings)
[TS_VCSC_NextDayOfTheWeek day="Wednesday" time="true" hours="19"]

Basic Style with Columns

This counter is set for a repeating time every day (the section showing remaining days has been disabled via settings).

Bars Style

This counter is set for a fixed date and time.

Flipboard Style

This counter is set for an automatic repeat every 15 minutes. You can assign a link to an internal or external page to this kind of countdown, to be opened once the countdown expires. The automatic repeat can also be disabled.

Circles Style

This counter is set for a fixed date only.

3D Horizontal Flip Style

This counter is set for a fixed date and time.

Digital Clock Style 1

This counter is set for a fixed date and time. Digital Clock Styles only show hours, minutes and seconds.

Digital Clock Style 2

::

This counter is set for a fixed date and time. Digital Clock Styles only show hours, minutes and seconds.