Creating a Shortcode for Twitter Bootstrap Carousel (Slideshow)
-
I am trying to create a shortcode that I can use to create a Twitter Bootstrap Carousel that displays a slideshow of images from my WP database. At this point, how the images are stored in the database is flexible, I want to do whatever works best.
The shortcode I have created doesn’t seem to be working right… things are outputting out of the order I coded them in. For some reason, the_title() and the_excerpt are outputting before the <divs> that I have them wrapped in. Here is my code;
function bs_carousel($atts) { // Set Shortcode Attributes extract(shortcode_atts(array( 'posts' => 1, ), $atts)); // Start the Return String $return_string = '<div id="myCarousel" class="carousel slide"> <div class="carousel-inner">'; // The query $the_query = new WP_Query(array( 'category_name' => 'Home Slider', 'posts_per_page' => 1 )); // The loop while ( $the_query->have_posts() ) : $the_query->the_post(); $return_string .= '<div class="item active">'.the_post_thumbnail('large').'<div class="carousel-caption"> <h4>'.the_title().'</h4> <p>'.the_excerpt().'</p> </div> </div><!-- item active -->'; endwhile; wp_reset_postdata(); $the_query = new WP_Query(array( 'category_name' => 'Home Slider', 'posts_per_page' => $posts, 'offset' => 1 )); while ( $the_query->have_posts() ) : $the_query->the_post(); $return_string .= '<div class="item">'.the_post_thumbnail('large').'<div class="carousel-caption"> <h4>'.the_title().'</h4> <p>'.the_excerpt().'</p> </div> </div><!-- item -->'; endwhile; wp_reset_postdata(); // Finish the Return String and Clean Up $return_string .= '</div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div>'; return $return_string; } add_shortcode('carousel', 'bs_carousel');Any ideas what I’m doing wrong?
Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
The topic ‘Creating a Shortcode for Twitter Bootstrap Carousel (Slideshow)’ is closed to new replies.