Welcome, guest!

Feel free to read the blog, browse for themes, join the club, or search the site:

Cool Stuff

Browse: Home / Themes / Hybrid / Hybrid Tabs

Hybrid Tabs

You need to be using version 2.8 of WordPress to use the latest version of this plugin.

The Hybrid Tabs plugin is a WordPress plugin that allows you to have tabbed widgets. The tutorial for using this plugin is included within your plugin’s download in a file named readme.html.

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.

  • Bookmarks/Links (individual link category lists).
  • Authors.
  • Calendar.
  • Categories.
  • Daily archives.
  • Meta.
  • Monthly archives.
  • Pages.
  • Recent posts (alphabetical).
  • Recent posts (chronological).
  • Random.
  • Tag/term clouds (based on all taxonomies).
  • Weekly archives.
  • Yearly archives.
  • Custom 1 – 6 (early beta users should move to the new system).

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.

  • The first part (custom_1, basketball), is a unique identifier for your custom tab.
  • label is what you want to name/title your custom tab (can be changed in widget settings).
  • callback is the function you’ll use to display the content of your custom tab.

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.