How to make dynamic slider from static html slider in WordPress

Posted By : Satyam Sharma | 23-Dec-2018

wordpress

Introduction

In this blog, I will show you how to make a dynamic slider in WordPress using HTML static slider. When we are making any WordPress websites then sometimes we will not satisfied with slider plugin functionality or sometimes we liked an HTML slider but we didn't found any slider plugin which would be able to create that kind of slider. So, In that case, we should not have to worry because in this post I will show you how we can use that HTML static slider in WordPress and also make it dynamic for putting any kind of image what we want.

Here I am taking a bootstrap HTML slider code for showing you the example. So for creating slider just follow the given steps

Step 1:

For creating the slider first we need to select any HTML slider and paste that slider into our WordPress PHP file like you can put the code into header file or custom template file or wherever you want.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Los Angeles</h3>
        <p>LA is always so much fun!</p>
      </div>
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</p>
      </div>
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>We love the Big Apple!</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Step 2:
Now here I am cutting the other slide code and leave there for only first slider code because here we will using the WordPress loop method for the show all slides.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="la.jpg" alt="Los Angeles" style="width:100%;">
        <div class="carousel-caption">
          <h3>Los Angeles</h3>
        </div>
      </div>

    
      
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Step 3:
Now the third step is creating a custom post type by giving the name of the Slider. We are creating it because we have to give the options for change slide images or text from WordPress backend. So for creating the custom post type we are using a WordPress custom post type function which name is register_post_type by passing the required parameter in it. we are putting this code into WordPress functions.php file.

function custom_dynamic_slider() {
  register_post_type( 'dynamic_slider',
    array(
      'labels' => array(
        'name' => __( 'Slider' ),
        'singular_name' => __( 'Slide' )
      ),
      'public' => true,
      'has_archive' => true,
    )
  );
}
add_action( 'init', 'custom_dynamic_slider' );

Step 4:
After creating the custom_post_type with the name of slider make some post in the backend in slider post type and also put the image in set featured image options.

Step 5:
Now, this is the final and very important step because in this step we are making the slider dynamic after that step you can customize slider texts and images my own. So follow this step carefully.

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
<?php

$args = array( 'post_type' => 'dynamic_slider', 
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); 
?>
<div class="item active">
        <?php the_post_thumbnail();?>
        <div class="carousel-caption">
          <h3><?php the_title(); ?></h3>
        </div>
      </div>
<?php
 
endwhile;
?>
      

    
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

In the above code, we have put our item class in WordPress while loop for our dynamic slider post type. which will help to call all post one by one and showing them as a slide

Note: Just remove the active class from the item and use a jquery method for putting active class only for the first item in the slider.

Overview

So overall if look the code we will not find any hard code which could make any confusion in your mind to understand. We just have put an HTML static slider code then we made a dynamic slider post type in wp backend panel than called them in while loop. So overall it's not much difficult if you have followed these steps properly then you can make any HTML static slider dynamic