Title: Creating a Shortcode for Twitter Bootstrap Carousel (Slideshow)
Last modified: August 20, 2016

---

# Creating a Shortcode for Twitter Bootstrap Carousel (Slideshow)

 *  Resolved [Jo Sprague](https://wordpress.org/support/users/josiahsprague/)
 * (@josiahsprague)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/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)

 *  [bythegram](https://wordpress.org/support/users/bythegram/)
 * (@bythegram)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/creating-a-shortcode-for-twitter-bootstrap-carousel-slideshow/#post-3087638)
 * use get_the_post_thumbnail, get_the_title and get_the_excerpt instead.
 *     ```
       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">'.get_the_post_thumbnail($post->ID,'large').'<div class="carousel-caption">
           <h4>'.get_the_title().'</h4>
           <p>'.get_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');
       ```
   
 *  Thread Starter [Jo Sprague](https://wordpress.org/support/users/josiahsprague/)
 * (@josiahsprague)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/creating-a-shortcode-for-twitter-bootstrap-carousel-slideshow/#post-3087658)
 * That was it! Thanks!
 *  [bythegram](https://wordpress.org/support/users/bythegram/)
 * (@bythegram)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/creating-a-shortcode-for-twitter-bootstrap-carousel-slideshow/#post-3087659)
 * No prob! I’m be curious to see where you go with it, please post a link to the
   final product ( will this be a plugin? ). Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Creating a Shortcode for Twitter Bootstrap Carousel (Slideshow)’ is closed
to new replies.

## Tags

 * [shortcode](https://wordpress.org/support/topic-tag/shortcode/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 3 replies
 * 2 participants
 * Last reply from: [bythegram](https://wordpress.org/support/users/bythegram/)
 * Last activity: [13 years, 8 months ago](https://wordpress.org/support/topic/creating-a-shortcode-for-twitter-bootstrap-carousel-slideshow/#post-3087659)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics