Custom Post Type Slider Using Owl Carousel In WordPress

In this article, we are going to learn how we can implement the custom post-type slider using owl carousel js.

First of all, we need to include the owl carousel min js file in your code to integrate the functionality of the owl carousel.

wp_enqueue_script( 'owl-js', 'https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js', array( 'jquery' ) );

Here I have created a custom post type named ‘portfolio’.

So I am going to make a custom slider for the portfolio post type using the shortcode in WordPress.

Now you need to create the custom shortcode to get all the posts from the portfolio post type.

Here is the reference code which you need to add to the functions.php file.

function custom_portfolio_shortcode() {
  $args = array(  
        'post_type' => 'portfolio',
        'post_status' => 'publish'
    );
    $loop = new WP_Query( $args );
  ?> <div class="testimonial-slider-wrap owl-carousel"> <?php
  while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <div class="column">
      <div class="post-thumbnail">
        <?php echo get_the_post_thumbnail( get_the_ID(), 'large' ); ?>
      </div>
      <div class="title">
        <h4><?php echo the_title(); ?></h4>
      </div>
      <div class="content">
        <?php the_content(); ?>
      </div>
    </div>
  <?php endwhile; ?>
  </div>
  <?php
  wp_reset_postdata();
}
add_shortcode('portfolios','custom_portfolio_shortcode');

After the creation of the shortcode try to check you are getting the field or not. put it on the page like [portfolios]

Now you need to convert your grid list of post types into the slider.

For that kindly add the code for it. here I have added code in the Script.js file.

jQuery(document).ready(function() { 	
  jQuery('.testimonial-slider-wrap').owlCarousel({
    loop: false,
    margin: 28,
    nav: true,
    responsive:{
      0:{
        items:1
      },
      600:{
        items:3
      },
      1000:{
        items:3
      }
    }
  })
})

Then you need to include the Script.js in the function file.

Here is the full source code of the functions.php file.

// Define Physical Path of script
add_action('wp_enqueue_scripts', 'callback_for_setting_up_scripts');
function callback_for_setting_up_scripts() {
  wp_enqueue_script( 'script-js', get_stylesheet_directory_uri().'js/script.js',array(), '' );
    wp_enqueue_script( 'owl-js', 'https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js', array( 'jquery' ) );
}

/* Custom Post Type Slider */
function custom_portfolio_shortcode() {
  $args = array(  
        'post_type' => 'portfolio',
        'post_status' => 'publish'
    );
    $loop = new WP_Query( $args );
  ?> <div class="testimonial-slider-wrap owl-carousel"> <?php
  while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <div class="column">
      <div class="post-thumbnail">
        <?php echo get_the_post_thumbnail( get_the_ID(), 'large' ); ?>
      </div>
      <div class="title">
        <h4><?php echo the_title(); ?></h4>
      </div>
      <div class="content">
        <?php the_content(); ?>
      </div>
    </div>
  <?php endwhile; ?>
  </div>
  <?php
  wp_reset_postdata();
}
add_shortcode('portfolios','custom_portfolio_shortcode');

Review the video of working functionality for the custom slider.

Hope you guys have learned something.

Thanks.