How to Create Multi Tab Widget In WordPress with Bootstrap

I will share about how to create bootstrap multi tab widget that you’ve seen in several wordpress theme. This article is the additional to my article “Create WordPress Theme with Bootstrap And Underscores Step by Step“. To make your wordpress theme looks more attractive, we can utilize the bootstrap component “Togglable tabs” to create a responsive multi tab widget.

Benefits of this widget is make your sidebar look more presentable and elegant. By installing this , it will save the placement of widgets in your sidebar column which usually extends downward. Let’s start this tutorial

How to Create Multi Tab Widget In WordPress with Bootstrap

Important note: This multi tab widget is using bootstrap framework, so your widget will work well if your theme use bootstrap framework 3.0

To execute this , add the script at function.php on your wordpress theme, or you can create wordpress plugin. The first one we will create a bootstrap multi tab widget by adding a code at function.php.

Open functions.php file and add the following code at the bottom line

/**
 * Add Bootstrap multi tab widget
 * author : sigit prasetya nugroho
 * author url : http://seegatesite.com
 * tutorial url : http://seegatesite.com
 */
class Sgt_Multitab_Widget extends WP_Widget {
    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'Sgt_Multitab_widget', // Base ID
            __( 'Multi Tab Bootstrap Widget', 'sgt_title_multitab_widget' ), // Name
            array( 'description' => __( 'Widget toggle tab bootstrap by seegatesite.com', 'sgt_title_multitab_widget' ), ) // Args
            );
    }
    /**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        echo '<div>
        <ul class="nav nav-tabs tabwidget widget nav-justified" role="tablist" >
            <li role="presentation" class="active"><a href="#popular" aria-controls="popular" role="tab" data-toggle="tab"><h3>Popular</h3></a></li>
            <li role="presentation"><a href="#latest" aria-controls="latest" role="tab" data-toggle="tab"><h3>Latest</h3></a></li>
            <li role="presentation"><a href="#xcomments" aria-controls="xcomments" role="tab" data-toggle="tab"><h3>Comments</h3></a></li>
            <li role="presentation"><a href="#tags" aria-controls="tags" role="tab" data-toggle="tab"><h3>Tags</h3></a></li>
        </ul>';
        echo '<div class="tab-content">';
            echo '<div role="tabpanel" class="tab-pane fade widget active in" id="popular">';
                        query_posts( array( 'posts_per_page' => 5, 'orderby' => 'meta_value_num', 'order' => 'DESC' ) );
                        if (have_posts()) :
                        echo '<ul>';
                        while (have_posts()) :
                            the_post();
                                echo '<li>';
                                 if (has_post_thumbnail() ) {
                                    echo '<span class="widgetimage">';
                                     the_post_thumbnail();
                                     echo '</span>';
                                 }    
                            echo the_title();
                            echo'<span class="read-more"><a href="';
                            the_permalink();
                            echo'"> Read More..</a></span></li>';
                        endwhile;
                        echo '</ul>';
                        endif;
                        wp_reset_query();
            echo '</div>';
            echo '<div role="tabpanel" class="tab-pane fade widget" id="latest">';
                    query_posts( array( 'posts_per_page' => 5, 'orderby' => 'title', 'order' => 'DESC' ) );
                    if (have_posts()) :
                        echo '<ul>';
                        while (have_posts()) :
                            the_post();
                            echo '<li>';
                                 if ( has_post_thumbnail() ){
                                echo '<span class="widgetimage">';
                                 the_post_thumbnail();
                                 echo '</span>';
                                 }    
                                  echo the_title();
                                  echo'<span class="read-more"><a href="';
                                  the_permalink();
                                  echo'"> Read More..</a></span></li>';
                        endwhile;
                        echo '</ul>';
                    endif;
                    wp_reset_query();
            echo '</div>';
            echo '<div role="tabpanel" class="tab-pane fade widget" id="xcomments">';
                    $comments = get_comments( array(
                        'number'    => 5,
                        'status'    => 'approve'
                    ) );
                    echo '<ul>';
                    foreach($comments as $comment) :
                        echo '<li>' ;
                            comment_excerpt($comment->comment_ID)  ;
                        echo '<span class="read-more"><a href="'.get_comment_link( $comment->comment_ID  ).'"> Read More</a></span></li>';
                    endforeach;
                    echo '</ul>';
            echo '</div>';
            echo '<div role="tabpanel" class="tab-pane fade widget" id="tags">';
                echo '<ul>';
                    echo '<li>';
                        wp_tag_cloud();
                    echo '</li>';
                echo '</ul>';
            echo '</div>';
        echo '</div>';
    echo '</div>';
    echo $args['after_widget'];
    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {
        echo '<p>Toggle tab widget with bootstrap framework by seegatesite.com</p>';
    }
    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        return $instance;
    }

} // end class Sgt_Multitab_Widget
function register_Sgt_Multitab_widget() {
    register_widget( 'Sgt_Multitab_Widget' );
}
add_action( 'widgets_init', 'register_Sgt_Multitab_widget' );

The explanation :

The basic form to creating toggletabs bootstrap :

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

From above formula, we will create a multi-tab widget with 4 column containing popular posts, latest posts, comments and tags

1. Query to display popular post in wordpress, we will show the top 5 popular post

query_posts( array( 'posts_per_page' => 5, 'orderby' => 'meta_value_num', 'order' =>'DESC' ) );

2. Query to display the latest posts widget wordpress

query_posts( array( 'posts_per_page' => 5, 'orderby' => 'title', 'order' => 'DESC' ) );

3. Code to display comments on wordpress

$comments = get_comments( array(
   'number'    => 5,
   'status'    => 'approve'
 ) );

4. Code to display tags cloud

wp_tag_cloud();

To register a new widget, we can use the following script

function register_Sgt_Multitab_widget() {
	register_widget( 'Sgt_Multitab_Widget' );
}
add_action( 'widgets_init', 'register_Sgt_Multitab_widget' );

Save your project and view widgets page, You will find multi tab that you have created like below

multi tab widget bootstrap

To create more beautiful widget, you can add the following css to style.css or your custom css file

.tabwidget  h3{
    font-size: 16px;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}
.tabwidget > ul{
    list-style: none;
    padding:0px;
    margin: 0px 0px 20px;
}
.tabwidget > ul > li{
    border-bottom: 1px solid #EDF1F5;
    padding: 10px 10px;
}
.tabwidget-span{
    background-color: #dd4814;
    padding: 5px;
    padding-bottom: 2px;
    color: white;
}
.tabwidget > ul > li > a{
    color: #dd4814;
}
.tabwidget > ul > li > a:hover{
    color:#dd4814;
}
.tabwidget > ul > li:hover{
    background-color:  #F1F1F1;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus{
    color: white!important;
    background-color: #DD4814;

}
.widgetimage img{
    max-height: 40px;
    height: auto;
    max-width: 50px;
    margin-right: 5px;
    margin-bottom: 3px;
}

Done, and see the results

How to create a plugin multi tab widget with Bootstrap

Here is step by step create multi tab widget plugin wordpress

1. Create new folder in the plugins folder (wp-content/plugins), i give name sgt_multitab_widget , you can give name by yourself
2. Open that folder and create new php file as sgt_multitab_widget.php (the name must like your folder name)
3. Copy this script below to your php file

<?php
 /*
Plugin Name: Multi Tab Widget Bootstrap
Plugin URI: http://seegatesite.com/
Description: Creating Multi Tab Widget Bootstrap.
Version: 1.0
Author: Seegatesite
Author URI: http://seegatesite.com
*/
class Sgt_Multitab_Widget extends WP_Widget {
    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'Sgt_Multitab_widget', // Base ID
            __( 'Multi Tab Bootstrap Widget', 'sgt_title_multitab_widget' ), // Name
            array( 'description' => __( 'Widget toggle tab bootstrap by seegatesite.com', 'sgt_title_multitab_widget' ), ) // Args
            );
    }
    /**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        echo '<div>
        <ul class="nav nav-tabs tabwidget widget nav-justified" role="tablist" >
            <li role="presentation" class="active"><a href="#popular" aria-controls="popular" role="tab" data-toggle="tab"><h3>Popular</h3></a></li>
            <li role="presentation"><a href="#latest" aria-controls="latest" role="tab" data-toggle="tab"><h3>Latest</h3></a></li>
            <li role="presentation"><a href="#xcomments" aria-controls="xcomments" role="tab" data-toggle="tab"><h3>Comments</h3></a></li>
            <li role="presentation"><a href="#tags" aria-controls="tags" role="tab" data-toggle="tab"><h3>Tags</h3></a></li>
        </ul>';
        echo '<div class="tab-content">';
            echo '<div role="tabpanel" class="tab-pane fade widget active in" id="popular">';
                        query_posts( array( 'posts_per_page' => 5, 'orderby' => 'meta_value_num', 'order' => 'DESC' ) );
                        if (have_posts()) :
                        echo '<ul>';
                        while (have_posts()) :
                            the_post();
                                echo '<li>';
                                 if (has_post_thumbnail() ) {
                                    echo '<span class="widgetimage">';
                                     the_post_thumbnail();
                                     echo '</span>';
                                 }    
                            echo the_title();
                            echo'<span class="read-more"><a href="';
                            the_permalink();
                            echo'"> Read More..</a></span></li>';
                        endwhile;
                        echo '</ul>';
                        endif;
                        wp_reset_query();
            echo '</div>';
            echo '<div role="tabpanel" class="tab-pane fade widget" id="latest">';
                    query_posts( array( 'posts_per_page' => 5, 'orderby' => 'title', 'order' => 'DESC' ) );
                    if (have_posts()) :
                        echo '<ul>';
                        while (have_posts()) :
                            the_post();
                            echo '<li>';
                                 if ( has_post_thumbnail() ){
                                echo '<span class="widgetimage">';
                                 the_post_thumbnail();
                                 echo '</span>';
                                 }    
                                  echo the_title();
                                  echo'<span class="read-more"><a href="';
                                  the_permalink();
                                  echo'"> Read More..</a></span></li>';
                        endwhile;
                        echo '</ul>';
                    endif;
                    wp_reset_query();
            echo '</div>';
            echo '<div role="tabpanel" class="tab-pane fade widget" id="xcomments">';
                    $comments = get_comments( array(
                        'number'    => 5,
                        'status'    => 'approve'
                    ) );
                    echo '<ul>';
                    foreach($comments as $comment) :
                        echo '<li>' ;
                            comment_excerpt($comment->comment_ID)  ;
                        echo '<span class="read-more"><a href="'.get_comment_link( $comment->comment_ID  ).'"> Read More</a></span></li>';
                    endforeach;
                    echo '</ul>';
            echo '</div>';
            echo '<div role="tabpanel" class="tab-pane fade widget" id="tags">';
                echo '<ul>';
                    echo '<li>';
                        wp_tag_cloud();
                    echo '</li>';
                echo '</ul>';
            echo '</div>';
        echo '</div>';
    echo '</div>';
    echo $args['after_widget'];
    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {
        echo '<p>Toggle tab widget with bootstrap framework by seegatesite.com</p>';
    }
    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        return $instance;
    }

} // end class Sgt_Multitab_Widget
function register_Sgt_Multitab_widget() {
    register_widget( 'Sgt_Multitab_Widget' );
}
add_action( 'widgets_init', 'register_Sgt_Multitab_widget' );

function Sgt_Multitab_widget_CSS() {
    wp_register_style( 'Sgt_Multitab_widget_CSS', plugins_url('Sgt_Multitab_widget_CSS.css', __FILE__),array() );
    wp_enqueue_style( 'Sgt_Multitab_widget_CSS' );
}

add_action( 'wp_enqueue_scripts', 'Sgt_Multitab_widget_CSS',99 );

The explanation :

Creating wordpress`s plugin needed introduction code, so it can be recognized by wordpress

 /*
Plugin Name: Multi Tab Widget Bootstrap
Plugin URI: http://seegatesite.com/
Description: Creating Multi Tab Widget Bootstrap.
Version: 1.0
Author: Seegatesite
Author URI: http://seegatesite.com
*/

For add new css style at your plugin use this script below

function Sgt_Multitab_widget_CSS() {
	wp_register_style( 'Sgt_Multitab_widget_CSS', plugins_url('Sgt_Multitab_widget_CSS.css', __FILE__),array() );
	wp_enqueue_style( 'Sgt_Multitab_widget_CSS' );
}

add_action( 'wp_enqueue_scripts', 'Sgt_Multitab_widget_CSS',99 );

In my example, i created new css style with name Sgt_Multitab_widget_CSS.css in the same folder of my plugin . Copy my css style like before and save.

It’s so simple right ? 🙂 . Download my plugin here

download widget multi tab plugin here

Thus my article about “How to Create Multi Tab Widget In WordPress with Bootstrap“, may be useful

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

4 Comments

 Add your comment
  1. thanks mas,,
    artikelnya bagus bagus…

  2. Hi, Sigit Prasetya Nugroho. How are you?

    Very nice tutorial. Thanks a lot.

    I follow your steps it seems to work very well. But I have one question. Can you help me?

    How can I make the query shows me all popular products except those are in 1 speficific category?

    Once again. Thanks a lot! 🙂

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: