Aweber - Email Marketing Made Easy
Tabbed Widget Tutorial For Thesis WordPress Theme Using Chris Coyier’s Organic Tabs

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

June 20, 2010 · 140 comments

in Thesis

Thesis 1.x Notice: Thanks for reading this post! So, here's the deal. I wanted you to be aware that this post was written prior to the release of Thesis 2. So that means the instructions or other information provided applies specifically to Thesis 1.x and not the latest 2.x version. Thanks!

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.

Possible jQuery conflict with other frameworks: This is something I ran into, so if after completing this tutorial, the tabs in your tabbed widget don’t work, it may indicate that there is some type of conflict with jQuery and another framework that could be active on your site. You can ignore this part if things works out for you, but if not, use this code instead of the code above:
// 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.

Quick Sidenote: For the popular posts I’m using some code which will show the popular posts by comment count. You will find many blog posts that will show you how to do this by querying the MySQL database to get the popular posts by comment count. Whilst that method is not incorrect, the better way to do it is to use WP Query. Thanks to WP Shout for this code.

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!

Was this post helpful? Consider subscribing to my blog via RSS or

This Site Runs on the Thesis WordPress Theme

Thesis Theme thumbnail

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced user, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:

{ 140 comments… read them below or add one }

Leave a Comment

When commenting, you can use basic HTML tags. If you are pasting in any code, please escape it here and then include that code within <pre></pre> tags. Thanks!

CommentLuv badge

Previous post:

Next post: