Schema Markup Testimonial Slider CDN Support

So you’re wanting to add Schema Markup to your website.

Many people might be asking what is Schema Markup?

Schema markup is code (semantic vocabulary) that you put on your website to help the search engines return more informative results for users. If you’ve ever used rich snippets, you’ll understand exactly what schema markup is all about. Here’s an example of a local business that has markup on its event schedule page.

But we don’t want any Schema we want the review schema as our testimonial slider will have reviews regarding a product or service so integrating schema markup would be very beneficial to us.

So how do we go about adding schema markup to our existing testimonials slider?, Well we could Modify modify the plug-in and add the schema markup that way but that would mean you wouldn’t be able to update the plugin as your alterations would be removed and not doing updates could cause problems.

We could use a schema WordPress plug-in that adds schema markup to our website, but it doesn’t always cover reviews, this might be in the works for the developer, or it could be a paid extension that he might bring out.

Or we can make our own testimonial slider plugin…but to save time, I have already developed a simple testimonial slider plugin which you can use that has schema markup already implemented.

The plugin also has a built-in post type called testimonials where you can add all your testimonials and it will show on your site through the use of a shortcode on any page you wish.

If you just want the plugin you can get it here, or if you want to implement it yourself then follow the steps below.

The slider takes advantage of slick slider JS library, Which is an incredibly useful and responsive slider, you will need to download the files to your computer to get started.

Step 1: Enqueue Styles & Scripts

function testimonialSlidescripts() { 
	//CDN Update
	wp_enqueue_script( 'testimonial_slick_slider_js', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js', array('jquery'), time());	
	wp_enqueue_style( 'testimonial_slider_slick_css', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css', array(), time());
	wp_enqueue_style( 'testimonial_slider_slick_theme_css', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css', array(), time());
	
	wp_enqueue_script( 'testimonial_slider_config_js', plugin_dir_url( __FILE__ ) . 'slider-config.js',array('jquery'), time());
	wp_enqueue_style( 'testimonial_slider_slick_custom_css', plugin_dir_url( __FILE__ ) . 'custom.css', array(), time());
}
add_action('wp_enqueue_scripts', 'testimonialSlidescripts');

Step 2: Add the Testimonial Post Type

function testimonial_post_type() {
   
   // Labels
	$labels = array(
		'name' => _x("Testimonials", "post type general name"),
		'singular_name' => _x("Testimonial", "post type singular name"),
		'menu_name' => 'Testimonials',
		'add_new' => _x("Add New", "testimonial item"),
		'add_new_item' => __("Add New Testimonial"),
		'edit_item' => __("Edit Testimonial"),
		'new_item' => __("New Testimonial"),
		'view_item' => __("View Testimonial"),
		'search_items' => __("Search Testimonials"),
		'not_found' =>  __("No Testimonials Found"),
		'not_found_in_trash' => __("No Testimonials Found in Trash"),
		'parent_item_colon' => ''
	);
	
	// Register post type
	register_post_type('testimonial' , array(
		'labels' => $labels,
		'public' => true,
		'has_archive' => false,
		'menu_icon' => 'dashicons-format-status',
		'rewrite' => false,
		'supports' => array('title', 'editor','custom-fields','thumbnail')
	) );
}
add_action( 'init', 'testimonial_post_type', 0 );

Step 3: Add the Slider Shortcode

	function testimonial_slider_function() {

	$args = array(
	    'post_type'=> 'testimonial',
	    'order'    => 'rand'
	);     
	$the_query = new WP_Query( $args );
	$return = '';
	if($the_query->have_posts() ) : 
			
			
		$return .='<div class="slider slickslider">';

			while ( $the_query->have_posts() ) : $the_query->the_post();

			$return .='<div class="slick-slide">';
               $return .=' <!-- START REVIEW SCHEMA /-->';
				$return .='<div itemscope itemtype="http://schema.org/Review">';
					$return .='<!-- COMPANY NAME /-->';
					$return .='<div itemprop="name" style="display: none;">';
							$return .='<strong> ** COMPANY NAME OR ITEM REVIEW HERE ** </strong>';
					$return .='</div>';
					$return .='<!-- ITEM REVIEWED /-->';
					$return .='<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing">';
						$return .='<span style="display: none;" itemprop="name"> ** COMPANY NAME OR ITEM REVIEW HERE ** </span>';
					$return .='</div>';
					
					$return .='<!-- REVIEW TITLE /-->';
					$return .='<div itemprop="description">';
						$return .='<h3>'. get_the_title().'</h3>';
					$return .='</div>';
					
					$return .='<!-- REVIEW BODY /-->';
					$return .='<div itemprop="reviewBody">';
						$return .='<p>'. get_the_content().'</p>';
					$return .='</div>';
					
					$return .='<!-- REVIEW AUTHOR /-->';
					$return .='<div itemprop="author" itemscope itemtype="http://schema.org/Person">';
						$return .='<span style="display: none;" itemprop="name">'. get_post_meta(get_the_ID(), 'testimonial_author', true).'></span>';
					$return .='</div>';
					
					$return .='<!-- REVIEW PUBLISH DATE /-->';
					$return .='<div style="display: none;">';
						$return .='<meta itemprop="datePublished" content="'. get_the_date( 'Y/m/d' ).'">Date published: '. get_the_date( 'Y/m/d' );
					$return .='</div>';
					
					$return .='<!-- REVIEW RATING /-->';
					$return .='<div style="display: none;" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">';
						$return .='<meta itemprop="worstRating" content="0"><span itemprop="ratingValue">5</span> / <span itemprop="bestRating">5</span> stars';
					$return .='</div>';
                    $return .='<!-- END REVIEW SCHEMA /-->';
				$return .='</div>';
			$return .='</div>';
	
			endwhile;
			wp_reset_postdata(); 
		$return .='</div>';
	endif;
	
	return $return;
	 
}
add_shortcode( 'testimonialshortcode', 'testimonial_slider_function' );

Step 4: Add slider config js

jQuery(function($){
	$(document).ready(function(){
		  $('.slickslider').slick({
				infinite: true,
				speed: 300,
				slidesToShow: 1,
				autoplay: true,
				autoplaySpeed: 7000,
		  });
	});
});

Step 5 Add CSS sheet.

Create a file called custom.css in the root of your plugin directory and begin adding your styles, to customise the slider the way you want.

And that’s it activate the plugin and use the shortcode

[testimonialshortcode]

anywhere on the site to show the slider.

If you have any problems or questions let me know in the comments and i’ll be happy to assist.

Please share and like this post 🙂

**21/05/2019 – Corrected Issue with shortcode as its supposed to be a return value.

**16/03/2020 – Updated For CDN Support