• I have created a custom post type for my Bootstrap theme to create a Bootstrap Carousel and shortcode to place a carousel on a page.

    Problem is I would like to have multiple carousels on my site but can only create 1 with my code.

    How do I modify code to be able to create multiple carousels and place with shortcode like [carousel id=”xx”]?

    Here is my code :

    function jd_bs_theme_setup() {
          add_image_size( 'jd_bs_carousel_image', 1170, 385, true);
      }
      add_action( 'after_setup_theme', 'jd_bs_theme_setup' );
    
      // Creates Carousel Image Custom Post Type
          add_action( 'init', 'register_jd_bs_carousel_image' );
          function register_jd_bs_carousel_image() {
          $labels = array(
          'name' => _x( 'Carousel Images - use shortcode[carousel] to insert into page or post', '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','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 jd_bs_carousel($atts) {
         // Set Shortcode Attributes
         extract(shortcode_atts(array(
            'posts' => -1,
         ), $atts));
    
         // Start the Return String
         $return_string = '<div id="jd_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,'jd_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="#jd_bs_carousel" data-slide-to="0" class="active"></li>';
                    }
                     else {
                      $return_string .= '<div class="item">'.get_the_post_thumbnail($the_query->post->ID,'jd_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="#jd_bs_carousel" data-slide-to="'.$i.'"></li>';
                                   }
    
                 $i++;
                 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="#jd_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="#jd_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', 'jd_bs_carousel');

    Please help, I need to complete this project ASAP

  • The topic ‘More than one Bootstrap Carousel with shortcode?’ is closed to new replies.