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.
- owl.carousel.min.css (Upload it to ‘assets/css’)
- owl.theme.default.css (Upload it to ‘assets/css’)
- 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.
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.
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.
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.
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.