WP Bootstrap Tabs

I’m learning to use bootstrap and have come across an issue that i cannot get past. When adding another instance of the [bootstrap_tab name]…[end_bootstrap_tab] the second Tab that i try to add gets all messed up you can view here it seems to duplicate the first tab and my second tab (with number 2’s at the end of each word) is pushed to the right with the duplicate on the same line. I know it has to revolve around the [end_boostrap_tab] shortcode because that is what displays the tabs without that nothing shows up, when i place that shortcode in different spots i get different results but none desired;

Any help would be greatly appreciated The php code and Html markup are below

Read More
[bootstrap_tab name="Tab 1" link="tab1-slug" active="active"]Content for Tab 1[/bootstrap_tab]
[bootstrap_tab name="Tab 2" link="tab2-slug" ]Content for Tab 2[/bootstrap_tab]
[bootstrap_tab name="Tab 3" link="tab3-slug"]Content for Tab 3[/bootstrap_tab]
 [end_bootstrap_tab]



// Add Tabs functionality for bootstrap
function bootstraptabs_wp_init() {
    global $bootstraptabs_count,$bootstraptabs_tab_count,$bootstraptabs_content;
            $bootstraptabs_count=0;
            $bootstraptabs_tab_count=0;
            $bootstraptabs_content=array();
}
add_action( 'wp', 'bootstraptabs_wp_init' );

function bootstraptabs_tab_shortcode($atts,$content) {
    extract(shortcode_atts(array(
        'name' => 'Tab Name',
        'link' => '',
        'active' => '',
    ), $atts));

    global $bootstraptabs_content,$bootstraptabs_tab_count,$bootstraptabs_count;
    $bootstraptabs_content[$bootstraptabs_tab_count]['name'] = $name;
    $bootstraptabs_content[$bootstraptabs_tab_count]['link'] = $link;
    $bootstraptabs_content[$bootstraptabs_tab_count]['active'] = $active;   
    $bootstraptabs_content[$bootstraptabs_tab_count]['content'] = do_shortcode($content);
    $bootstraptabs_tab_count = $bootstraptabs_tab_count+1;
}
add_shortcode('bootstrap_tab', 'bootstraptabs_tab_shortcode');

function bootstraptabs_end_shortcode($atts) {
 global $bootstraptabs_content,$bootstraptabs_tab_count,$bootstraptabs_count;

        if($bootstraptabs_tab_count!=0 and isset($bootstraptabs_tab_count)) {
        $tab_content = '<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">';  
            for($i=0;$i<$bootstraptabs_tab_count;$i++) {

                $tab_content = $tab_content.'<li class="tabs '.$bootstraptabs_content[$i]['active'].'"><a data-toggle="tab" href="#'.$bootstraptabs_content[$i]['link'].'">'.$bootstraptabs_content[$i]['name'].'</a></li>';
            }
            $tab_content = $tab_content.'</ul><div id="my-tab-content" class="tab-content">';

            $tab_html='';
            for($i=0;$i<$bootstraptabs_tab_count;$i++) {
                $link_html = $bootstraptabs_content[$i]['link'];
                    $tab_html.='<div id="'.$bootstraptabs_content[$i]['link'].'" class="tab-pane '.$bootstraptabs_content[$i]['active'].'"><p>'.$bootstraptabs_content[$i]['content'].'</p></div>';
            }
            $tab_content = $tab_content.$tab_html;
        }
        $tab_content = $tab_content;

        return $tab_content;
}
add_shortcode('end_bootstrap_tab', 'bootstraptabs_end_shortcode');

This is my wordpress post containing the Tab information:

[bootstrap_tab name="Acrobats" link="tab1-slug"]Content for Acrobats[/bootstrap_tab]
[bootstrap_tab name="Audio &amp; Music" link="tab2-slug" ]Content for Audio&amp;Music[/bootstrap_tab]
[bootstrap_tab name="Bands" link="tab3-slug"]Content for Bands[/bootstrap_tab]
[bootstrap_tab name="Category X" link="tab4-slug" ]Content for Category X[/bootstrap_tab]
[bootstrap_tab name="Category Y" link="tab5-slug"]Content for Catgeory Y[/bootstrap_tab]
[bootstrap_tab name="Category Z" link="tab5-slug"]Content for Catgeory Z[/bootstrap_tab]
[end_bootstrap_tab]
[bootstrap_tab name="Acrobats2" link="tab6-slug"]Content for Acrobats[/bootstrap_tab]
[bootstrap_tab name="Audio &amp;2; Music" link="tab7-slug" ]Content for   Audio&amp;Music[/bootstrap_tab]
[bootstrap_tab name="Bands2" link="tab8-slug"]Content for Bands[/bootstrap_tab]
[bootstrap_tab name="Category X2" link="tab9-slug" ]Content for Category X[/bootstrap_tab]
[bootstrap_tab name="Category Y2" link="tab10-slug"]Content for Catgeory Y[/bootstrap_tab]
[bootstrap_tab name="Category Z2" link="tab11-slug"]Content for Catgeory Z[/bootstrap_tab]
[end_bootstrap_tab]

Related posts

Leave a Reply

1 comment

  1. Cannot reproduce your setup, but the first thing I’d tackle is a unique ID for the tabs:

    $tabs_counter = 0; // Auxiliary
    $tab_content = '<ul id="tabs-' . $tabs_counter . '" class="nav nav-tabs" data-tabs="tabs">';  
    for( $i=0; $i < $bootstraptabs_tab_count; $i++ ) {
        $tab_content = $tab_content.'<li class="tabs '.$bootstraptabs_content[$i]['active'].'"><a data-toggle="tab" href="#'.$bootstraptabs_content[$i]['link'].'">'.$bootstraptabs_content[$i]['name'].'</a></li>';
    }
    $tab_content = $tab_content . '</ul><div id="my-tab-content-' . $tabs_counter . '" class="tab-content">';
    

    So, that you have pairs:

    • ul#tabs-0 —> div#my-tab-content-0
    • ul#tabs-1 —> div#my-tab-content-1
    • etc.