What’s the best script?
The recent blog redesign gave me a bit of a head ache. In order to implement the tabbed navigation from my sidebar, I had to test a couple of scripts. I know all of them integrate like a charm on other WordPress blogs, but for one reason or another, each time I finished setting up and customizing a certain script, some new weird bug showed up.
The problems were caused by various factors (some of them very weird): having other anchor links (like #comments) in my WordPress theme, a conflict between Prototype framework used by WordPress and jQuery used by a script, etc, etc.
So after testing DomTab, Tabifier and idTabs, I finally managed to get the job done. When all hope was lost, I thought I should give Yahoo! UI Library a shot. They have this really neat component called TabView, which in my case worked like clockwork. On top of that, it’s pretty quick and has absolutely no flicker or delay when loading the content. All the other scripts had at least a small delay.
I saw implementations of each of the above mentioned scripts on WordPress and they all have pretty much the same HTML structure. Still, I think the Yahoo! TabView is the best choice.
Implementing Yahoo! TabView
In this WordPress tutorial I won’t go into too many details about the script or HTML, since you can get all that info from the TabView homepage. Instead, I will focus on the specifics of using this script with WordPress, as well as pointing out what CSS code you need to add to your style.css file, for a seamless integration with your WordPress theme.
First of all, you need to know that you won’t be able to insert widgets into the tabbed navigation, using the visual editor from WordPress admin. You can still add widgets, but outside the tabbed navigation.
I personally stopped using widgets in themes that I design for myself. So if you are ready to “get your hands dirty” and really customize your own theme, I think this is the best way to go.
So just add the script reference to your header.php and the HTML code to the sidebar.php file. Now you’re ready to perform some CSS surgery. 😉 We’ll use the script’s built-in styles.