WP Bootstrap Tabs

Home » WP Bootstrap Tabs

This is a lightweight plug-in designed to do one simple task, use a shortcode to add tabs to your posts/pages utilizing the twitter bootstrap tabs functionality. I used the WordPress Post Tabs plug-in as the foundation for my plug-in. There are other great plug-ins, such as DW Shortcodes Bootstrap, for adding bootstrap tabs, buttons, accordions, etc. W-P-T was created to incorporate JQuery UI Tabs and used a different structure for adding the tabs to your pages. That structure was the only tabs shortcode I found that could be used within the template and paired with Advanced Custom Fields repeater fields to create on the fly tabs with their own individual WYSIWYG content boxes. This make it much easier to manage tab content and allows you to to do some cool things with tabs.

Version 1.0.4 was just released with 2 small bug fixes.

To prevent the insertion of unwanted <p> above the tabs, I added

remove_filter( ‘the_content’, ‘wpautop’ );
add_filter( ‘the_content’, ‘wpautop’ , 12);

I also added a missing </div> to the end of the tab content.

If you want, you can add the shortcodes to your functions.php file rather than install the plugin.

// 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 = '
'; $tab_html=''; for($i=0;$i<$bootstraptabs_tab_count;$i++) { $link_html = $bootstraptabs_content[$i]['link']; $tab_html.='

'.$bootstraptabs_content[$i]['content'].'

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

It uses the shortcode structure below but it works even better with more flexibility when combined with Advanced Custom Fields repeater fields

[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]