Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save jeffsmonteiro/c5f3d949d80ba0954fdeeed00fc6c757 to your computer and use it in GitHub Desktop.

Select an option

Save jeffsmonteiro/c5f3d949d80ba0954fdeeed00fc6c757 to your computer and use it in GitHub Desktop.
Wordpress Bootstrap Slider
<?php
// Add in functions
// add_theme_support( 'post-thumbnails' );
// add_theme_support( 'title-tag' );
// To create slides, add a featured image on post and
// add a tag named slide
// To create a slide.php and save this gist, into theme
// subfolder named parts
// To call the slider use: get_template_part('parts/slider.php');
$slides = array();
$args = array( 'tag' => 'slide', 'nopaging'=>true, 'posts_per_page'=>5 );
$slider_query = new WP_Query( $args );
if ( $slider_query->have_posts() ) {
while ( $slider_query->have_posts() ) {
$slider_query->the_post();
if(has_post_thumbnail()){
$temp = array();
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'imbxblog-full', true);
$thumb_url = $thumb_url_array[0];
$temp['title'] = get_the_title();
$temp['excerpt'] = get_the_excerpt();
$temp['image'] = $thumb_url;
$slides[] = $temp;
}
}
}
wp_reset_postdata();
?>
<?php if(count($slides) > 0) { ?>
<div id="carousel-header" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php for($i=0;$i<count($slides);$i++) { ?>
<li data-target="#carousel-header" data-slide-to="<?php echo $i ?>" <?php if($i==0) { ?>class="active"<?php } ?>></li>
<?php } ?>
</ol>
<div class="carousel-inner" role="listbox">
<?php $i=0; foreach($slides as $slide) { extract($slide); ?>
<div class="item <?php if($i == 0) { echo 'active'; } ?>">
<div class="carousel-caption"><h3><?php echo $title; ?></h3><p><?php echo $excerpt; ?></p></div>
<!--<div class="item-blur"></div>-->
<div class="item-image" style="background-image: url(<?php echo $image ?>);">
</div>
<?php $i++; } ?>
</div>
<a class="left carousel-control" target="_blank" href="#carousel-header" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
<a class="right carousel-control" target="_blank" href="#carousel-header" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>
<?php }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment