Phân trang Next/prev

PHOTO

Fri Aug 15 2025 02:51:03 GMT+0000 (Coordinated Universal Time)

Saved by @vanthien #jq

function smo_post_navigation_shortcode() {
	ob_start();
	?>
	<nav class="navigation post-navigation" role="navigation">
		<div class="nav-links">
			<?php
			$prev_post = get_previous_post(true);
			if (!empty($prev_post)) {
					?>
					<div class="prev-post">
						<a href="<?php echo get_permalink($prev_post->ID); ?>" class="click-icon"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.28125 7.46875C0.046875 7.23438 0.046875 6.80469 0.28125 6.57031L6.53125 0.320312C6.76562 0.0859375 7.19531 0.0859375 7.42969 0.320312C7.66406 0.554688 7.66406 0.984375 7.42969 1.21875L1.60938 7L7.42969 12.8203C7.66406 13.0547 7.66406 13.4844 7.42969 13.7188C7.19531 13.9531 6.76562 13.9531 6.53125 13.7188L0.28125 7.46875Z" fill="#027DC0"/>
</svg>
</a>
						<div class="infor-post-navigation">
							<h6>Previous NEWS</h6>
							<p><?php echo esc_html($prev_post->post_title); ?></p>
						</div>
					</div>
					<?php
						}else{
				echo '<div></div>';
			}
					?>
					<?php
			$next_post = get_next_post(true);
			if (!empty($next_post)) {
					?>
					<div class="next-post">
						<div class="infor-post-navigation">
							<h6>NEXT NEWS</h6>
							<p><?php echo esc_html($next_post->post_title); ?></p>
						</div>
						<a href="<?php echo get_permalink($next_post->ID); ?>" class="click-icon"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.67969 6.57031C7.91406 6.80469 7.91406 7.23438 7.67969 7.46875L1.42969 13.7188C1.19531 13.9531 0.765625 13.9531 0.53125 13.7188C0.296875 13.4844 0.296875 13.0547 0.53125 12.8203L6.35156 7L0.53125 1.21875C0.296875 0.984375 0.296875 0.554688 0.53125 0.320312C0.765625 0.0859375 1.19531 0.0859375 1.42969 0.320312L7.67969 6.57031Z" fill="#027DC0"/>
</svg>

						</a>
					</div>
					<?php
						}else{
				echo '<div></div>';
			}
	?>
		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	<?php
	return ob_get_clean();
}
add_shortcode('smo_post_navigation', 'smo_post_navigation_shortcode');

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

Wordpress

@vanthien

Phân trang Next/prev Phân trang Number Share social wordpress Cách viết shortcode Visua Composer Cách viết Shortcode Elementor Mega Menu Ajax Search thông thường Key Ajax Html

Select option thành div để style cho dễ

if ($('.custom-select').length) {
		var x, i, j, l, ll, selElmnt, a, b, c;
		/* Look for any elements with the class "custom-select": */
		x = document.getElementsByClassName("custom-select");
		l = x.length;
		for (i = 0; i < l; i++) {
			selElmnt = x[i].getElementsByTagName("select")[0];
			ll = selElmnt.length;
			/* For each element, create a new DIV that will act as the selected item: */
			a = document.createElement("DIV");
			a.setAttribute("class", "select-selected");
			a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
			x[i].appendChild(a);

			/* For each element, create a new DIV that will contain the option list: */
			b = document.createElement("DIV");
			b.setAttribute("class", "select-items select-hide");
			for (j = 0; j < ll; j++) {  //
				/* For each option in the original select element,
				create a new DIV that will act as an option item: */
				c = document.createElement("DIV");
				c.innerHTML = selElmnt.options[j].innerHTML;

				/*  */
				if (j === selElmnt.selectedIndex) {
					c.setAttribute("class", "same-as-selected");
				}

				c.addEventListener("click", function(e) {
					/* When an item is clicked, update the original select box,
					and the selected item: */
					var y, i, k, s, h, sl, yl;
					s = this.parentNode.parentNode.getElementsByTagName("select")[0];
					sl = s.length;
					h = this.parentNode.previousSibling;
					for (i = 0; i < sl; i++) {
						if (s.options[i].innerHTML == this.innerHTML) {
							s.selectedIndex = i;
							h.innerHTML = this.innerHTML;
							y = this.parentNode.getElementsByClassName("same-as-selected");
							yl = y.length;
							for (k = 0; k < yl; k++) {
								y[k].removeAttribute("class");
							}
							this.setAttribute("class", "same-as-selected");
							break;
						}
					}
					h.click();
				});
				b.appendChild(c);
			}
			x[i].appendChild(b);
			a.addEventListener("click", function(e) {
				/* When the select box is clicked, close any other select boxes,
				and open/close the current select box: */
				e.stopPropagation();
				closeAllSelect(this);
				this.nextSibling.classList.toggle("select-hide");
				this.classList.toggle("select-arrow-active");
			});
		}

		function closeAllSelect(elmnt) {
			/* A function that will close all select boxes in the document,
			except the current select box: */
			var x, y, i, xl, yl, arrNo = [];
			x = document.getElementsByClassName("select-items");
			y = document.getElementsByClassName("select-selected");
			xl = x.length;
			yl = y.length;
			for (i = 0; i < yl; i++) {
				if (elmnt == y[i]) {
					arrNo.push(i)
				} else {
					y[i].classList.remove("select-arrow-active");
				}
			}
			for (i = 0; i < xl; i++) {
				if (arrNo.indexOf(i)) {
					x[i].classList.add("select-hide");
				}
			}
		}

		/* If the user clicks anywhere outside the select box,
		then close all select boxes: */
		document.addEventListener("click", closeAllSelect);
	}

Date time picker

add_action( 'wp_footer', 'load_flatpickr_datetime_script' );
function load_flatpickr_datetime_script() {
    ?>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        flatpickr(".datetimepicker input", {
            enableTime: true,
            dateFormat: "m/d/Y @ h:i K", // h:i = 12h, K = AM/PM
            time_24hr: false
        });
    });
    </script>
	<style>
		body .gform_fields .gfield.datetimepicker .ginput_container  input{
			background-image: url(<?php echo home_url(); ?>/wp-content/uploads/2025/04/calendar.svg) !important;
			background-position: center right  10px !important;
			background-repeat: no-repeat !important;
		}
	</style>
    <?php
}

Js scroll đổi màu text

jQuery('.title_animate .elementor-heading-title').each(function() {
	const $this = jQuery(this);
	const content = $this.text();
	var html = '';
	for (let i = 0; i < content.length; i++) {
	  html += `<span>${content[i]}</span>`;
	}
	$this.html(html);
});
window.addEventListener('scroll', function() {
	var delay = 0;

	jQuery('.title_animate .elementor-heading-title').each(function() {
	  const scrollY = window.scrollY;
	  const thisTop = jQuery(this).offset().top;
	  const screenHeight = window.innerHeight;
	  const start = thisTop - (screenHeight);
	  const end = thisTop - (screenHeight / 4);
	  const move = scrollY - start;
	  const percent = move / (end - start) * 100;
	  const spans = jQuery(this).find('span');
	  const animated = Math.floor(spans.length / 100 * percent);
	  spans.each(function(i) {
		let color = i <= animated ? '#213F39' : 'rgba(33,63,57,0.5)';
		if (i <= animated && !jQuery(this).hasClass('animated')) {
		  jQuery(this).css({
			transition: `all 0.3s linear`,
			color: color
		  });
		  delay += 0.02;
		  jQuery(this).addClass('animated');
		}
		if (i > animated) {
		  jQuery(this).css({
			transition: `none`,
			color: color
		  });
		  jQuery(this).removeClass('animated');
		}
	  })
	})
});

Phân trang Next/prev

function smo_post_navigation_shortcode() {
	ob_start();
	?>
	<nav class="navigation post-navigation" role="navigation">
		<div class="nav-links">
			<?php
			$prev_post = get_previous_post(true);
			if (!empty($prev_post)) {
					?>
					<div class="prev-post">
						<a href="<?php echo get_permalink($prev_post->ID); ?>" class="click-icon"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.28125 7.46875C0.046875 7.23438 0.046875 6.80469 0.28125 6.57031L6.53125 0.320312C6.76562 0.0859375 7.19531 0.0859375 7.42969 0.320312C7.66406 0.554688 7.66406 0.984375 7.42969 1.21875L1.60938 7L7.42969 12.8203C7.66406 13.0547 7.66406 13.4844 7.42969 13.7188C7.19531 13.9531 6.76562 13.9531 6.53125 13.7188L0.28125 7.46875Z" fill="#027DC0"/>
</svg>
</a>
						<div class="infor-post-navigation">
							<h6>Previous NEWS</h6>
							<p><?php echo esc_html($prev_post->post_title); ?></p>
						</div>
					</div>
					<?php
						}else{
				echo '<div></div>';
			}
					?>
					<?php
			$next_post = get_next_post(true);
			if (!empty($next_post)) {
					?>
					<div class="next-post">
						<div class="infor-post-navigation">
							<h6>NEXT NEWS</h6>
							<p><?php echo esc_html($next_post->post_title); ?></p>
						</div>
						<a href="<?php echo get_permalink($next_post->ID); ?>" class="click-icon"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.67969 6.57031C7.91406 6.80469 7.91406 7.23438 7.67969 7.46875L1.42969 13.7188C1.19531 13.9531 0.765625 13.9531 0.53125 13.7188C0.296875 13.4844 0.296875 13.0547 0.53125 12.8203L6.35156 7L0.53125 1.21875C0.296875 0.984375 0.296875 0.554688 0.53125 0.320312C0.765625 0.0859375 1.19531 0.0859375 1.42969 0.320312L7.67969 6.57031Z" fill="#027DC0"/>
</svg>

						</a>
					</div>
					<?php
						}else{
				echo '<div></div>';
			}
	?>
		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	<?php
	return ob_get_clean();
}
add_shortcode('smo_post_navigation', 'smo_post_navigation_shortcode');

Phân trang Number

if ( ! function_exists( 'rst_the_posts_navigation' ) ) :
/**
 * Display navigation to next/previous set of posts when applicable.
 *
 * @todo Remove this function when WordPress 4.3 is released.
 */
function rst_the_posts_navigation($query) {
	// Don't print empty markup if there's only one page.
	if ( $query->max_num_pages < 2 ) {
		return;
	}
	$big = 999999999;
	$my_page = max( get_query_var('paged'), get_query_var('page') );
	$paginate_links = paginate_links( array(
		'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
		'format' => '?paged=%#%',
		'current' => max( 1, $my_page ),
		'total' => $query->max_num_pages,
		'prev_text'    => '<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.64844 5.10156C5.85938 5.33594 5.85938 5.6875 5.64844 5.89844L1.14844 10.3984C0.914062 10.6328 0.5625 10.6328 0.351562 10.3984C0.117188 10.1875 0.117188 9.83594 0.351562 9.625L4.45312 5.52344L0.351562 1.39844C0.117188 1.1875 0.117188 0.835938 0.351562 0.625C0.5625 0.390625 0.914062 0.390625 1.125 0.625L5.64844 5.10156Z" fill="#0A5660"/>
</svg>

',
		'next_text'    => '<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.64844 5.10156C5.85938 5.33594 5.85938 5.6875 5.64844 5.89844L1.14844 10.3984C0.914062 10.6328 0.5625 10.6328 0.351562 10.3984C0.117188 10.1875 0.117188 9.83594 0.351562 9.625L4.45312 5.52344L0.351562 1.39844C0.117188 1.1875 0.117188 0.835938 0.351562 0.625C0.5625 0.390625 0.914062 0.390625 1.125 0.625L5.64844 5.10156Z" fill="#0A5660"/>
</svg>

',
		'type'			=> 'array'
	 ));
	
	if( is_array( $paginate_links ) ) {
		$paged = ( $my_page == 0 ) ? 1 : $my_page;
		echo '<div id="tf-pagination">';
			echo '<nav class="wp-pagenavi">';
				
				foreach ( $paginate_links as $page ) {
					echo force_balance_tags($page);
				}
			
			echo '</nav>';
		echo '</div>';
	}
}
endif;

Share social wordpress

<a href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>&amp;url=<?php echo get_the_permalink(); ?>" class="social-link" target="_blank" rel="noopener noreferrer follow" data-wpel-link="internal">
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="28" height="28" rx="4" fill="#43414F"></rect>
            <path d="M19.9222 4.66675H23.0741L16.1883 12.5742L24.2888 23.3334H17.9457L12.9779 16.8085L7.2928 23.3334H4.13916L11.504 14.8763L3.7334 4.66675H10.237L14.7275 10.6315L19.9222 4.66675ZM18.8157 21.4381H20.5627L9.28848 6.46302H7.41409L18.8157 21.4381Z" fill="white"></path>
        </svg>
    </a>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_the_permalink(); ?>" class="social-link" target="_blank" rel="noopener noreferrer follow" data-wpel-link="internal">
      <svg width="28" height="28" class="facebook" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_3307_57195)">
          <path d="M24.889 1.60787e-07H3.11C2.7015 1.39669e-07 2.29701 0.0804758 1.91962 0.23683C1.54224 0.393185 1.19935 0.622355 0.910544 0.911252C0.621741 1.20015 0.392681 1.54311 0.236448 1.92055C0.0802144 2.29799 -0.000131188 2.70251 1.60787e-07 3.111V24.89C1.39669e-07 25.2985 0.0804758 25.703 0.23683 26.0804C0.393185 26.4578 0.622355 26.8007 0.911252 27.0895C1.20015 27.3783 1.54311 27.6073 1.92055 27.7636C2.29799 27.9198 2.70251 28.0001 3.111 28H14.966V17.172H11.321V12.932H14.966V9.815C14.966 6.2 17.176 4.229 20.403 4.229C21.4898 4.22651 22.5759 4.28092 23.657 4.392V8.172H21.436C19.678 8.172 19.336 9.003 19.336 10.229V12.928H23.536L22.99 17.167H19.31V28H24.889C25.2976 28.0001 25.7022 27.9198 26.0797 27.7635C26.4572 27.6072 26.8002 27.378 27.0891 27.0891C27.378 26.8002 27.6072 26.4572 27.7635 26.0797C27.9198 25.7022 28.0001 25.2976 28 24.889V3.11C28 2.7015 27.9195 2.29701 27.7632 1.91962C27.6068 1.54224 27.3776 1.19935 27.0887 0.910544C26.7999 0.621741 26.4569 0.392681 26.0795 0.236448C25.702 0.0802144 25.2975 -0.000131188 24.889 1.60787e-07Z"></path>
        </g>
        <defs>
          <clipPath id="clip0_3307_57195">
            <rect width="28" height="28" fill="white"></rect>
          </clipPath>
        </defs>
      </svg>
    </a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo get_the_permalink(); ?>" class="social-link" target="_blank" rel="noopener noreferrer follow" data-wpel-link="internal">
      <svg width="28" height="28" class="linkedin h-p-0-lg h-mb-3-lg" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_3302_57044)">
          <path d="M24.889 1.60787e-07H3.11C2.7015 1.39669e-07 2.29701 0.0804758 1.91962 0.23683C1.54224 0.393185 1.19935 0.622355 0.910544 0.911252C0.621741 1.20015 0.392681 1.54311 0.236448 1.92055C0.0802144 2.29799 -0.000131188 2.70251 1.60787e-07 3.111V24.89C1.39669e-07 25.2985 0.0804758 25.703 0.23683 26.0804C0.393185 26.4578 0.622355 26.8007 0.911252 27.0895C1.20015 27.3783 1.54311 27.6073 1.92055 27.7636C2.29799 27.9198 2.70251 28.0001 3.111 28H24.89C25.2985 28 25.703 27.9195 26.0804 27.7632C26.4578 27.6068 26.8007 27.3776 27.0895 27.0887C27.3783 26.7999 27.6073 26.4569 27.7636 26.0795C27.9198 25.702 28.0001 25.2975 28 24.889V3.11C28 2.7015 27.9195 2.29701 27.7632 1.91962C27.6068 1.54224 27.3776 1.19935 27.0887 0.910544C26.7999 0.621741 26.4569 0.392681 26.0795 0.236448C25.702 0.0802144 25.2975 -0.000131188 24.889 1.60787e-07ZM9.333 21.778H5.41V10.888H9.334V21.778H9.333ZM7.302 8.893C6.102 8.893 5.302 8.093 5.302 7.026C5.302 5.959 6.1 5.16 7.433 5.16C8.633 5.16 9.433 5.96 9.433 7.026C9.433 8.094 8.633 8.893 7.301 8.893H7.302ZM23.333 21.778H19.535V15.826C19.535 14.18 18.522 13.801 18.142 13.801C17.762 13.801 16.497 14.054 16.497 15.826V21.778H12.572V10.888H16.497V12.408C17.002 11.522 18.015 10.888 19.914 10.888C21.814 10.888 23.334 12.408 23.334 15.826V21.778H23.333Z"></path>
        </g>
        <defs>
          <clipPath id="clip0_3302_57044">
            <rect width="28" height="28" fill="white"></rect>
          </clipPath>
        </defs>
      </svg>
    </a>
<a href="mailto:?subject=<?php the_title(); ?>&amp;body=Article:<?php echo get_the_permalink(); ?>" class="social-link" target="_blank" rel="nofollow noopener noreferrer">
      <svg width="28" height="28" class="mail h-p-0-lg h-mb-3-lg" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
        <path d="M2.8 3.00001C2.12163 2.99621 1.4654 3.24121 0.955496 3.68864C0.445591 4.13608 0.117389 4.7549 0.033 5.42801L14 14L27.967 5.42801C27.8826 4.7549 27.5544 4.13608 27.0445 3.68864C26.5346 3.24121 25.8784 2.99621 25.2 3.00001H2.8ZM0 8.15901V22.25C0 23.77 1.253 25 2.8 25H25.2C26.747 25 28 23.77 28 22.25V8.15901L14.741 16.296C14.5178 16.4323 14.2615 16.5043 14 16.5043C13.7385 16.5043 13.4822 16.4323 13.259 16.296L0 8.16001V8.15901Z"></path>
      </svg>
    </a>

Cách viết shortcode Visua Composer

function smo_custom_slider_service_shortcode($atts = []){
	$atts = shortcode_atts([
		'list_service' => [],
	],$atts);
	ob_start();
	$list_service = vc_param_group_parse_atts($atts['list_service']);
	
	if(is_array($list_service) && !empty($list_service)):
	?>
	<div class="smo-list-service-wrapper-container">
		<div class="list-service-deskop">
			<div class="list-service-row">
				<?php
					foreach ($list_service as $key => $value) {
				?>
				<div>
					<a class="rst-item-service" href="<?php echo $value['link']; ?>">
						<?php echo $value['title']; ?>
					</a>
				</div>	
				<?php
					}
				?>
			</div>
		</div>
		<div class="list-service-mobile">
			<div class="swiper list_service_slider"> 
				<div class="swiper-wrapper">
				<?php
					foreach ($list_service as $key => $value) {
				?>
				<div class="swiper-slide">
					<a class="rst-item-service" href="<?php echo $value['link']; ?>">
						<?php echo $value['title']; ?>
					</a>
				</div>
				<?php
					}
				?>
				</div>
			</div>
		</div>
	</div>
	<?php	
	endif;
	return ob_get_clean();
}
add_shortcode('smo_custom_slider_service','smo_custom_slider_service_shortcode');

add_action( 'vc_before_init', 'smo_custom_slider_service_map' );
function smo_custom_slider_service_map(){
	vc_map( array(
	  "name" => __( "Custom Service"),
	  "base" => "smo_custom_slider_service",
	  "class" => "",
	  "category" => __( "SMO"),
	  "params" => array(
		 array(
		  "type" => "param_group", 
		  'param_name' => 'list_service', 
		  "heading" => __( "List Service"),
		  'params' => array(
		  	 
			 array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Title',
				  'param_name' => 'title',
		     ), 
			  array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Link',
				  'param_name' => 'link',
		     ), 
		  ),
		 )
	  )
 ) );
}
function smo_custom_slider_key_figures_shortcode($atts = []){
	$atts = shortcode_atts([
		'list_key_figures' => [],
	],$atts);
	ob_start();
	$key_figures = vc_param_group_parse_atts($atts['list_key_figures']);
	shuffle($key_figures);
	if(is_array($key_figures) && !empty($key_figures)):
	?>
	<div class="smo-list-key-figures-wrapper-container">
		<div class="swiper list_key_figures_slider"> 
			<div class="swiper-wrapper">
			<?php
				foreach ($key_figures as $key => $item) {
			?>
				
				<div class="swiper-slide">
			<div class=" rst-item-key-figures">
				<div class="rst-item-key-figures-value counter">
					<?php echo $item['value']; ?>
				</div>
				<p class="rst-item-key-figures-label"><?php echo $item['label']; ?></p>
			</div>
					</div>
			<?php
				}
			?>
			</div>
		</div>
	</div>
	<?php	
	endif;
	return ob_get_clean();
}
add_shortcode('smo_custom_slider_key_figures','smo_custom_slider_key_figures_shortcode');

add_action( 'vc_before_init', 'smo_custom_slider_key_figures_map' );
function smo_custom_slider_key_figures_map(){
	vc_map( array(
	  "name" => __( "Key Figures"),
	  "base" => "smo_custom_slider_key_figures",
	  "class" => "",
	  "category" => __( "SMO"),
	  "params" => array(
		 array(
		  "type" => "param_group", 
		  'param_name' => 'list_key_figures', 
		  "heading" => __( "List Key Figures"),
		  'params' => array(
		  	 
			 array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Value',
				  'param_name' => 'value',
		     ), 
			  array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Label',
				  'param_name' => 'label',
		     ), 
		  ),
		 )
	  )
 ) );
}

function smo_custom_slider_teams_shortcode($atts = []){
	$atts = shortcode_atts([
		'list_teams' => [],
	],$atts);
	ob_start();
	$list_teams = vc_param_group_parse_atts($atts['list_teams']);
	
	if(is_array($list_teams) && !empty($list_teams)):
	?>
	<div class="smo-list-team-wrapper-container">
		<div class="swiper list_teams_slider"> 
			<div class="swiper-wrapper">
			<?php
				foreach ($list_teams as $key => $item) {
			?>
			<div class="swiper-slide rst-item-team">
				<div class="rst-team-avatar">
					<img src="<?php echo wp_get_attachment_url($item['avatar']) ?>" alt="" />
					<div class="rst-team-avatar-description">
						<?php echo $item['description']; ?>
					</div>
				</div>
				<div class="rst-team-info">
					<h4>
						<?php
							if($item['fname']){
						?>
						<span><?php echo $item['fname']; ?></span>
						<?php
							}
						?>
						<?php echo $item['lname']; ?>
					</h4>
					<div class="rst-team-info-social">
					<?php
						if($item['email']){
					?>
						<div class="rst-team-info-email">
							<a href="mailto:<?php echo $item['email']; ?>"><span class="rst-team-info-icon"><svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
							<g clip-path="url(#clip0_512_950)">
							<path opacity="0.986" fill-rule="evenodd" clip-rule="evenodd" d="M1.87755 1.73525C8.95951 1.7264 16.0415 1.73525 23.1234 1.76181C23.2665 1.7984 23.3976 1.86037 23.5169 1.94771C20.2798 5.47028 17.0339 8.98467 13.7792 12.491C12.9267 13.2346 12.0743 13.2346 11.2218 12.491C7.98412 8.99429 4.7464 5.49753 1.5087 2.00083C1.47488 1.95665 1.48308 1.92124 1.53329 1.8946C1.65705 1.85052 1.7718 1.7974 1.87755 1.73525Z" fill="white"/>
							<path opacity="0.974" fill-rule="evenodd" clip-rule="evenodd" d="M0.647542 2.79724C0.69928 2.78933 0.74846 2.79814 0.795083 2.8238C3.31215 5.53339 5.82033 8.25106 8.31967 10.9769C5.82033 13.7028 3.31215 16.4204 0.795083 19.13C0.74846 19.1557 0.69928 19.1645 0.647542 19.1566C0.601839 18.9639 0.560852 18.7692 0.524591 18.5723C0.491803 13.5087 0.491803 8.44509 0.524591 3.3815C0.560852 3.18461 0.601839 2.98989 0.647542 2.79724Z" fill="white"/>
							<path opacity="0.974" fill-rule="evenodd" clip-rule="evenodd" d="M24.2053 2.79736C24.2544 2.79736 24.3036 2.79736 24.3528 2.79736C24.3985 2.99001 24.4395 3.18473 24.4757 3.38163C24.5085 8.44521 24.5085 13.5089 24.4757 18.5724C24.4395 18.7693 24.3985 18.9641 24.3528 19.1567C24.3011 19.1646 24.2519 19.1558 24.2053 19.1301C21.6882 16.4205 19.18 13.7029 16.6807 10.977C19.1899 8.24938 21.6981 5.52279 24.2053 2.79736Z" fill="white"/>
							<path opacity="0.984" fill-rule="evenodd" clip-rule="evenodd" d="M9.00869 11.827C9.06043 11.8191 9.10961 11.8279 9.15624 11.8536C9.76583 12.5475 10.4052 13.2025 11.0743 13.8188C12.1644 14.4065 13.2136 14.3357 14.2218 13.6064C14.7628 13.0221 15.3038 12.4378 15.8448 11.8536C15.8939 11.8182 15.9431 11.8182 15.9923 11.8536C18.5093 14.5632 21.0175 17.2808 23.5169 20.0067C23.3976 20.0941 23.2665 20.156 23.1234 20.1926C16.0415 20.228 8.95951 20.228 1.87755 20.1926C1.76093 20.1536 1.64618 20.1093 1.53329 20.0598C1.48308 20.0331 1.47488 19.9978 1.5087 19.9536C4.0186 17.2517 6.5186 14.5429 9.00869 11.827Z" fill="white"/>
							</g>
							<defs>
							<clipPath id="clip0_512_950">
							<rect width="25" height="20" fill="white" transform="translate(0 0.975586)"/>
							</clipPath>
							</defs>
							</svg></span>
							<span class="rst-team-info-text"><?php echo $item['email']; ?></span></a>
						</div>
						<?php
							}
						?>
						<?php
							if($item['phone']){
						?>
						<div class="rst-team-info-phone">
							<a href="tell:<?php echo $item['phone']; ?>">
							<span class="rst-team-info-icon"><svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path opacity="0.989" fill-rule="evenodd" clip-rule="evenodd" d="M6.13618 0.983333C6.72752 0.933604 7.20612 1.12328 7.57201 1.55236C8.58955 2.82768 9.47314 4.18251 10.2228 5.61687C10.3446 5.89212 10.4256 6.17663 10.4658 6.47041C10.4487 6.68685 10.3824 6.89007 10.267 7.08009C9.75677 7.5901 9.20453 8.05752 8.61023 8.48234C9.69006 11.2032 11.7076 13.0661 14.6628 14.071C15.0011 13.7258 15.3325 13.3736 15.6568 13.0143C15.9678 12.6444 16.3727 12.4277 16.8718 12.3639C17.5921 12.4923 18.2695 12.7294 18.904 13.0752C20.0589 13.691 21.1781 14.3549 22.2617 15.0668C22.8562 15.5282 22.9813 16.0769 22.6372 16.713C22.0146 17.4755 21.3004 18.1596 20.4945 18.7655C19.6539 19.43 18.7409 19.999 17.7554 20.4726C17.0173 20.494 16.2957 20.3992 15.5906 20.1881C13.8497 19.6718 12.2298 18.9402 10.7308 17.9933C7.20254 15.7501 4.50025 12.8575 2.62392 9.31557C2.16625 8.36398 1.84227 7.37493 1.65197 6.34848C1.62252 6.11814 1.62252 5.88785 1.65197 5.65751C2.62991 3.99854 3.90375 2.55564 5.47349 1.32882C5.68423 1.1914 5.90512 1.07624 6.13618 0.983333Z" fill="white"/>
							</svg></span>
							<span class="rst-team-info-text"><?php echo $item['phone']; ?></span></a>
						</div>
						<?php
							}
						?>
					</div>
				</div>
			</div>
			<?php
				}
			?>
			</div>
		</div>
	</div>
	<?php	
	endif;
	return ob_get_clean();
}
add_shortcode('smo_custom_slider_teams','smo_custom_slider_teams_shortcode');

add_action( 'vc_before_init', 'smo_custom_slider_teams_map' );
function smo_custom_slider_teams_map(){
	vc_map( array(
	  "name" => __( "List Teams"),
	  "base" => "smo_custom_slider_teams",
	  "class" => "",
	  "category" => __( "SMO"),
	  "params" => array(
		 array(
		  "type" => "param_group", 
		  'param_name' => 'list_teams', 
		  "heading" => __( "List Teams"),
		  'params' => array(
		  	 array(
				  'type' => 'attach_image',
				  'value' => '',
				  'heading' => 'Avatar',
				  'param_name' => 'avatar',
		     ),
			 array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'First Name',
				  'param_name' => 'fname',
		     ), 
			 array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Last Name',
				  'param_name' => 'lname',
		     ), 
			  array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Email',
				  'param_name' => 'email',
		     ), 
			  array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Phone',
				  'param_name' => 'phone',
		     ),
			 array(
				  'type' => 'textarea',
				  'value' => '',
				  'heading' => 'Description',
				  'param_name' => 'description',
		     ),
		  ),
		 )
	  )
 ) );
}

Browse more snippets >>