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>
/******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>
Thanks boss
ReplyDelete