Many sites now use tabs in their sidebars, it looks nice and it saves a lot of space on the site. When I decided to change my theme I wanted to have tabbed widget. First I was testing some plugins for Wordpress which should make tabs from the normal widgets output, but none of them worked. So I’ve decided to make my own and it hasn’t been hard.
The easiest way of doing this for me was using jQuery plugin for tabs, there are a lot of them but I’ve decided to use idTabs.
Now I will show how simple it is to use it. First you need to make sure that your theme is loading jQuery, just load your site in browser view the source and check if there is the line like:
<script src="http://yourdomain.something/wp-includes/js/jquery/jquery.js?ver=1.3.2" type="'text/javascript'"></script>
If there isn’t a line like that, go to your theme folder, find header.php and between head tags add that line.
Download the idTabs js from here file and upload it to the same directory like jQuery and add below jQuery code this:
<script src="http://yourdomain.something/wp-includes/js/jquery/jquery.idTabs.min.js" type="'text/javascript'"></script>
Next go to your theme folder and search for sidebar.php, open it and before the line:
< ?php if( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar() ) : ?>
Add this:
<!--BEGIN-#tabbed widget-->
<div id="tabswg" class="tabs">
<div id="menu">
<ul>
<li><a class="selected" href="#tab1">Name of tab1</a></li>
<li><a href="#tab2">Name of tab2</a></li>
<li><a href="#tab3">Name of tab3</a></li>
</ul>
</div>
<div id="tab1">
<!--PHP-code-for-tab1-->
</div>
<div id="tab2">
<!--PHP-code-for-tab2-->
</div>
<div id="tab3">
<!--PHP-code-for-tab3-->
</div>
</div>
<script type="text/javascript">
$("#tabswg ul").idTabs();
</script>
<!--END-#tabbed widget-->
You can change the names of tabs and also links, but links must start with # and proper div needs to have the same id like the reference of link just without #.
On many Wordpress blogs there are tabbed widgets with tabs like: popular posts, recently popular, recent comment, recent posts or something else. No matter what you decide to use you will need to add some Wordpress functions or some plugin functions. If you want to have popular posts tab you will need to have a plugin for counting views of posts and making a list of popular posts I suggest Top 10. Put the code bellow in the divs with comments like: .
Here is the code you’ll use for making tabs:
For recent posts tab:
<ul>< ?php
// replace 5 with the number of posts you want to show.
$aRecentPosts = new s2K9_Query("showposts=10");
while($aRecentPosts->have_posts()) : $aRecentPosts->the_post();?>
<li><a href="<?php the_permalink() ?>" title="Permanent Link to < ?php the_title(); ?> " rel= "bookmark">< ?php the_title();?></a></li>
< ?php endwhile; ?>
</ul>
For recent comments (haven’t test this):
< ?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 10";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n<ul>";
foreach ($comments as $comment) {
$output .= "\n<li>".strip_tags($comment->comment_author)
.":" . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."</a></li>";
}
$output .= "\n</ul>";
$output .= $post_HTML;
echo $output;?>
For popular posts and recently popular posts you can use as I’ve suggested Top 10. The good thing about it is that some settings related to the output of the popular posts can be changed in admin panel of the blog. For example if you want for recently popular posts to track the views for last 7 days you can change that, by default it tracks just the views for one day and it’s named Daily popular. Also you will probably wont to delete those h3 tags, go to the plugin settings and find title of popular posts and title of daily popular posts clear everything there and leave it empty.
Code for popular posts tab:
< ?php if(function_exists('tptn_show_pop_posts')){tptn_show_pop_posts();} ?>
Code for recently popular or daily popular posts tab:
< ?php if(function_exists('tptn_show_daily_pop_posts')){tptn_show_daily_pop_posts();} ?>
To make this widget look like tabs, you need to style them with css, you can download one similar to the one I’m using here. Upload and include it into to header.php of your template or simply copy whole code and paste it to the your default stylesheet.
Now here is a simple html demo of tabs. It has clean and easy to read code if you need to check something.
If you have trouble with jQuery maybe it’s similar to one I had, mine is solved by this.
If McDonalds were run like a software company, one out of every hundred Big Macs would give you food poisoning, and the response would be, ‘We’re sorry, here’s a coupon for two more.
