Wednesday, 5 August 2015

How to make Bootstrap Carousel Dynamic in WordPress


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


<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>

  <!-- Wrapper for slides -->
    <div class="item active">
      <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/slide1.jpg" alt="...">
      <div class="caro-caps">
        <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 class="carousel-inner">

      '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>

wp_reset_query();  // Restore global post data stomped by the_post().

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

<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"]'); ?>


1 comment:

Alternative content