Wednesday, 5 August 2015

How to make Bootstrap Carousel Dynamic in WordPress

/**********functions.php*********/

/******slider in dashboard***********/
function my_custom_sliders_posttype(){
   $args = array(
   'labels'=> array( 'name'=>'sliders',
       'singular_name'=> 'slider',
       'menu_name'=>'sliders',
       'name_admin_bar'=> 'sliders',
       'all_items' =>'View all sliders',
       'add_new'=> 'Add New sliders' ),
   'description' =>"This post type is for sliders",
   'public' => true,
   'exclude_from_search'=>false,
   'publicly_queryable'=> true,
   'show_ui' => true,
   'show_in_menu'=> true,
   'show_in_admin_bar'=> true,
   'menu_position'=>6,
   'capability_type'=> 'page',
   'supports'=> array( 'title', 'editor', 'author', 'thumbnail', 'excerpt',
    ),
   'query_var'=>true,
  );
  register_post_type( "sliders", $args );
 }
 add_action("init","my_custom_sliders_posttype");
/******./slider in dashboard***********/














<!---------Index.HTML--------->


<div class="wide-box-holder slider">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <!--
    <div class="item active">
      <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/slide1.jpg" alt="...">
      <div class="caro-caps">
<h2>BOND / EXIT CLEAN SPECIALISTS</h2>
        <p>Moving Out? We can save you time and moneyby providing you
with bond cleaning, carpet cleaning and pest control
services at a discounted price</p>
<div class="lnk-btn more-btn"><a href="#">More Details</a></div>
      </div>
    </div>
    -->
   
   
   
<div class="carousel-inner">
               <?php
 $class_active="active";

 $args=array(
      'post_type'=> 'sliders',
      'post_status' => 'publish',
      'posts_per_page' => 3,
 
     );
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
             
                <div class="item <?php echo $class_active ;?>">
                 <?php the_post_thumbnail('full'); ?>

<div class="container">
                 <div class="caro-caps">
                  <h2> <?php the_title(); ?> </h2>
                  <p> <?php the_content();?> </p>
<div class="lnk-btn more-btn"><a href="#">More Details</a></div>
              </div>
            </div>
           
                  </div>
                   <?php

 $class_active="";
  endwhile;
}
wp_reset_query();  // Restore global post data stomped by the_post().
?>
                 
 
                </div>


  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>


<div class="container">
<div class="ask-form col-sm-4">
    <h3>Ask free Question</h3>
        <?php echo do_shortcode('[contact-form-7 id="16" title="ask-form"]'); ?>
    </div>
</div>

</div>

1 comment:

Alternative content