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

The explanation :

The basic form to creating toggletabs bootstrap :

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

2. Query to display the latest posts widget wordpress

3. Code to display comments on wordpress

4. Code to display tags cloud

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

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

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

The explanation :

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

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

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.


 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.

This site uses Akismet to reduce spam. Learn how your comment data is processed.