Get it All

New Support Page

July 11th:

Major updates are on the horizon for this plugin, due out August 1st. The new update of the plugin will only bring it up to version 0.6 of the plugin, still not considered a full release version and therefore still in beta. These changes will affect the way shortcodes are to be properly entered into a post and the previous method will be rendered inoperable. This is unavoidable, as the first generation of the plugin suffered from some endemic failures of logic (I goofed, in other words!).

In addition to the new version of the plugin, an entirely new version of the documentation will also be required. The new documentation will live in a Page, rather than in the current post, for this reason.

WP-Tabbity provides WordPress blog authors with the ability to leverage the jQuery UI to create an unlimited number of tab groups containing an unlimited number of tabs in any post or page. The plugin uses WordPress’s core shortcode lexicon and the included version of the jQuery libraries to allow quick, easy and versatile use of tabs anywhere on the site.


[wp-tabbity groupid=”basic” id=”download” title=”Download”]

Download Instructions

To download this plugin, visit the repository for WP-Tabbity, located here.


[wp-tabbity groupid=”basic” id=”install” title=”Install”]

Installation Instructions

  1. Download the plugin
  2. Unzip and upload the /wp-tabbity directory and all it’s subdirectories to your /wp-content/plugins directory on your website
  3. Visit your Control Panel and activate the plugin in the Plugins section.
  4. Configure WP-Tabbity by visiting the Settings page for the plugin
  5. Tabs and tab groups can be added to your posts and pages per the instructions on the “Usage and Options” tab.


[wp-tabbity groupid=”basic” id=”config” title=”Configure”]

Configuration Instructions

  1. Once you’ve downloaded and installed the plugin, visit the Settings page for it in your Control Panel
  2. You can set the preferred jQuery Themeroller theme from the drop down list.
  3. Note: You can modify any of these CSS stylesheets to your liking, however your changes will be overwritten when this plugin gets upgraded. Better to make your changes in a copied directory (wp-tabbity/styles/myfancystyle). The plugin will detect the folder name and provide it as an available style to choose.


[wp-tabbity groupid=”basic” id=”use” title=”Usage and Options”]

Basic Usage

To insert a single tab set into your post, you need only provide a minimum of two shortcodes: one wp-tabbity shortcode to specify the content of the tab and one wp-tabbitygroup shortcode to specify where the tabs will appear. It is important to note that all the tabs for a given group must appear before the group itself. Here, with curly braces instead brackets is the most basic usage of WP-Tabbity:

<!-- First, set up your tabs -->


Content for Tab One appears here



Tab Two content goes here


<!-- Now we need to tell WP-Tabbity where to put all this content -->


Note that in the above example, since no title was specified for either tab, WP-Tabbity takes the first ten characters of the content as the title and CSS ID of the tab. If we want to use more than one tab group in a given page or post we must specify the groupid in both the wp-tabbity and the wp-tabbitygroup shortcodes as specified below.

WP-Tabbity Options

{wp-tabbity id="foo" title="Foo" class="bar none" order="0" groupid="first"}
  • id => Not required. Specifies both the CSS ID of the content, and the <a> anchor link to be applied to a given tab. Default: none.
  • title => Not required. Specifies the title to appear within the tab. Default: first ten characters of content.
  • class => Not required. Specifies the CSS class or classes to be applied to the tab. Note that this is in addition to, not overriding, the classes applied to it via jQuery. Default: “wp-tabbity”
  • order => Not required. Specifies the order in which this tab will appear in the list of tabs. Default: order of appearance.
  • groupid => Required if more than one! Specifies what wp-tabbitygroup shortcode will get this tab. Unless you require more than one tab group, this is not required. Default: “aTabbityGroup”

WP-Tabbitygroup Options

{wp-tabbitygroup groupid="first" groupcls="foo" grouptitle="First"}
  • groupid => Required if more than one! Identifies the group as one out of two or more. Not required unless there’s more than one group. Must correspond to the groupid specified in the wp-tabbity options. Default: “aTabbityGroup”
  • groupcls => Not required. Specifies the CSS class or classes you wish to apply to this group in addition to, not overriding, the classes applied to it via jQuery. Default: “wp-tabbity-group”
  • grouptitle => Not required. Specifies the title you wish to appear above the group, in <h2 class=”wp-tabbity-title”> tags. Default: none.


[wp-tabbitygroup groupid=”basic” grouptitle=”Plugin Info”]

[wp-tabbity groupid=”extra” id=”changelog” title=”Change Log”]

Current Version: 0.1-beta

  • 0.1 ~ Initial public release, still beta.


[wp-tabbity groupid=”extra” id=”todo” title=”To Do / Issues:”]

I welcome any suggestions users might have for this plugin. Please comment below to let me know what you think and be sure to subscribe to comments to keep up with the latest developments. Currently, the plans for this plugin as go-forward projects include the following list:

  1. Bug: problem with automatically-generated content IDs when the first ten characters of two tabs is the same.
  2. Add TinyMCE buttons to the Write Post/Page screens.
  3. Add the ability to load the page with a specific tab pre-loaded via $_GET (
  4. There appears to be an issue with images not being properly wrapped within the WP-Tabbity DIVs


[wp-tabbitygroup groupid=”extra” grouptitle=”Additional Information”]