A guide to Hybrid Tabs

Hybrid Tabs is a plugin that allows you to have tabbed widgets with the Hybrid WordPress theme. Currently, you can add up to 10 tabbed widgets to your theme on a single page without worry of a conflict between the tabs.

The plugin is in its beta stage, and I'd love to get feedback and hear ideas about things that should be added (without adding bloat to the plugin) in the ideas forum. I know many of you have asked for this to be included in the core of Hybrid, but that is something that won't be happening. Hence, the plugin.

How to install the plugin

Uzip the hybrid-tabs.zip folder.
Upload the hybrid-tabs folder to your /wp-content/plugins directory.
In your WordPress dashboard, head over to the Plugins section.
Activate Hybrid Tabs.

Setting up your theme's CSS

The plugin was designed to work with multiple child themes, so it doesn't load any CSS by default. You'll have to add the style rules to your theme. I've created the styles for Hybrid and its child themes. Look in the plugin's /css folder for your theme.

In this example, I'll show you how to set up the Leviathan theme for widgets. Other themes should be handled the same way.

Open the /hybrid-tabs/css/leviathan folder. Copy tabs.php and place it in your Leviathan child theme. Then, in Leviathan's style.css file, find this code:

/* Get base CSS */
@import url('../hybrid/library/css/21px.css');

/* Get plugins CSS */
@import url('../hybrid/library/css/plugins.css');

We need to add our tabs stylesheet below that.

@import url('tabs.css');

How to use the plugin

Once you've activated the plugin, go to Widgets control panel and select a widget section that you'd like to add tabs to.

You can add up to six tabs per tabbed widget, but not all themes and widget areas will accommodate that many, so you might not be able to add that many tabs without breaking the layout. You'll just have to test it to see what works best for you. For each tab, you can choose pre-configured tabbed content (I'll cover custom content later) and input a custom title (not required).

What each tab does

Most tabs are pre-configured to display a certain amount of content, which I will list here. If they can be filtered, the name of the filter will be listed as well (advanced users only).

Bookmarks/Links: This is the most interesting one because it's not listed as Bookmarks/Links. Each one of your Link Categories will be listed separately. Each time you add a new Link Category, it will be automatically added to the tab list. This will allow you to make completely custom lists.
Yearly Archives: List of 10 links to your yearly archives. You can use arguments for wp_get_archives() to filter hybrid_tabs_yearly_archives.
Monthly Archives: List of 10 links to your monthly archives. You can use arguments for wp_get_archives() to filter hybrid_tabs_monthly_archives.
Weekly Archives: List of 10 links to your weekly archives. You can use arguments for wp_get_archives() to filter hybrid_tabs_weekly_archives.
Daily Archives: List of 10 links to your daily archives. You can use arguments for wp_get_archives() to filter hybrid_tabs_daily_archives.
Post By Post Archives: List of 10 links to your latest posts. You can use arguments for wp_get_archives() to filter hybrid_tabs_postbypost_archives.
Authors: List of authors on your site. You can use arguments for wp_list_authors() to filter hybrid_tabs_authors.
Categories: Creates a list of your post categories. You can use arguments for wp_list_categories() to filter hybrid_tabs_categories.
Pages: Displays a list of your site's pages. You can use arguments for wp_list_categories() to filter hybrid_tabs_pages.
Random: Shows a list of 10 random posts. You can use arguments for get_posts() to filter hybrid_tabs_random.
Tags: Displays a tag cloud. You can use arguments for wp_tag_cloud to filter hybrid_tabs_tags.
Custom 1 - 6: Allows you to create completely custom content by using a filter (see below).

Custom Tabs

Creating custom tabs is for advanced users only. You need to be comfortable working with PHP to even attempt this. I would say you need to be at least an intermediate-level PHP coder and have a workable knowledge of how the WordPress add_filter function works.

With that said, I'll give you a few examples of how to filter the Custom 1 tab to show completely custom content.

This first example is how to add a custom paragraph of text. Open your child theme's functions.php file and add this code:

<?php

add_filter('hybrid_tabs_custom_1', 'my_tabs_custom_1');

function my_tabs_custom_1($custom) {
	$custom = '<p>This is a custom paragraph of text telling you about my site.  Take a look around.  It\'s very cool isn\'t it?</p>';
	return $custom;
}

?>

Maybe you just want to add something like an image in the tab.

<?php

add_filter('hybrid_tabs_custom_1', 'my_tabs_custom_1');

function my_tabs_custom_1($custom) {
	$custom = '<img src="http://link-to-image.jpg" alt="Example" title="Example" width="300" height="200" />';
	return $custom;
}

?>

How about we try out something more advanced, such as adding a video?

<?php

add_filter('hybrid_tabs_custom_1', 'my_tabs_custom_1');

function hybrid_custom_tabs_1($custom) {
	$custom = '<object type="application/x-shockwave-flash" data="http://video-embed-url" width="300" height="250">';
		$custom .= '<param name="movie" value="http://video-embed-url" />';
		$custom .= '<param name="allowfullscreen" value="true" />';
		$custom .= '<param name="wmode" value="transparent" />';
	$custom .= '</object>';
	return $custom;
}

?>

You can do pretty much anything. The sky is the limit, as they say. One important thing to note is that if you filter a tab once, you can't filter it again for a different tab set. But, that's OK because you have up to six tabs you can filter.

Plugin support

If you need help with the plugin, just stop by the support forums.

Just remember that this plugin is in a beta stage and there's the possibility of a bug here or there. If you come across something that doesn't seem to work right, please report it. That way, the entire community benefits.

Copyright & license

Hybrid Tabs is licensed under the GNU General Public License, version 2 (GPL).