Have you seen a tabber area on popular sites that allows you to see popular, recent, and featured posts with just one click? This is called the jQuery tabber widget, and it allows you to save space on user screen by combining different widgets into one. In this article, we will show you how to add a jQuery Tabber Widget in WordPress.

Why You Should Add a jQuery Tabber Widget?

When running a WordPress website, you can easily add items to your sidebars using drag and drop widgets. As your site grow, you might feel that you don’t have enough space in the sidebar to show all the useful content. That’s exactly when a tabber comes in handy. It allows you to show different items in a same area. Users can click on each tab and see the content they’re most interested in. A lot of big name sites use it to show popular article today, this week, and this month. In this tutorial we will show you how to create a tabber widget. However, we are not showing you what to add in your tabs. You can add basically anything you like.

Note: this tutorial is for intermediate level users and will require HTML and CSS knowledge. For beginner level users please refer to this article instead.

Creating jQuery Tabber Widget in WordPress

Let’s get started. First thing you need to do is create a folder on your desktop and name it . After that, you need to create three files inside this folder using a plain text editor like Notepad.

The first file we’re going to create is . It will contain HTML and PHP code to create tabs and a custom WordPress widget. The second file we will create is , and it will contain CSS styling for the tabs container. The third and the last file we will create is  which will contain the jQuery script for switching tabs and adding animation.

Let’s start with  file. The purpose of this file is to create a plugin that registers a widget. If this is your first time creating a WordPress widget, then we recommend that you take a look at our how to create a custom WordPress widget guide or simply copy and paste this code in  file:

In the code above, we first created a plugin and then inside that plugin we created a widget. In the widget output section we added scripts and stylesheet and then we generated the HTML output for our tabs. Lastly we registered the widget. Remember, you need to add the content that you want to display on each tab.

Now that we have created the widget with PHP and HTML code needed for our tabs, the next step is to add jQuery to display them as tabs in the tab container. To do that you need to copy and paste this code in file.

Now our widget is ready with jQuery, the last step is to add styling to the tabs. We have created a sample stylesheet that you can copy and paste in  file:

ust upload  folder to your WordPress site’s directory through FTP. Alternately, you can also add the folder to a zip archive and go to Plugins » Add New in your WordPress admin area. Click on the upload tab to install the plugin. Once the plugin is activated, go to Appearance » Widgets, drag and drop  pluginthemehub Tabber Widget to your sidebar and that’s it.