More than one Bootstrap Carousel with shortcode?
-
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.