Divi Theme Tutorial – Add Blog Post Carousel or Custom Post Carousel

In Divi theme there are options to show grid system Blog Posts but they didn’t have any option for the blog post carousel. In this article I will show you how you can make a Blog Post carousel in Divi or Any Other WordPress 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 blog post to show. 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_news($content = null, $atts){
		
		// the query
		$the_query = new WP_Query('post_type=post&showposts=4');
		
		if ($the_query->have_posts()):?>

			<div id="news_list_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="news_lists">
					<div class="news_featured_image">
						<?php the_post_thumbnail('news-thumb'); ?>
					</div>
					<div class="news_content">
						<h4><?php the_title(); ?></h4>
						<div class="news_exceprt_cont">
							<?php the_excerpt(); ?>
						</div>
						<a href="<?php the_permalink(); ?>">Read more</a>
					</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('news', 'add_news');

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 dk_carousel_script() {
?> 
<?php ?>
    <script type="text/javascript">
        jQuery(window).load(function(){
          jQuery("#news_list_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', 'dk_carousel_script', 99);

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

Here are some CSS code to make the carousel looks better. You can use the CSS code, you can use your own CSS code or you can also customize the below code. If you wants to us the below CSS code please copy and paste it on child theme style.css file.

.news_lists{
	display: block;
	background: #fff;
	color: #000;
}
.news_featured_image, .news_featured_image img{
	display: block;
	overflow:hidden;
}
.news_content{
	display: block;
	overflow: hidden;
	padding: 35px 20px;
	background: #fff;
}
.news_content h4{
	text-transform: capitalize;
	margin-bottom: 15px;
    font-size: 24px;
    line-height: 1.3;
}
.news_exceprt_cont{
	margin-bottom: 15px;
    font-size: 18px;
    line-height: 1.25;
}
.news_content a{
	position: relative;
    font-size: 16px;
	color: #f9525d;
}
.news_content a:after{
	position: absolute;
    background: #f9525d;
	bottom: -5px;
    width: 100%;
    content: "";
    height: 1px;
    left: 0;
}
.owl-dots{
	text-align: center;
}
.owl-carousel .owl-dot{
	width: 15px;
    height: 2px;
    background: #444;
    display: inline-block;
    margin: 0 3px;
}
.owl-carousel .owl-dot.active{
	background: #f9525d;
}

I used this method many times in my work and every time this works great. Though if you found any issue or face any problem using this code please let me know so that I can help you and also can improve the code.

Leave a Reply

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