WP-Tabbity

Download Instructions

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

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.

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.

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 -->
{wp-tabbity}
Content for Tab One appears here
{/wp-tabbity}
{wp-tabbity}
Tab Two content goes here
{/wp-tabbity}

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

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.

Current Version: 0.1-beta

• 0.1 ~ Initial public release, still beta.

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 (example.com/page?tab=mytab)
4. There appears to be an issue with images not being properly wrapped within the WP-Tabbity DIVs