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.

I always love getting feedback and hearing 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

  1. Uzip the hybrid-tabs.zip folder.
  2. Upload the hybrid-tabs folder to your /wp-content/plugins directory.
  3. In your WordPress dashboard, head over to the Plugins section.
  4. 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. For child themes that support the tabs widget, there'll be a tabs.css file available within the download package.

In order to use the available tabs CSS file, open your child theme's style.css file and find this line:

/* @import url('tabs.css'); */

Change it so that it looks exactly like this:

@import url('tabs.css');

Once that's done, save the file. You're ready to go!

How to use the plugin

Once you've activated the plugin, go to the 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 your design. For each tab, you can choose pre-configured tabbed content (I'll cover custom content later) and input a custom title.

Available tabs

Most tabs are pre-configured to display a certain amount of content. These are basic WordPress functions that you usually see used in normal widget areas.

Hybrid Tabs has also been designed to work with several plugins (all need testing). Each plugin will create one or more tabs that you can choose from. I would also be happy to integrate other plugins, if possible, into the widget if you let me know. Here's a list of the currently-supported plugins:

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 function works.

If you've previously used the Hybrid Tabs in the earlier beta version, you'll love this new way of adding custom tabs. It's much simpler. I'll show you how to easily add two new tabs here.

Open your theme's functions.php file and add this PHP code:

add_action( 'init', 'create_my_custom_tabs' );

function create_my_custom_tabs() {
	register_hybrid_tab( 'custom_1', array( 'label' => 'Hello World', 'callback' => 'hello_world_function' ) );

	register_hybrid_tab( 'basketball', array( 'label' => 'Basketball Scores', 'callback' => 'basketball_scores' ) );
}

Before we move on, let me explain each part of the register_hybrid_tab() function because it's pretty important.

Now, let's create the function that will show our first custom_1 tab content. Add this:

function hello_world_function() {
	echo 'Hello World!';
}

Pretty simple, right? Now, let's show a list of basketball scores (our second tab). Add this:

function basketball_scores() { ?>
	<ul>
		<li>Game 1 (W) 100 - 99</li>
		<li>Game 2 (L) 87 - 93</li>
		<li>Game 3 (W) 103 - 77</li>
		<li>Game 4 (W) 108 - 68</li>
		<li>Game 5 (L) 66 - 79</li>
	</ul>
<?php }

You can do pretty much anything. The sky is the limit, as they say.

Plugin support

I run a WordPress community called Theme Hybrid, which is where I fully support all of my WordPress projects, including plugins. You can sign up for an account to get plugin support for a small yearly fee ($25 USD at the time of writing).

I know. I know. You might not want to pay for support, but just consider it a donation to the project. To continue making cool, GPL-licensed plugins and having the time to support them, I must pay the bills.

Copyright & license

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

This plugin is copyrighted to Justin Tadlock.

2008 – 2009 © Justin Tadlock