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:
-
<script src=<?php bloginfo('template_directory'); ?>"></script>
Make sure that there is a call to load the jQuery core as well
either
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
or
-
<script src='<?php bloginfo('template_directory'); ?>' type="text/javascript"></script>
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 wp_list_categories( 'orderby=name&title_li=' ); ?>
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 random_posts(); ?>
-
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:
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;}
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.
Thanks for this post. I was having the same problem with WordPress and adding tabs. Very easy to setup and works great. Now I just have to style it to match the rest of my site. Just purchased StandardTheme and have been working on a redesign. Thanks again!
Nate Pointer´s last blog ..Sample Post
Thanks for this post. I was having the same problem with WordPress and adding tabs. Very easy to setup and works great. Now I just have to style it to match the rest of my site. Just purchased StandardTheme and have been working on a redesign. Thanks again!
Very cool, I'll "Keep an eye out" for the new things coming to greybucket.net
Phillip Gibb´s last blog ..Tabbed Widget Part Two