Tabbed Widget Part Two

Previously I wrote of my frustrations and desire to figure out tabbed widgets: Tabbed Widgets Part One. Funny that I had to struggle to find a way to display the code in a way that would not be parsed and or run by the blog engine. Hence the delay. However I found a plugin that suited me: iG:Syntax Hiliter. Don’t let the age of the plugin worry you, I run WordPress 2.9.2 – at the time or writing this – and it works.
You’ll also notice that I have extended the use of the tabs into the post footer where I show:

• Author Information (yes you can guest post)
• Related Posts
• Top Posts in this category

This is how I did it

Script

• Download the idTabs JavaScript file; currently there is version 2.2 and beta version 3.0.

• Extract the script/s into your theme’s js folder

Add the call to the scripts in your Theme’s header.php file:
[js][/js]
Make sure that there is a call to load the jQuery core as well

either

[js][/js]

or

[js][/js]
PHP Calls

• Obtain the plugins necessary to generate the lists that you may want to generate. The two lists I have are:
  • Top Posts. I made use of Popularity Contest, it has some great examples and the plugin itself produces some great information that can improve your blog.
  • Categories. I used the built in function wp_list_categories to list the categories without the heading:
    [php]
    [/php]

    Check out WordPress Codex for how you can further make use of wp_list_categories.

  • For random posts, I used the build in call:
    [php]
    
    [/php]

If you are wanting to add this as a widget and are also wanting to make use of php functions to generate lists then you will need to make use of a widget that can execute php code. The one that worked for me was phpCode. Add this widget to your sidebar.
HTML/PHP Code
Add the code that you need:

[html]

[/html]
CSS
[css].idTabs { margin:0;padding:0 0 10px 0;}
.idTabs ul { background:#000; padding:5px 0 0 5px; float:left; width:302px; }
.idTabs li { list-style:none; /*Try deleting this float*/ float:left; padding:0;}
.items li { list-style-type:square;}
.idTabs a { display:block; background:#000; color:snow; padding: 0 5px 0 5px!important; font:bold 12pt Arial; text-decoration:none; }
.items>div a { display:block; background:222; color:snow; padding: 2px 0 0 5px!important; font:10pt Arial; text-decoration:none; width:288px;border:none;}
.menu>div a { display:block; background:222; color:snow; padding: 2px 0 0 5px!important; font:10pt Arial; text-decoration:none; width:288px;border:none;}
.menu>div a:hover { display:block; background:#333; color:snow; padding: 2px 0 0 5px!important; font:10pt Arial; width:288px;border:none;text-decoration:underline;}
.idTabs a.selected { background:#FFF!important; color:#000!important; padding: 0 5px 0 5px!important}
.items>div { display:none; float:left; margin:0.1em 0 0 0.5em; color:#fff; background: #fff; margin: 0 0 15px; padding:5px;width:100%;}
.items>div a:hover{ color:#eee; background: #333;}
.items {padding: 0 0 5px 0;}
[/css]

Did this help you? Please let your peeps know and tell me what you think or if you have any other suggestions.
Also this was quite a learning curve for me. Let me know what you have learned lately.