How I Create Custom Post Type Slider

August 2, 2017

This tutorial I will show you how to create your very own custom image slider using custom post types.  In this article, we will share how to create a WordPress slider for custom post types. There is a great slider by flexslider personally I use it on all my sites and you can use it without a plugin. Download the slider from that link i provided.

Now copy the flexslider.css file and jquery.flexslider-min.js file into your theme folder.

Now in your header.php you paste below code that i given

<link rel="stylesheet" href="<YOUR_THEME_LINK>/flexslider.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="<YOUR_THEME_LINK>/jquery.flexslider-min.js"></script>
<script type="text/javascript">(function($) {
    $(window).load(function() {
        $('#slider .flexslider').flexslider({
               animation: 'slide',
                slideshowSpeed: 9000,
                animationSpeed: 900,
                pauseOnAction: true,
                pauseOnHover: true,
                controlNav: false,
                directionNav: true, 
                controlsContainer: ".flexslider",
        });
    });
})(jQuery)</script>

in your homepage file (or anywhere you want the slider to show) paste below code that i given
<section id="slider">
      <div class="flexslider">
        <ul class="slides">
        <?php query_posts(array('post_type' => '<YOUR_CUSTOM_POST_TYPE>','orderby' => 'rand')); if(have_posts()) : while(have_posts()) : the_post();?>
            <li class="slide">
            <?php the_title(); ?>
            <?php the_excerpt(); ?>
            <?php the_post_thumbnail(); ?>
          </li>
        <?php endwhile; endif; wp_reset_query(); ?>
        </ul>
    </div>
</section>
 

​Leave a Comment