Tabbed Widget Tutorial For Thesis WordPress Theme Using Chris Coyier’s Organic Tabs

There are numerous tutorials out there for adding a tabbed widget to your sidebar in Thesis. I’d say one of the more popular ones is from MattFlies.com. Well, this is yet another tutorial like that, but the difference is that I chose to use Chris Coyier’s Organic Tabs method to add a tabbed widget to your Thesis theme.

Chris provides two examples in his post, and this tutorial will implement the first example. I have also made some minor modifications to the markup and css to make it more generic for this tutorial

How To Add A Tabbed Widget in Thesis

I’m not saying this is the only way to implement this tabbed widget, it’s just that this is how I’ve chosen to do it. Actually calling it a widget isn’t quite accurate in the true sense of the word. You’re not adding this by using a plugin and then dropping a widget in your sidebar. I just wanted to clarify that. You can see what it looks like in the sidebar of this blog. So let’s get started.

Step 1: Download this file:

You will need this file, so download it now.

Step 2: Copy the file to your server:

Using a FTP program like FileZilla, upload the file to your theme folder. It goes without saying, but don’t forget to unzip it first of course. I’d recommend you place it inside of your custom folder within a folder called ‘js’. So the path would be something like this: ../custom/js/. Wherever you choose to save it, make sure you know where it is. When I reference this file later in the tutorial, I’m using this location, so if you choose a different location, be sure to update that in the applicable code below.

Step 3: Add the header scripts

As I mentioned, there are a number of ways to achieve most of the steps in this tutorial, and there are numerous ways to do this one. The applicable scripts can either be added to the “Header Scrips” section in the Thesis “Site Options” or they can be copied to the applicable hook using the Thesis Openhook Plugin. I chose to include them in the custom_functions.php file. So go ahead and paste this code in that file:

// organic tabs header scripts
function organic_tabs_scripts () {
?>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/organictabs.jquery.js"></script>
    <script type='text/javascript'>
		$(function() {
    
            $("#organic-tabs").organicTabs();
   
        });
    </script>
<?php
}

add_action('wp_head','organic_tabs_scripts');

Note that I am loading jQuery there on line #4. If it isn’t loaded before the organic tabs script, the tabs won’t work. If you already have jQuery being loaded from a plugin or something, then there’s no need to load it again, and you can remove that line. Just make sure it’s loaded before the organic tabs script.

// organic tabs header scripts
function organic_tabs_scripts () {
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/organictabs.jquery.js"></script>
    <script type='text/javascript'>
        jQuery.noConflict();
		jQuery(function() {
    
            jQuery("#organic-tabs").organicTabs();
   
        });
    </script>
<?php
}

add_action('wp_head','organic_tabs_scripts');

This fix uses jQuery.noConflict(); which you can read more about here.

Step 4: Add the HTML

We’re almost done! The 4th step to adding this tabbed widget to your Thesis theme is to add the HTML code. Again, numerous ways to add this but I chose to use the custom-functions.php file. Also note that you can choose to put whatever you want inside each of the tabs, or even add more tabs. I chose to use 3 tabs which include recent posts, popular posts and recent comments. Taking it further, there are countless ways to populate these sections of the tabbed widget. You could add some static code if you’d like, you could use plugins, or a combination of plugins and code.

For this tutorial, I am using the Recent Posts Plugin by Rob Marsh for the recent posts, I am using some custom code for the popular posts and for the recent comments, I’m using the Recent Comments Plugin also by Rob Marsh.

If you use these plugins, be sure to first install the Post Plugin Library plugin as it’s required. Of course, you will also have to install the plugins I just mentioned above, otherwise it won’t work. And don’t feel as if you’re stuck using these. Add whatever list items you want between each <ul id=""> tag.

Now, just copy this to the custom-functions.php file:

// organic tabs
function organic_tabs () {
?>
<div id="organic-tabs">
			
	<ul class="nav">
		<li class="nav-one"><a href="#recent" class="current">Recent Posts</a></li>
		<li class="nav-two"><a href="#popular">Popular Posts</a></li>
		<li class="nav-three last"><a href="#comments">Recent Comments</a></li>
	</ul>
	
	<div class="list-wrap">
	
		<ul id="recent">
			<?php recent_posts(); ?>
		</ul>
		 
		 <ul id="popular" class="hide">

			<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
			<?php while ($popular->have_posts()) : $popular->the_post(); ?>	

			<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?> (<?php comments_number('0','1','%'); ?>)</a></li>

			<?php endwhile; ?>

		 </ul>
		 
		 <ul id="comments" class="hide">
			<?php recent_comments(); ?>
		 </ul>
						 
	 </div> <!-- END List Wrap -->
 
 </div> <!-- END Organic Tabs  -->

<?php
}

add_action('thesis_hook_after_multimedia_box','organic_tabs');

By the way, notice that this will insert the tabbed widget after the Multimedia Box using the Thesis hook thesis_hook_after_multimedia_box. You’re obviously not limited to placing it here. That’s just where I chose to put it for this tutorial. You may use any of the other Thesis hooks to place the tabbed widget where you want, although it makes most sense where I have it.

One note here to appease the purists, and I certainly agree with this; I realize the unordered list ID’s are not completely semantic in that they are named recent, popular, and comments. If you decide to put something else in any of these lists, then these names won’t make sense. Feel free to update them as you wish, but be sure to update them wherever they are referenced in both the custom-functions.php file as well as the custom.css file.

Step 5: Add The CSS

The last step is to add the css code to your stylesheet in order to style the tabbed widget. I’m including the same styling from Chris Coyier’s tutorial. You may want to customize this code so the tabbed widget looks how you want it to look in your Thesis sidebar. I recommend you get Firebug to help you with this. Now go ahead and paste this code into your custom.css file.

/* organic tabs */

.hide { position: absolute; top: -9999px; left: -9999px; }
#organic-tabs { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }

#organic-tabs .nav { overflow: hidden; margin: 0 0 10px 0; }
#organic-tabs .nav li { width: 97px; float: left; margin: 0 5px 0 0; }
#organic-tabs .nav li.last { margin-right: 0; }
#organic-tabs .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
#organic-tabs .nav li a:hover { background-color: #111; }

#organic-tabs ul { list-style: none; }
#organic-tabs ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#organic-tabs ul li a:hover { background: #fe4902; color: white; }
#organic-tabs ul li:last-child a { border: none; }

#organic-tabs ul li.nav-one a.current, #organic-tabs ul.recent li a:hover { background-color: #0575f4; color: white; }
#organic-tabs ul li.nav-two a.current, #organic-tabs ul.popular li a:hover { background-color: #d30000; color: white; }
#organic-tabs ul li.nav-three a.current, #organic-tabs ul.comments li a:hover { background-color: #8d01b0; color: white; }

#organic-tabs #comments { margin-top: 0; }

By the way, I added the last line myself because I found that the default Thesis styling was adding some margin on the recent comments section.

That should do it! If you’ve done it right, you should see the tabbed widget in your Thesis sidebar like the one on this site. If you need help or have a question, go ahead and leave a comment below. If for some reason you need to add some HTML code to your comment, escape it here and then include that code within <pre></pre> tags. If this worked for you, it would be great if you left a comment too!

Tagged as: Tabbed Widget, thesis tips