I recently made a number of updates to a client site that I’d done last year. Part of the initial design of this particular site called for a number of tabbed “widgets”. However, when the site was originally implemented, I was not able to find a suitable tabbed interface option within the library of WP plugins, so I ended up handcoding an implementation using tabber.js using the directions found here. Functionally, it worked quite well and I was able to get the CSS to match my theme without significant fuss. However, there was always a load lag in the content that was quite noticeable and distracting since the content was inserted in the middle of the client sidebar using Thematic’s betweenmainasides hook.

Shortly after my client’s site had launched, the Section Widget plugin was released and shortly thereafter won the WP plugin competition. I’ve been using it on a number of projects since, but never got around to exploring the Section (Tabbed) version. As part of the recent updates to my client site, I began poking around to see if it would work as a replacement for Tabber.

My initial results were disappointing — using shortcodes defined in my functions file to call various bits of plugin functionality resulted in the correct content being shown, but it was floating above the tabbed area rather than in the tab box. Not usable at all. After a little more digging in the WordPress support forums, I installed the PHP Shortcode plugin and entered the needed PHP functions directly into the tabbed widget interface. Success!

<ul id="show-recent-comments">
[php]get_recent_comments();[/php]
</ul>

All that remained was to copy the CSS styling that I’d created for the Tabber implementation to the classes used by Section Widget. Fortunately the tabbed code is very well annotated with style classes and the conversion was done very quickly.

Ideally, I’d love to be able to drag any widget onto the Section Tabbed Widget panel and have that functionality appear in a tabbed interface. Until then, I have to make sure that a PHP function is callable — something that is not immediately obvious for plugins designed to only be used as WYSIWYG widgets.