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.
hybrid-tabs.zip
folder.hybrid-tabs
folder to your /wp-content/plugins
directory.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');
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).
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).
hybrid_tabs_yearly_archives
.hybrid_tabs_monthly_archives
.hybrid_tabs_weekly_archives
.hybrid_tabs_daily_archives
.hybrid_tabs_postbypost_archives
.hybrid_tabs_authors
.hybrid_tabs_categories
.hybrid_tabs_pages
.hybrid_tabs_random
.hybrid_tabs_tags
.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.
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.
Hybrid Tabs is licensed under the GNU General Public License, version 2 (GPL).
This plugin is copyrighted to Justin Tadlock.
2008 © Justin Tadlock