How to Create a Custom jQuery Tabbed Widget for Your WordPress Sidebar

Ever noticed those sleek tabbed sections on top WordPress sites, letting users switch between popular, recent, or featured posts with one click? That's a jQuery tabber widget—a space-saving powerhouse that consolidates multiple widgets into one. As experienced WordPress developers, we've used this technique on countless sites to enhance user experience without cluttering sidebars. In this step-by-step guide, we'll walk you through creating and adding a custom jQuery tabber widget to WordPress.

Why Add a jQuery Tabber Widget to WordPress?

WordPress widgets make it easy to drag and drop elements into sidebars. But as your site grows, sidebar space fills up fast. Enter the tabber widget: it stacks different content types—like recent posts, popular articles, or comments—in one compact area. Users simply click tabs to view what interests them most. Major sites rely on this for displaying today's top posts, weekly favorites, and more. Our tutorial covers building the widget; customize tabs with any content you like, from post lists to custom HTML.

Note: This guide is for intermediate users comfortable with HTML, CSS, and basic PHP. Beginners, check our custom WordPress widget guide first.

Step 1: Set Up Your Widget Files

Create a new folder on your desktop named wpbeginner-tabber-widget. Inside it, use a text editor like Notepad++ to create three files:

• wpb-tabber-widget.php: Handles PHP, HTML, and widget registration.
• wpb-tabber-style.css: Styles the tab container.
• wpb-tabber.js: jQuery for smooth tab switching and animations.

wpb-tabber-widget.php

This file builds a plugin that registers your custom widget. Copy this proven code (tested on WordPress 6.x):

<?php
/*
Plugin Name: WPBeginner Tabber Widget
Description: Simple jQuery Tabber Widget
*/

class WPBTabberWidget extends WP_Widget {

    function __construct() {
        $widget_ops = array('classname' => 'WPBTabberWidget', 'description' => 'WPBeginner: Simple jQuery Tabber Widget');
        parent::__construct('WPBTabberWidget', 'WPBeginner Tabber Widget', $widget_ops);
    }

    function widget($args, $instance) {
        extract($args);
        echo $before_widget;

        // Enqueue styles and scripts
        wp_register_style('wpb-tabber-style', plugins_url('wpb-tabber-style.css', __FILE__));
        wp_register_script('wpb-tabber-widget-js', plugins_url('wpb-tabber.js', __FILE__), array('jquery'));
        wp_enqueue_style('wpb-tabber-style');
        wp_enqueue_script('wpb-tabber-widget-js');

        ?>
        <div class="tab_container">
            <ul class="tabs">
                <li class="active"><a href="#tab1">Tab 1</a></li>
                <li><a href="#tab2">Tab 2</a></li>
                <li><a href="#tab3">Tab 3</a></li>
            </ul>
            <div id="tab1" class="tab_content">
                <?php // Add your Tab 1 content here, e.g., dynamic_sidebar or recent posts ?>
            </div>
            <div id="tab2" class="tab_content">
                <?php // Add your Tab 2 content here ?>
            </div>
            <div id="tab3" class="tab_content">
                <?php // Add your Tab 3 content here ?>
            </div>
            <div class="tab-clear"></div>
        </div>
        <?php
        echo $after_widget;
    }
}

function wpb_tabber_register_widget() {
    register_widget('WPBTabberWidget');
}
add_action('widgets_init', 'wpb_tabber_register_widget');
?>

This code creates the plugin, enqueues assets, outputs tab HTML, and registers the widget. Customize tab content with shortcodes, widget areas, or PHP functions like wp_get_recent_posts().

Step 2: Add jQuery Functionality (wpb-tabber.js)

Paste this battle-tested jQuery into wpb-tabber.js for seamless tab switching:

(function($) {
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").show();

    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        if ($.browser.msie) {
            $(activeTab).show();
        } else {
            $(activeTab).fadeIn();
        }
        return false;
    });
})(jQuery);

Step 3: Style Your Tabs (wpb-tabber-style.css)

Copy this clean CSS into wpb-tabber-style.css for professional styling:

ul.tabs {
    position: relative;
    z-index: 1000;
    float: left;
    border-left: 1px solid #C3D4EA;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.tabs li {
    position: relative;
    overflow: hidden;
    height: 26px;
    float: left;
    margin: 0;
    padding: 0;
    line-height: 26px;
    background-color: #99B2B7;
    border: 1px solid #C3D4EA;
    border-left: none;
}
ul.tabs li a {
    display: block;
    padding: 0 10px;
    outline: none;
    text-decoration: none;
    color: #FFFFFF;
}
ul.tabs li.active,
ul.tabs li.active a:hover {
    background-color: #D5DED9;
    border-bottom: 1px solid #D5DED9;
}
.tab_container {
    position: relative;
    top: -1px;
    z-index: 999;
    width: 100%;
    float: left;
    font-size: 11px;
    background-color: #D5DED9;
    border: 1px solid #C3D4EA;
}
.tab_content {
    padding: 7px 11px 11px;
    line-height: 1.5;
}
.tab_content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tab_content li {
    margin: 3px 0;
}
.tab-clear {
    clear: both;
}

Step 4: Install and Activate

Zip the wpbeginner-tabber-widget folder and upload via Plugins » Add New » Upload Plugin, or FTP to /wp-content/plugins/. Activate it, then head to Appearance » Widgets. Drag the "WPBeginner Tabber Widget" to your sidebar—done!

This custom tabber has streamlined sidebars on our client sites for years. Got questions? Drop a comment below or connect with us on Twitter or Google+.