WPShortcode

Ibtana Shortcode

Below, you’ll find a detailed guide on how to add the Ibtana – WordPress Website Builder 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 Ibtana – WordPress Website Builder Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Ibtana – WordPress Website Builder Plugin and the shortcodes it provides:

Plugin Icon
Ibtana – WordPress Website Builder

"Ibtana – WordPress Website Builder is a dynamic plugin that empowers you to create and customize your WordPress site effortlessly. Its visual editor simplifies the website design process."

★★★☆✩ (13) Active Installs: 20000+ Tested with: 6.3.2 PHP Version: 7.2
Included Shortcodes:
  • []

Ibtana [ive] Shortcode

The Ibtana Visual Editor shortcode is a powerful tool for WordPress sites. It allows the creation of a countdown timer with customizable features such as labels, colors, font styles, alignment, and dimensions. It also supports different time formats and can be set to count up or down. The shortcode is: [ive].

Shortcode: [ive]

Parameters

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

  • id – Unique identifier for the countdown element
  • t – Target time for the countdown
  • years – Label for the years in the countdown
  • months – Label for the months in the countdown
  • weeks – Label for the weeks in the countdown
  • days – Label for the days in the countdown
  • hours – Label for the hours in the countdown
  • minutes – Label for the minutes in the countdown
  • seconds – Label for the seconds in the countdown
  • displayyears – Option to display years in the countdown
  • displaymonths – Option to display months in the countdown
  • displayweeks – Option to display weeks in the countdown
  • displayseconds – Option to display seconds in the countdown
  • backgroundcolor – Background color of the countdown element
  • textcolor – Color of the countdown text
  • textcolorhov – Hover color of the countdown text
  • bordercolor – Border color of the countdown element
  • bordercolorhov – Hover color of the countdown border
  • borderradius – Border radius of the countdown element
  • borderwidth – Width of the countdown border
  • typography – Font type of the countdown text
  • fontstyle – Font style of the countdown text
  • fontweight – Font weight of the countdown text
  • desklabelfontsize – Font size of the label on desktop
  • tablabelfontsize – Font size of the label on tablet
  • moblabelfontsize – Font size of the label on mobile
  • desknumberfontsize – Font size of the number on desktop
  • tabnumberfontsize – Font size of the number on tablet
  • mobnumberfontsize – Font size of the number on mobile
  • marginlr – Left and right margin of the countdown element
  • margintb – Top and bottom margin of the countdown element
  • deskalign – Text alignment on desktop
  • tabalign – Text alignment on tablet
  • mobalign – Text alignment on mobile
  • letterspacing – Spacing between letters in the countdown text
  • texttransform – Text transformation (uppercase, lowercase, capitalize)
  • tabalignment – Alignment of the countdown on tablet
  • blockalignment – Alignment of the countdown block
  • deskwidth – Width of the countdown on desktop
  • tabwidth – Width of the countdown on tablet
  • mobwidth – Width of the countdown on mobile
  • deskheight – Height of the countdown on desktop
  • tabheight – Height of the countdown on tablet
  • mobheight – Height of the countdown on mobile
  • style – Style of the countdown element
  • before – Text to display before the countdown
  • after – Text to display after the countdown
  • width – Width of the countdown element
  • height – Height of the countdown element
  • launchwidth – Width of the countdown when launched
  • launchheight – Height of the countdown when launched
  • launchtarget – Target of

    Examples and Usage

    Basic example – Displaying a countdown for a specific event using the ‘ive’ shortcode.

    [ive id="event1" t="2022-12-31 23:59:59" years="Years" months="Months" days="Days" hours="Hours" minutes="Minutes" seconds="Seconds" /]

    Advanced examples

    Displaying a countdown with specific styling options. This example demonstrates how to customize the appearance of the countdown, such as the background color, text color, border color, and typography.

    [ive id="event2" t="2022-12-31 23:59:59" years="Years" months="Months" days="Days" hours="Hours" minutes="Minutes" seconds="Seconds" backgroundcolor="#ffffff" textcolor="#000000" bordercolor="#000000" typography="Arial" /]

    Displaying a countdown with specific alignment and margin options. This example demonstrates how to customize the layout of the countdown, such as the alignment and margin.

    [ive id="event3" t="2022-12-31 23:59:59" years="Years" months="Months" days="Days" hours="Hours" minutes="Minutes" seconds="Seconds" deskalign="center" tabalign="left" mobalign="right" marginlr="10" margintb="20" /]

    PHP Function Code

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

    Shortcode line:

    add_shortcode('ive', array( $this, 'ive_shortcode') );

    Shortcode PHP function:

    function ive_shortcode($atts, $content=null) {
		//find a random number, if no id was assigned
		$ran = uniqid();
	    extract(shortcode_atts(array(
			'id' 									=> sanitize_text_field($ran),
			't' 									=> '',
			// 'timezone' 						=> get_option('timezone_string'),
			'years' 							=> sanitize_text_field($this->options['yearlabel']),
			'months' 							=> sanitize_text_field($this->options['monthlabel']),
			'weeks' 							=> sanitize_text_field($this->options['weeklabel']),
			'days'								=> sanitize_text_field($this->options['daylabel']),
			'hours'								=> sanitize_text_field($this->options['hourlabel']),
			'minutes' 						=> sanitize_text_field($this->options['minutelabel']),
			'seconds' 						=> sanitize_text_field($this->options['secondlabel']),
			'displayyears' 				=> sanitize_text_field($this->options['displayyears']),
			'displaymonths' 			=> sanitize_text_field($this->options['displaymonths']),
			'displayweeks' 				=> sanitize_text_field($this->options['displayweeks']),
			'displayseconds'			=> sanitize_text_field($this->options['displayseconds']),
			'backgroundcolor' 		=> sanitize_text_field($this->options['backgroundColor']),
			'textcolor' 					=> sanitize_text_field($this->options['textColor']),
			'textcolorhov' 				=> sanitize_text_field($this->options['textColorHov']),
			'bordercolor' 				=> sanitize_text_field($this->options['borderColor']),
			'bordercolorhov' 			=> sanitize_text_field($this->options['borderColorHov']),
			'borderradius' 				=> sanitize_text_field($this->options['borderRadius']),
			'borderwidth' 				=> sanitize_text_field($this->options['borderWidth']),
			'typography' 					=> sanitize_text_field($this->options['typography']),
			'fontstyle' 					=> sanitize_text_field($this->options['fontStyle']),
			'fontweight' 					=> sanitize_text_field($this->options['fontWeight']),
			'desklabelfontsize' 	=> sanitize_text_field($this->options['desklabelFontSize']),
			'tablabelfontsize' 		=> sanitize_text_field($this->options['tablabelFontSize']),
			'moblabelfontsize' 		=> sanitize_text_field($this->options['moblabelFontSize']),
			'desknumberfontsize' 	=> sanitize_text_field($this->options['desknumberFontSize']),
			'tabnumberfontsize' 	=> sanitize_text_field($this->options['tabnumberFontSize']),
			'mobnumberfontsize'		=> sanitize_text_field($this->options['mobnumberFontSize']),
			'marginlr' 						=> sanitize_text_field($this->options['marginLR']),
			'margintb' 						=> sanitize_text_field($this->options['marginTB']),
			'deskalign' 					=> sanitize_text_field($this->options['deskAlign']),
			'tabalign' 						=> sanitize_text_field($this->options['tabAlign']),
			'mobalign' 						=> sanitize_text_field($this->options['mobAlign']),
			'letterspacing' 			=> sanitize_text_field($this->options['letterSpacing']),
			'texttransform'				=> sanitize_text_field($this->options['textTransform']),
			'tabalignment' 				=> sanitize_text_field($this->options['tabAlignment']),
			'blockalignment' 			=> sanitize_text_field($this->options['blockAlignment']),
			'deskwidth' 					=> sanitize_text_field($this->options['deskWidth']),
			'tabwidth' 						=> sanitize_text_field($this->options['deskWidth']),
			'mobwidth' 						=> sanitize_text_field($this->options['deskWidth']),
			'deskheight'					=> sanitize_text_field($this->options['deskHeight']),
			'tabheight' 					=> sanitize_text_field($this->options['deskHeight']),
			'mobheight' 					=> sanitize_text_field($this->options['deskHeight']),
			'style' 							=> 'suzuki',
			'before' 							=> '',
			'after' 							=> '',
			'width' 							=> 'auto',
			'height' 							=> 'auto',
			'launchwidth' 				=> 'auto',
			'launchheight' 				=> 'auto',
			'launchtarget' 				=> 'countdown',
			'event_id' 						=> '',
			'debug' 							=> '',
		), IVE_Loader::ive_sanitize_array($atts), 'ive' ));

		if(empty($t)){
			return;
		}

		//insert some style into your life
		$style_file_url = plugins_url('/css/'.$style.'/style.css', __FILE__);

		if ( file_exists( __DIR__ .'/css/'.$style.'/style.css' ) ) {
			if (! wp_style_is( 'countdown-'.$style.'-css', 'registered' )) {
				wp_register_style( 'countdown-'.$style.'-css', $style_file_url, array(), '2.0');
			}
			wp_enqueue_style( 'countdown-'.$style.'-css' );
		}

		//$now = new DateTime( );
		$now = new DateTime( '', $this->get_wp_timezone() );

		// deal with this_year and this_easter
		if(stristr($t, '%') != FALSE){
			$scode = array('%this_year%', '%this_easter%');
			$swap = array(date('Y'), date('Y-m-d', easter_date(date('Y'))));

			if( strtotime( str_replace($scode, $swap, $t)) <  strtotime("now") ){
				$swap = array(date('Y', strtotime('+1 year')), date('Y-m-d', easter_date(date('Y', strtotime('+1 year')))));
			}
			$t = str_replace($scode, $swap, $t);
		}


		$target = new DateTime( $t, $this->get_wp_timezone() );
		$tomorrow_target = $target;

		$diffSecs = $target->getTimestamp() - $now->getTimestamp();

		$day = $target->format('d');
		$month = $target->format('m');
		$year = $target->format('Y');
		$hour = $target->format('H');
		$min = $target->format('i');
		$sec = $target->format('s');

		// interval
		$interval = $now->diff($target);

		// next digits
		$pop_day = new DateInterval('P1D');

		$tomorrow_target->sub($pop_day);
		$tomorrow_interval = $now->diff($tomorrow_target);

		// countdown digits
		$date_arr = array(
			'secs' => $interval->s,
			'mins' => $interval->i,
			'hours' => $interval->h,
			'days' => $interval->d,
			'months' => $interval->m,
			'years' => $interval->y,
	 	);

		$current_hours = $interval->h;
		$current_minutes = $interval->i;

		$next_arr = array(
			'next_day' => $tomorrow_interval->d
		);

		if($interval->m != $tomorrow_interval->m){
			$next_arr['next_month'] = $tomorrow_interval->m;
		}

		if($interval->y != $tomorrow_interval->y){
			$next_arr['next_year'] = $tomorrow_interval->y;
		}

	  // deal with display years
		if(!empty($interval->y) && $displayyears != 'true'){
			// if no months, calculate everyting with total days
			if($displaymonths != 'true'){
				$date_arr['days'] = $interval->days;
				$next_arr['next_day'] = $tomorrow_interval->days;
			}
			// add years to months.
			else{
				$date_arr['months'] = $date_arr['months'] + ($interval->y * 12);
				if(isset($next_arr['next_month'])){
					$next_arr['next_month'] = $next_arr['next_month'] + ($tomorrow_interval->y * 12);
				}
				else{
					$next_arr['next_month'] = ($tomorrow_interval->y * 12);
				}

			}
		}

		// deal with display months
		if(!empty($date_arr['months']) && $displaymonths != 'true'){
			if(!empty($interval->y) && $displayyears == 'true'){
				$pop_years = new DateInterval('P'.$interval->y.'Y');
				$adjusted_target = $target->sub($pop_years);
				$interval = $now->diff($adjusted_target);

				if(!empty($next_arr['next_year'])){
					$pop_tomorrow_time = new DateInterval('P'.$interval->y.'Y1D');
					$adjusted_tomorrow = $target->sub($pop_tomorrow_time);
					$tomorrow_interval = $now->diff($adjusted_tomorrow);
				}
			}
			$date_arr['days'] = $interval->days;
			$next_arr['next_day'] = $tomorrow_interval->days;
		}

		//but what if months where empty, but next day we have months...
		else if(!empty($next_arr['next_month']) && $displaymonths != 'true'){
			$next_arr['next_day'] = $tomorrow_interval->days;
		}

		// adjust days if weeks are being displayed
		if($displayweeks == 'true'){
			$date_arr['weeks'] = (int) floor( $date_arr['days'] / 7 );
			$date_arr['daysT-'] = (int) floor($date_arr['days'] %7);

			$next_week = (int) floor( $next_arr['next_day'] / 7 );
			if($date_arr['weeks'] != $next_week ){
				$next_arr['next_week'] = $next_week;
			}
			$next_arr['next_day'] = (int) floor($next_arr['next_day'] %7);
		}

		if( $diffSecs <= 0 && $launchtarget != 'countup'){
			$date_arr = array(
				'secs' => 0,
				'mins' => 0,
				'hours' => 0,
				'days' => 0,
				'weeks' => 0,
				'months' => 0,
				'years' => 0,
		 	);
		}

		// break numbers into digit elements
		foreach ($date_arr as $i => $d) {
			if($i == 'days' && $next_arr['next_day'] > 99){
				if($d > 9){
					$d = sprintf("%02d", $d);
				}
				if($d < 10){
					$d = sprintf("%03d", $d);
				}
			}
			//single digits get a padding zero
			else if($d < 10){
				$d = sprintf("%02d", $d);
			}
			$date_arr[$i] = array_map('intval', str_split($d));
		}


		if(is_numeric($width)){
			$width .= 'px';
		}
		if(is_numeric($height)){
			$height .= 'px';
		}
		$fonttypography = str_replace(" ","+",$typography);
		$fontfamilyname = ($fonttypography !== '') ? $fonttypography : 'Open+Sans';

		$id = uniqid();

		$ive = '<div id="'.$id.'-countdown" class="ive-title countdown_main_'.$id.' align'.$blockalignment.' ive_countdown" style="width:'.$width.'; height:'.$height.';">';
		$ive .= '<div class="'.$style.'-countdown">';
		$ive .= '<div id="'.$id.'-tophtml" class="'.$style.'-tophtml">';
	    if($before){
	        $ive .=  htmlspecialchars_decode($before);
	    }
		$ive .=  '</div>';
		$ive .= '<style>';
		$ive .= '@import url("https://fonts.googleapis.com/css2?family='.$fontfamilyname.':wght@'.$fontweight.'&display=swap");';
		$ive .= '
		.countdown-style-'.$id.'{
			background: '.$backgroundcolor.' !important;
			color: '.$textcolor.' !important;
			border: '.$borderwidth.'px solid '.$bordercolor.' !important;
			border-radius: '.$borderradius.'px !important;
			margin: '.$margintb.'px '.$marginlr.'px !important;
		}
		.countdown-width-height'.$id.':hover{
		  color: '.$textcolorhov.' !important;
		}
		.countdown-style-'.$id.':hover{
			border: '.$borderwidth.'px solid '.$bordercolorhov.' !important;
		}
		.countdown-title-color-'.$id.'{
			color: '.$textcolor.' !important;
			font-family: '.$fonttypography.' !important;
			font-weight: '.$fontweight.' !important;
			font-style: '.$fontstyle.' !important;
			letter-spacing: '.$letterspacing.'px !important;
			text-transform: '.$texttransform.' !important;
		}
		@media screen and (max-width: 767px){
			.countdown-title-color-'.$id.'{
				text-align: '.$mobalign.' !important;
				font-size:'.$moblabelfontsize.'px !important;
			}
			.countdown-number-fontsize-'.$id.'{
				font-size:'.$mobnumberfontsize.'px !important;
			}
		}
		@media screen and (min-width: 768px) and (max-width: 1023px){
			.countdown-title-color-'.$id.'{
				text-align: '.$tabalign.' !important;
				font-size:'.$tablabelfontsize.'px !important;
			}
			.countdown-number-fontsize-'.$id.'{
				font-size:'.$tabnumberfontsize.'px !important;
			}
		}
		@media screen and (min-width: 1024px){
			.countdown_main_'.$id.'{
				justify-content:'.$tabalignment.';
				display:flex;
			}
			.countdown-title-color-'.$id.'{
				text-align: '.$deskalign.' !important;
				font-size:'.$desklabelfontsize.'px !important;
			}
			.countdown-width-height'.$id.'{
				width:'.$deskwidth.'px !important;
				height:'.$deskheight.'px !important;
			}
			.countdown-number-fontsize-'.$id.'{
				font-size:'.$desknumberfontsize.'px !important;
			}
		}
		';
		$ive .= '</style>';
		//drop in the dashboard
		$ive .=  '<div id="'.$id.'-dashboard" class="'.$style.'-dashboard">';

		if(!empty($date_arr['years']) && $displayyears == 'true'){
			$class = $style.'-dash '.$style.'-years_dash';
			$next_year = '';
			if(isset($next_arr['next_year'])){
				$next_year = 'data-next="'.$next_arr['next_year'].'"';
			}
			$ive .=  '<div class="countdown-width-height'.$id.' countdown-style-'.$id.' '.$class.'" '.$next_year.'"><div class="countdown-title-color-'.$id.' '.$style.'-dash_title">'.$years.'</div>';
			foreach( $date_arr['years'] AS $digit ){
				$ive .=  '<div class="countdown-number-fontsize-'.$id.' '.$style.'-digit" data-digit="'.$digit.'">'.$digit.'</div>';
			}
			$ive .= '</div>';
		}

		if(!empty($date_arr['months']) && $displaymonths == 'true'){
			$class = $style.'-dash '.$style.'-months_dash';
			$next_month = '';
			if(isset($next_arr['next_month'])){
				$next_month = 'data-next="'.$next_arr['next_month'].'"';
			}
			$ive .=  '<div class="countdown-width-height'.$id.' countdown-style-'.$id.' '.$class.'" '.$next_month.'><div class="countdown-title-color-'.$id.' '.$style.'-dash_title">'.$months.'</div>';
			foreach( $date_arr['months'] AS $digit ){
				$ive .=  '<div class="countdown-number-fontsize-'.$id.' '.$style.'-digit" data-digit="'.$digit.'">'.$digit.'</div>';
			}
			$ive .= '</div>';
		}

		if($displayweeks == 'true'){
			$wclass = $style.'-dash '.$style.'-weeks_dash';
			$next_week = '';
			if(isset($next_arr['next_week'])){
				$next_week = 'data-next="'.$next_arr['next_week'].'"';
			}
			$ive .=  '<div class="countdown-width-height'.$id.' countdown-style-'.$id.' '.$wclass.'" '.$next_week.'><div class="countdown-title-color-'.$id.' '.$style.'-dash_title">'.$weeks.'</div>';
			foreach( $date_arr['weeks'] AS $digit ){
				$ive .=  '<div class="countdown-number-fontsize-'.$id.' '.$style.'-digit" data-digit="'.$digit.'">'.$digit.'</div>';
			}
			$ive .= '</div>';
		}

		$dclass = $style.'-dash '.$style.'-days_dash';
		$ive .= '<div class="countdown-width-height'.$id.' countdown-style-'.$id.' '.$dclass.'" data-next="'.$next_arr['next_day'].'"><div class="countdown-title-color-'.$id.' '.$style.'-dash_title">'.$days.'</div>';
		foreach( $date_arr['days'] AS $digit ){
			$ive .=  '<div class="countdown-number-fontsize-'.$id.' '.$style.'-digit" data-digit="'.$digit.'">'.$digit.'</div>';
		}
		$ive .= '</div>';

		$ive .= '<div class="countdown-width-height'.$id.' countdown-style-'.$id.' '.$style.'-dash '.$style.'-hours_dash" data-current="'.$current_hours.'">';
			$ive .= '<div class="countdown-title-color-'.$id.' '.$style.'-dash_title">'.$hours.'</div>';
			foreach( $date_arr['hours'] AS $digit ){
				$ive .=  '<div class="countdown-number-fontsize-'.$id.' '.$style.'-digit" data-digit="'.$digit.'">'.$digit.'</div>';
			}
		$ive .= '</div>';

		$ive .= '<div class="countdown-width-height'.$id.' countdown-style-'.$id.' '.$style.'-dash '.$style.'-minutes_dash" data-current="'.$current_minutes.'">';
			$ive .= '<div class="countdown-title-color-'.$id.' '.$style.'-dash_title">'.$minutes.'</div>';
			foreach( $date_arr['mins'] AS $digit ){
				$ive .=  '<div class="countdown-number-fontsize-'.$id.' '.$style.'-digit" data-digit="'.$digit.'">'.$digit.'</div>';
			}
		$ive .= '</div>';

		if($displayseconds == 'true'){
				$ive .= '<div class="countdown-width-height'.$id.' countdown-style-'.$id.' '.$style.'-dash '.$style.'-seconds_dash">';
					$ive .= '<div class="countdown-title-color-'.$id.' '.$style.'-dash_title">'.$seconds.'</div>';
					foreach( $date_arr['secs'] AS $digit ){
						$ive .=  '<div class="countdown-number-fontsize-'.$id.' '.$style.'-digit" data-digit="'.$digit.'">'.$digit.'</div>';
					}
				$ive .= '</div>';
		}

		$ive .= '</div>'; //close the dashboard

		$ive .= '<div id="'.$id.'-bothtml" class="'.$style.'-bothtml">';
		if($after){
			$ive .= htmlspecialchars_decode($after);
		}
		$ive .= '</div></div></div>';

		$lt = date( 'n/j/Y H:i:s', strtotime(current_time('mysql')) );

		if(is_numeric($launchwidth)){
			$launchwidth .= 'px';
		}
		if(is_numeric($launchheight)){
			$launchheight .= 'px';
		}

		$content = json_encode(do_shortcode($content));
		$content = str_replace(array('\r\n', '\r', '\n<p>', '\n', '""'), '', $content);

		$ive .= "<script language='javascript' type='text/javascript'>
			jQuery(document).ready(function($) {
				$('#".$id."-dashboard').iveCountDown({
					targetDate: {
						'day': 	".$day.",
						'month': ".$month.",
						'year': ".$year.",
						'hour': ".$hour.",
						'min': 	".$min.",
						'sec': 	".$sec.",
						'localtime': '".$lt."'
					},
					style: '".$style."',
					id: '".$id."',
					event_id: '".$event_id."',
					debug: '".$debug."',
					launchtarget: '".$launchtarget."'";

		if(!empty($content)){
			$ive .= ", onComplete: function() {
								$('#".$id."-".$launchtarget."').css({'width' : '".$launchwidth."', 'height' : '".$launchheight."'});
								$('#".$id."-".$launchtarget."').html(".$content.");
							}";
		}
		$ive .= "});
			});
		</script>";

		if(!empty($debug)){
			$ive .= '<pre>Now: ' . $now->format('Y-m-d H:i:s e');
			$formated_target = new DateTime($t, $this->get_wp_timezone());
			$ive .= '<br/>Target: ' . $formated_target->format('Y-m-d H:i:s e');

			$interval = $formated_target->diff($now);
			$ive .= '<br/>Time to Target: ' . $interval->format('%a days %h hours %i mins. %s secs.');

			//rest now values
			$ive .= '<br/>Browser Now (JS): <span id="'.$id.'-jsnow">loading...</span>';
			$ive .= '<br/>Timezone Delta: <span id="'.$id.'-jstzone">loading...</span>';
			$ive .= '<br/>Rest Now (JS): <span id="'.$id.'-jstime">loading...</span>';
			$ive .= '<br/>Time to Target: <span id="'.$id.'-jsdiff">loading...</span>';
			$ive .= '<br/>Time Cached: <span id="'.$id.'-jscached">loading...</span>';

			$ive .= '</pre>';
		}

		return $ive;
	}

    Code file location:

    ibtana-visual-editor/ibtana-visual-editor/ive-countdown.php

    Conclusion

    Now that you’ve learned how to embed the Ibtana – WordPress Website Builder 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.

Related Shortcodes

Comments

Leave a Reply

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