WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Creating a Shortcode for Twitter Bootstrap Carousel (Slideshow) (4 posts)

  1. Josiah Sprague
    Member
    Posted 1 year ago #

    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?

  2. bythegram
    Member
    Posted 1 year ago #

    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');
  3. Josiah Sprague
    Member
    Posted 1 year ago #

    That was it! Thanks!

  4. bythegram
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags