Divi Theme Tutorial – Add Testimonial Carousel

Divi is a popular WordPress Theme but it has some limitations like Testimonial Carousel. In Divi theme there is no sliding testimonial options and also there is no post type testimonial. That’s why you need to add testimonials separately in all pages. And if you need to change or update new testimonials you also need to do this in all pages.

Here I am showing you how you can add sliding testimonial or testimonial carousel in Divi Theme using Owl Carousel.

First of all you need to create a child theme of your current activated theme. This is always a good practice because if you work on child theme then there will be no risk to loose anything after Update of the parent theme. You can use a WordPress plugin to create the child theme or you can create it by your own.

Download the Owl Carousel jQuery plugin. Then you need to create a folder named ‘assets’ in your child theme directory. You can do this via login to your cPanel or login via FTP or you can also use WordPress plugin named File Manager. But I will recommend to use cPanel or FTP.

Under ‘assets’ folder please create two more folder named ‘css’ and ‘js’. Maybe you don’t want to create these folders that is okay but I am doing this because I want everything well organized and also this is a good practice. Now we need to upload the Owl Carousel files in our assets folder. We need to only upload the below files in the mentioned directory on child theme.

  1. owl.carousel.min.css (Upload it to ‘assets/css’)
  2. owl.theme.default.css (Upload it to ‘assets/css’)
  3. owl.carousel.min.js (Upload it to ‘assets/js’)

Okay now we need to enqueue this scripts in our child theme functions.php file. Open the functions.php file from child theme to edit and add the below code. Please change the ‘your-child-theme’ with your child theme name.

/**** Add owl Carousel ***/
function dk_owlc_assets() {
    // Load Google jQuery
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', false, '1.12.4');
    wp_enqueue_script('jquery');
 
    // Owl Carousel 2
    wp_enqueue_style( 'owlcarousel_css', '/wp-content/themes/your-child-theme/assets/css/owl.carousel.min.css' );
	wp_enqueue_style( 'owlcarousel_default_css', '/wp-content/themes/your-child-theme/assets/css/owl.theme.default.min.css' );
    wp_enqueue_script('owl_carousel_js', '/wp-content/themes/your-child-theme/assets/js/owl.carousel.min.js', true, '2.3.4');
}
add_action( 'wp_enqueue_scripts', 'dk_owlc_assets', 15);

So we are done with adding the Owl Carousel in our WordPress Theme. Now we need to create the shortcode for the testimonial carousel or sliding testimonial to show it on website. This is basically the structure of the testimonial. Below the code for the shortcode. Add the code in functions.php file and you can change the content structure according to your need.

// function to add blog shortcode
function add_testimonial($content = null, $atts){
	
	// the query
	$the_query = new WP_Query('post_type=testimonial&showposts=1');
	
	if ($the_query->have_posts()):?>

		<div id="testimonial_carousel">
		
			<?php
			while ($the_query->have_posts()) : $the_query->the_post(); ?>

			<!-- Start of the loop -->

			//You can change the structure according to your need.
			<div class="testimonial_lists">
				<div class="testimonial_featured_image">
					<?php the_post_thumbnail('testimonial-thumb'); ?>
				</div>
				<div class="testimonial_content">
					<h4><?php the_title(); ?></h4>
					<?php the_content(); ?>
				</div>
			</div>

			<?php endwhile; ?>

			<!-- end of the loop -->

			</div>

		<?php wp_reset_postdata(); 

	else :?>
	<p><?php esc_html_e('Sorry, no posts matched your criteria.'); ?></p>
	<?php endif;
}

add_shortcode('ntestimonial', 'add_testimonial');

If you wants to show 2 or more testimonials in one slide you can do that by change the showpost parameter from the shortcode php code

$the_query = new WP_Query('
		post_type=testimonial&showposts=1'
	);

We are almost done. Now we need to add the carousel script for working carousel blog post. Copy and paste the below code on functions.php file to get a working blog post carousel.

/*** Carousel script ***/
function nn_testimonial_script() {
?> 
<?php ?>
    <script type="text/javascript">
        jQuery(window).load(function(){
          jQuery("#testimonial_carousel").addClass('owl-carousel').owlCarousel({
            items: 3,
            margin: 10,
            autoplay: true,
			loop: true,
			center: true,
			smartSpeed: 500,
			dots: true,
          });
        })
    </script>
<?php ?>
    <?php
}
add_action('wp_footer', 'nn_testimonial_script', 99);

We are all done with integrating the testimonial carousel. Now we need to show the testimonial carousel using the shortcode we created. To show the carousel we just created use ‘[ntestimonial]’ shortcode where you wants to show the carousel.

You can style the testimonial carousel like you want. CSS is up to you. Hope this help you. If you need any other help please comments below.

Thanks.

Leave a Reply

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