Title: Trying to create shortcode/plugin for Bootstrap Carousel
Last modified: August 22, 2016

---

# Trying to create shortcode/plugin for Bootstrap Carousel

 *  [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/)
 * I am trying to create a plugin for my theme to use a custom post type “carousel-
   images” and the shortcode [carousel] to create a carousel of featured images.
 * Currently the first image shows up with the Bootstrap Carousel navigation and
   prev/next icons, but the carousel will not scroll or show any additional images.
   There are 3 posts with featured images for the carousel.
 * here is my plugin.php
 *     ```
       <?php
               /*
               Plugin Name: WP_BS_Carousel
               Description: Bootstrap Carousel Custom Post-Type
               Author: Jaycbrf4
               Version: 1.0
               /*/
   
               function wp_bs_theme_setup() {
                  add_theme_support( 'post-thumbnails' );
                   add_image_size( 'wp_bs_carousel_image', 1170, 385, true);
               }
               add_action( 'after_setup_theme', 'wp_bs_theme_setup' );
   
               // Creates Carousel Image Custom Post Type
                   add_action( 'init', 'register_wp_bs_carousel_image' );
                   function register_wp_bs_carousel_image() {
                   $labels = array(
                   'name' => _x( 'Carousel Images', 'carousel_image' ),
                   'singular_name' => _x( 'Carousel Image', 'carousel_image' ),
                   'add_new' => _x( 'Add New', 'carousel_image' ),
                   'add_new_item' => _x( 'Add New Carousel Image', 'carousel_image' ),
                   'edit_item' => _x( 'Edit Carousel Image', 'carousel_image' ),
                   'new_item' => _x( 'New Carousel Image', 'carousel_image' ),
                   'view_item' => _x( 'View Carousel Image', 'carousel_image' ),
                   'search_items' => _x( 'Search Carousel Images', 'carousel_image' ),
                   'not_found' => _x( 'No carousel images found', 'carousel_image' ),
                   'not_found_in_trash' => _x( 'No carousel images found in Trash', 'carousel_image' ),
                   'parent_item_colon' => _x( 'Parent Carousel Image:', 'carousel_image' ),
                   'menu_name' => _x( 'Carousel Images', 'carousel_image' ),
                   );
                   $args = array(
                   'labels' => $labels,
                   'hierarchical' => false,
                   'description' => 'Images for Bootsrap Carousel',
                   'supports' => array( 'title', 'editor', 'thumbnail','excerpt' ),
                   'taxonomies' => array( 'category' ),
                   'public' => true,
                   'show_ui' => true,
                   'show_in_menu' => true,
                   'menu_position' => 20,
                   'menu_icon' => 'dashicons-images-alt',
                   'show_in_nav_menus' => true,
                   'publicly_queryable' => true,
                   'exclude_from_search' => false,
                   'has_archive' => true,
                   'query_var' => true,
                   'can_export' => true,
                   'rewrite' => true,
                   'capability_type' => 'post'
                   );
                   register_post_type( 'carousel-image', $args );
                   } 
   
               function wp_bs_carousel($atts) {
                  // Set Shortcode Attributes
                  extract(shortcode_atts(array(
                     'posts' => 1,
                  ), $atts));
   
                  // Start the Return String
                  $return_string = '<div id="wp_bs_carousel" class="carousel slide carousel-fade"  data-ride="carousel">
   
                  <!-- Indicators -->
                 <ol class="carousel-indicators" >
                   <li data-target="#wp_bs_carousel" data-slide-to="0" class="active"></li>
                   <li data-target="#wp_bs_carousel" data-slide-to="1"></li>
                   <li data-target="#wp_bs_carousel" data-slide-to="2"></li>
                 </ol>
   
                <div class="carousel-inner" >';
   
                  // The query
                  $the_query = new WP_Query(array(
                  'post_type' => 'carousel-image',
                   '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,'wp_bs_carousel_image').'<div class="carousel-caption">
                   <h1>'.get_the_title().'</h1>
                   <p>'.get_the_excerpt().'</p>
                  </div>
                  </div><!-- item active -->';
                  endwhile;
                  wp_reset_postdata();
                  $the_query = new WP_Query(array(
                   'post-type' => 'carousel-image',
                   'posts_per_page' => $posts,
                   'offset' => 1
                   ));
                  while ( $the_query->have_posts() ) :
                  $the_query->the_post();
                 $return_string  .= '<div class="item">'.the_post_thumbnail('wp_bs_carousel_image').'<div class="carousel-caption">
                   <h1>'.the_title().'</h1>
                   <p>'.the_excerpt().'</p>
                  </div>
                  </div><!-- item -->';
                  endwhile;
                  wp_reset_postdata();
   
                  // Finish the Return String and Clean Up
                  $return_string .= '</div>
   
                    <!-- Controls -->
                 <a class="left carousel-control" href="#wp_bs_carousel" 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" href="#wp_bs_carousel" role="button" data-slide="next">
                   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                   <span class="sr-only">Next</span>
                 </a>
               </div>';
   
                  return $return_string;
               }
   
               add_shortcode('carousel', 'wp_bs_carousel');
   
               ?>
       ```
   

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/page/2/?output_format=md)

 *  [bythegram](https://wordpress.org/support/users/bythegram/)
 * (@bythegram)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680812)
 * One way I have done this is the past is to use a counter of sorts instead of 
   two loops:
 *     ```
       // The query
                  $the_query = new WP_Query(array(
                  'post_type' => 'carousel-image',
                   'posts_per_page' => $posts,
                   ));
                   $i = 0;
                  // The loop
                  while ( $the_query->have_posts() ) :
                     $the_query->the_post();
                       if ( $i == 0 ) {
                     $return_string .= '<div class="item active">'.get_the_post_thumbnail($post->ID,'wp_bs_carousel_image').'<div class="carousel-caption">
                   <h1>'.get_the_title().'</h1>
                   <p>'.get_the_excerpt().'</p>
                  </div>
                  </div><!-- item active -->';
                     } else {
                       $return_string .= '<div class="item">'.get_the_post_thumbnail($post->ID,'wp_bs_carousel_image').'<div class="carousel-caption">
                   <h1>'.get_the_title().'</h1>
                   <p>'.get_the_excerpt().'</p>
                  </div>
                  </div><!-- item -->';
                       }
                       $i++;
                  endwhile;
                  wp_reset_postdata();
   
                  // Finish the Return String and Clean Up
       ```
   
 * since the only difference between the first “item” of the carousel and the rest
   is the “active” class.
 * Just a note about my loop, I set the default value of $posts to -1 in order to
   show all of them, judging by your original comment you might want to set it to
   3.
 * Another issue I see with your original code is that you used the correct functions
   for the thumbnail,title and excerpt in your first loop but the incorrect ones
   in your second.
 * Finally, I took out the class “carousel-caption” while testing because my stylesheet
   was displaying it oddly but that could have just been my site.
 *  Thread Starter [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680818)
 * Thanks for the quick reply,
 * As you can see, I took the code exactly from [your post on the same subject](https://wordpress.org/support/topic/creating-a-shortcode-for-twitter-bootstrap-carousel-slideshow)
   from 2 years ago but added the custom post type.
 * I will try this out tomorrow and let you know how I made out.
 *  [bythegram](https://wordpress.org/support/users/bythegram/)
 * (@bythegram)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680819)
 * Ah well the only difference from your original code and my answer on the old 
   string is the functions that you used in your second loop.
 * Be sure to use get_the_title, get_permalink and get_the_post_thumbnail
 *  Thread Starter [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680852)
 * That worked great!
 * My only question now is, how do I adjust the indicators to allow for more that
   3 slides? I added a 4th and the indicator dots do not show up because I have 
   the 0,1,2 hardcoded. How do I use php to count the number of posts and adjust
   the indicators?
 *  [bythegram](https://wordpress.org/support/users/bythegram/)
 * (@bythegram)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680868)
 * there are a few ways you could do it I guess.
 * you could create a new variable within your while loop, something like this:
 *     ```
       <?php
               /*
               Plugin Name: WP_BS_Carousel
               Description: Bootstrap Carousel Custom Post-Type
               Author: Jaycbrf4
               Version: 1.0
               /*/
   
               function wp_bs_theme_setup() {
                  add_theme_support( 'post-thumbnails' );
                   add_image_size( 'wp_bs_carousel_image', 1170, 385, true);
               }
               add_action( 'after_setup_theme', 'wp_bs_theme_setup' );
   
               // Creates Carousel Image Custom Post Type
                   add_action( 'init', 'register_wp_bs_carousel_image' );
                   function register_wp_bs_carousel_image() {
                   $labels = array(
                   'name' => _x( 'Carousel Images', 'carousel_image' ),
                   'singular_name' => _x( 'Carousel Image', 'carousel_image' ),
                   'add_new' => _x( 'Add New', 'carousel_image' ),
                   'add_new_item' => _x( 'Add New Carousel Image', 'carousel_image' ),
                   'edit_item' => _x( 'Edit Carousel Image', 'carousel_image' ),
                   'new_item' => _x( 'New Carousel Image', 'carousel_image' ),
                   'view_item' => _x( 'View Carousel Image', 'carousel_image' ),
                   'search_items' => _x( 'Search Carousel Images', 'carousel_image' ),
                   'not_found' => _x( 'No carousel images found', 'carousel_image' ),
                   'not_found_in_trash' => _x( 'No carousel images found in Trash', 'carousel_image' ),
                   'parent_item_colon' => _x( 'Parent Carousel Image:', 'carousel_image' ),
                   'menu_name' => _x( 'Carousel Images', 'carousel_image' ),
                   );
                   $args = array(
                   'labels' => $labels,
                   'hierarchical' => false,
                   'description' => 'Images for Bootsrap Carousel',
                   'supports' => array( 'title', 'editor', 'thumbnail','excerpt' ),
                   'taxonomies' => array( 'category' ),
                   'public' => true,
                   'show_ui' => true,
                   'show_in_menu' => true,
                   'menu_position' => 20,
                   'menu_icon' => 'dashicons-images-alt',
                   'show_in_nav_menus' => true,
                   'publicly_queryable' => true,
                   'exclude_from_search' => false,
                   'has_archive' => true,
                   'query_var' => true,
                   'can_export' => true,
                   'rewrite' => true,
                   'capability_type' => 'post'
                   );
                   register_post_type( 'carousel-image', $args );
                   } 
   
               function wp_bs_carousel($atts) {
                  // Set Shortcode Attributes
                  extract(shortcode_atts(array(
                     'posts' => 1,
                  ), $atts));
   
                  // Start the Return String
                  $return_string = '<div id="wp_bs_carousel" class="carousel slide carousel-fade"  data-ride="carousel">
                <div class="carousel-inner" >';
   
                  // starting a new variable for indicators!
                  $indicators = '<!-- Indicators -->
                 <ol class="carousel-indicators" >';
   
                  // The query
                  $the_query = new WP_Query(array(
                  'post_type' => 'carousel-image',
                   '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,'wp_bs_carousel_image').'<div class="carousel-caption">
                   <h1>'.get_the_title().'</h1>
                   <p>'.get_the_excerpt().'</p>
                  </div>
                  </div><!-- item active -->';
   
                  // The first indicator!!
                  $indicators .= '<li data-target="#wp_bs_carousel" data-slide-to="0" class="active"></li>';
   
                  endwhile;
                  wp_reset_postdata();
   
                  // You'll need a counter
                  $i = 0;
   
                  $the_query = new WP_Query(array(
                   'post-type' => 'carousel-image',
                   'posts_per_page' => $posts,
                   'offset' => 1
                   ));
                  while ( $the_query->have_posts() ) :
                  $the_query->the_post();
   
                  // Plus 1 to your $i var
                  $i++;  
   
                  // Continue the indicator var
                  $indicators .= '<li data-target="#wp_bs_carousel" data-slide-to="'.$i.'"></li>';
   
                 $return_string  .= '<div class="item">'.get_the_post_thumbnail($post->ID, 'wp_bs_carousel_image').'<div class="carousel-caption">
                   <h1>'.get_the_title().'</h1>
                   <p>'.get_the_excerpt().'</p>
                  </div>
                  </div><!-- item -->';
                  endwhile;
                  wp_reset_postdata();
   
                  // Finish the Return String and Clean Up
                  $return_string .= '</div>
   
                  // Finishing up the indicators var and add it to $return_string
                  $indicators .= '</ol>';
   
                  $return_string .= $indicators;
   
                    <!-- Controls -->
                 <a class="left carousel-control" href="#wp_bs_carousel" 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" href="#wp_bs_carousel" role="button" data-slide="next">
                   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                   <span class="sr-only">Next</span>
                 </a>
               </div>';
   
                  return $return_string;
               }
   
               add_shortcode('carousel', 'wp_bs_carousel');
   
               ?>
       ```
   
 * I haven’t tested this but it should work I think. You’ll notice I used your original
   code (with the proper get_ functions subbed in).
 *  Thread Starter [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680869)
 * That code seems to have broken the carousel.
 *     ```
       // Finish the Return String and Clean Up
                  $return_string .= '</div>
   
                  // Finishing up the indicators var and add it to $return_string
                  $indicators .= '</ol>';
   
                  $return_string .= $indicators;
   
                    <!-- Controls -->
                 <a class="left carousel-control" href="#wp_bs_carousel" 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" href="#wp_bs_carousel" role="button" data-slide="next">
                   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                   <span class="sr-only">Next</span>
                 </a>
               </div>';
   
                  return $return_string;
               }
   
               add_shortcode('carousel', 'wp_bs_carousel');
   
               ?>
       ```
   
 * I think there is something missing to close the html after the first $return_string.
   = ‘</div>.
 * I just get a blank white screen.
 * – I really appreciate your time –
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680872)
 * You’re right, that line is invalid. BTG accidentally inserted his code in the
   middle of a string. Understandable as multi-line strings look a lot like HTML
   and not PHP.
 * If you just move his inserted code
 *     ```
       // Finishing up the indicators var and add it to $return_string
                  $indicators .= '</ol>';
   
                  $return_string .= $indicators;
       ```
   
 * up above the
 *     ```
       // Finish the Return String and Clean Up
                  $return_string .= '</div>
       ```
   
 * you should be good to go.
 *  Thread Starter [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680883)
 * That still didn’t do it. Only the first slide shows up and no indicators.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680889)
 * Better than a white screen though:)
 * My only intention was to fix the syntax error, I’m sorry the code still doesn’t
   work for you. It might be best at this point if you re-publish the latest version
   of your code. It be helpful (and actually part of the guidelines here) if you
   post your code at pastebin.com and provide a link here. If you post the code 
   with the PHP syntax highlighting selected, it makes it easier for us to spot 
   problems.
 * I can’t promise to help you fix your code beyond what I’ve offered, but hopefully
   someone will.
 *  Thread Starter [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680890)
 * Any help is appreciated
 * [http://pastebin.com/RrbRx78r](http://pastebin.com/RrbRx78r)
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680915)
 * Thanks for doing that. I didn’t want to get your hopes up in my last post, but
   I was able to find one problem in your code. You cannot use the global `$post`
   in custom queries, that only works in the main loop. Instead use `$the_query-
   >post` to get the current post object.
 * The problem I see occurs in two places where you try to pass the current post
   ID to `get_the_post_thumbnail()`. You should replace `$post->ID` with `$the_query-
   >post->ID`.
 * I don’t know if that will solve the problems you’ve encountered, it very well
   may. The code runs without any kind of PHP error, warning, notice, etc, and all
   the HTML tags close properly. Beyond that, I’m unable to help you further because
   I don’t use Bootstrap.
 * A few tips if I may:
    Define WP_DEBUG as true in wp-config.php while you’re testing.
   The errors will display in the browser, along with what and where the problem
   is. With such information, you may have been able to fix these last couple glitches
   on your own. Don’t leave it that way for long on a live site, it’s a slight security
   risk.
 * If you haven’t done this already, it may not be worth it at this point, but for
   your next project consider installing a local Apache environment on your local
   computer. It makes the development code-test-edit cycle much faster and easier.
   Most of us use some form of xAMPP.
 * If your plugin is intended to be distributed in the wordpress.org repository,
   you’ll need to remove any ‘WP’ references from your plugin name and/or slug –
   it’s not allowed since all plugins in the repository are for WP.
 *  Thread Starter [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680916)
 * Thanks for your help and suggestions.
 * I am back where I started though. Only 1 image shows up with only 1 indicator.
   
   [http://pastebin.com/uaZwhQ2G](http://pastebin.com/uaZwhQ2G)
 * html: [http://pastebin.com/wnjamt6J](http://pastebin.com/wnjamt6J)
 * I am using the built in Apache server on OSX. The .dev extension is the alias
   I gave to my development folder to replace the word localhost so wptest.dev is
   the same as localhost/wptest.
 *  Thread Starter [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680942)
 * I got the carousel to display the images and the indicators but there is an extra
   indicator added. How do I end the query?
 *     ```
       <?php
       			/*
       			Plugin Name: WP_BS_Carousel
       			Description: Bootstrap Carousel Custom Post-Type
       			Author: Jay cbrf4
       			Version: 1.0
       			/*/
   
       			function wp_bs_theme_setup() {
       			   add_theme_support( 'post-thumbnails' );
       			    add_image_size( 'wp_bs_carousel_image', 1170, 385, true);
       			}
       			add_action( 'after_setup_theme', 'wp_bs_theme_setup' );
   
       			// Creates Carousel Image Custom Post Type
       			    add_action( 'init', 'register_wp_bs_carousel_image' );
       			    function register_wp_bs_carousel_image() {
       			    $labels = array(
       			    'name' => _x( 'Carousel Images', 'carousel_image' ),
       			    'singular_name' => _x( 'Carousel Image', 'carousel_image' ),
       			    'add_new' => _x( 'Add New', 'carousel_image' ),
       			    'add_new_item' => _x( 'Add New Carousel Image', 'carousel_image' ),
       			    'edit_item' => _x( 'Edit Carousel Image', 'carousel_image' ),
       			    'new_item' => _x( 'New Carousel Image', 'carousel_image' ),
       			    'view_item' => _x( 'View Carousel Image', 'carousel_image' ),
       			    'search_items' => _x( 'Search Carousel Images', 'carousel_image' ),
       			    'not_found' => _x( 'No carousel images found', 'carousel_image' ),
       			    'not_found_in_trash' => _x( 'No carousel images found in Trash', 'carousel_image' ),
       			    'parent_item_colon' => _x( 'Parent Carousel Image:', 'carousel_image' ),
       			    'menu_name' => _x( 'Carousel Images', 'carousel_image' ),
       			    );
       			    $args = array(
       			    'labels' => $labels,
       			    'hierarchical' => false,
       			    'description' => 'Images for Bootsrap Carousel',
       			    'supports' => array( 'title', 'editor', 'thumbnail','excerpt' ),
       			    'taxonomies' => array( 'category' ),
       			    'public' => true,
       			    'show_ui' => true,
       			    'show_in_menu' => true,
       			    'menu_position' => 20,
       			    'menu_icon' => 'dashicons-images-alt',
       			    'show_in_nav_menus' => true,
       			    'publicly_queryable' => true,
       			    'exclude_from_search' => false,
       			    'has_archive' => true,
       			    'query_var' => true,
       			    'can_export' => true,
       			    'rewrite' => true,
       			    'capability_type' => 'post'
       			    );
       			    register_post_type( 'carousel-image', $args );
       			    } 
   
       			function wp_bs_carousel($atts) {
       			   // Set Shortcode Attributes
       			   extract(shortcode_atts(array(
       			      'posts' => -1,
       			   ), $atts));
   
       			   // Start the Return String
       			   $return_string = '<div id="wp_bs_carousel" class="carousel slide carousel-fade"  data-ride="carousel">
   
       			 <div class="carousel-inner" >';
   
       			   // starting a new variable for indicators!
       			           $indicators = '<!-- Indicators -->
       			        <ol class="carousel-indicators" >';
   
       			// The query
       			           $the_query = new WP_Query(array(
       			           'post_type' => 'carousel-image',
       			            'posts_per_page' => $posts,
       			            ));
       			            $i = 0;
   
       			           // The loop
       			           while ( $the_query->have_posts() ) :
       			              $the_query->the_post();
       			                if ( $i == 0 ) {
       			              $return_string .= '<div class="item active">'.get_the_post_thumbnail($the_query->post->ID,'wp_bs_carousel_image').'<div class="carousel-caption">
       			            <h1>'.get_the_title().'</h1>
       			            <p>'.get_the_excerpt().'</p>
       			           </div>
       			           </div><!-- item active -->';
   
       			                              // The first indicator!!
       			           $indicators .= '<li data-target="#wp_bs_carousel" data-slide-to="0" class="active"></li>';
       			              }
       			               else {
       			                $return_string .= '<div class="item">'.get_the_post_thumbnail($the_query->post->ID,'wp_bs_carousel_image').'<div class="carousel-caption">
       			            <h1>'.get_the_title().'</h1>
       			            <p>'.get_the_excerpt().'</p>
       			           </div>
       			           </div><!-- item -->';
       			                }
       			 $i++;
       			                // Continue the indicator var
       			           $indicators .= '<li data-target="#wp_bs_carousel" data-slide-to="'.$i.'"></li>';
       			           endwhile;
       			           wp_reset_postdata();
   
       			                           // Finishing up the indicators var and add it to $return_string
       			           $indicators .= '</ol>';
   
       			           $return_string .= $indicators;
   
       			           // Finish the Return String and Clean Up
       			   $return_string .= '</div>
   
       			     <!-- Controls -->
       			  <a class="left carousel-control" href="#wp_bs_carousel" 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" href="#wp_bs_carousel" role="button" data-slide="next">
       			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
       			    <span class="sr-only">Next</span>
       			  </a>
       			</div>';
   
       			   return $return_string;
       			}
   
       			add_shortcode('carousel', 'wp_bs_carousel');
   
       			?>
       ```
   
 * The HTML output is:
 *  ` <section class=”post_content”>
    <div id=”wp_bs_carousel” class=”carousel slide
   carousel-fade” data-ride=”carousel”>
 *  <div class=”carousel-inner” ><div class=”item active”><img width=”1170″ height
   =”380″ src=”[http://localhost/wp/wp-content/uploads/2015/01/slide21-1170×380.jpg&#8221](http://localhost/wp/wp-content/uploads/2015/01/slide21-1170×380.jpg&#8221);
   class=”attachment-wp_bs_carousel_image wp-post-image” alt=”slide2″ /><div class
   =”carousel-caption”>
    <h1>Another carousel slide</h1> <p>This is another carousel
   slide’s excerpt</p> </div> </div><!– item active –><div class=”item”><img width
   =”1170″ height=”380″ src=”[http://localhost/wp/wp-content/uploads/2015/01/slide3-1170×380.jpg&#8221](http://localhost/wp/wp-content/uploads/2015/01/slide3-1170×380.jpg&#8221);
   class=”attachment-wp_bs_carousel_image wp-post-image” alt=”slide3″ /><div class
   =”carousel-caption”> <h1>This is Image 3 title</h1> <p>This is Image excerpt</
   p> </div> </div><!– item –><div class=”item”><img width=”1170″ height=”380″ src
   =”[http://localhost/wp/wp-content/uploads/2015/01/slide2-1170×380.jpg&#8221](http://localhost/wp/wp-content/uploads/2015/01/slide2-1170×380.jpg&#8221);
   class=”attachment-wp_bs_carousel_image wp-post-image” alt=”Slide 2″ /><div class
   =”carousel-caption”> <h1>This is Image 2 title</h1> <p>This is Image 2 excerpt
   </p> </div> </div><!– item –><div class=”item”><img width=”1170″ height=”380″
   src=”[http://localhost/wp/wp-content/uploads/2015/01/slide1-1170×380.jpg&#8221](http://localhost/wp/wp-content/uploads/2015/01/slide1-1170×380.jpg&#8221);
   class=”attachment-wp_bs_carousel_image wp-post-image” alt=”Slide 1″ /><div class
   =”carousel-caption”> <h1>This is Image 1 title</h1> <p>This is Image 1 excerpt
   </p> </div> </div><!– item –><!– Indicators –> <ol class=”carousel-indicators”
   > <li data-target=”#wp_bs_carousel” data-slide-to=”0″ class=”active”></li> <li
   data-target=”#wp_bs_carousel” data-slide-to=”1″></li> <li data-target=”#wp_bs_carousel”
   data-slide-to=”2″></li> <li data-target=”#wp_bs_carousel” data-slide-to=”3″></
   li>
 * <!– extra indicator –>
    <li data-target=”#wp_bs_carousel” data-slide-to=”4″></
   li> </ol></div>
 *  <!– Controls –>
    <a class=”left carousel-control” href=”#wp_bs_carousel” 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” href=”#wp_bs_carousel” role=”button” data-slide=”next”> <span
   class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span> <span class
   =”sr-only”>Next</span> </a> </div>`
 *  [bythegram](https://wordpress.org/support/users/bythegram/)
 * (@bythegram)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680948)
 * Pretty close man, just a little off, the else statement is where you want to 
   put the indicators. Here is how I think your while loop should be:
 *     ```
       // The loop
       			           while ( $the_query->have_posts() ) :
       			              $the_query->the_post();
       			                if ( $i == 0 ) {
       			              $return_string .= '<div class="item active">'.get_the_post_thumbnail($the_query->post->ID,'wp_bs_carousel_image').'<div class="carousel-caption">
       			            <h1>'.get_the_title().'</h1>
       			            <p>'.get_the_excerpt().'</p>
       			           </div>
       			           </div><!-- item active -->';
   
       			                              // The first indicator!!
       			           $indicators .= '<li data-target="#wp_bs_carousel" data-slide-to="0" class="active"></li>';
       			              }
       			               else {
       			                $return_string .= '<div class="item">'.get_the_post_thumbnail($the_query->post->ID,'wp_bs_carousel_image').'<div class="carousel-caption">
       			            <h1>'.get_the_title().'</h1>
       			            <p>'.get_the_excerpt().'</p>
       			           </div>
       			           </div><!-- item -->';
       			               // Continue the indicator var
       			           $indicators .= '<li data-target="#wp_bs_carousel" data-slide-to="'.$i.'"></li>';
                                          }
   
       			           $i++;
       			           endwhile;
       			           wp_reset_postdata();
       ```
   
 * Again I haven’t tested this but should work.
    `
 *  Thread Starter [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/#post-5680960)
 * Adam, you are the man!
 * Thank you, bcworkz and Phil Ewels for your help. I really appreciate it.
 * – Jay

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/page/2/?output_format=md)

The topic ‘Trying to create shortcode/plugin for Bootstrap Carousel’ is closed to
new replies.

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 16 replies
 * 3 participants
 * Last reply from: [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * Last activity: [11 years ago](https://wordpress.org/support/topic/trying-to-create-shortcodeplugin-for-bootstrap-carousel/page/2/#post-5681073)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics