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 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="" type="text/javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/organictabs.jquery.js"></script>
    <script type='text/javascript'>
		$(function() {


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="" type="text/javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/organictabs.jquery.js"></script>
    <script type='text/javascript'>
		jQuery(function() {


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>
	<div class="list-wrap">
		<ul id="recent">
			<?php recent_posts(); ?>
		 <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 id="comments" class="hide">
			<?php recent_comments(); ?>
	 </div> <!-- END List Wrap -->
 </div> <!-- END 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 }

Justin Basini July 5, 2010 at 4:25 am

For some reason the tabs don’t call up the content – therefore the tabs never change. Any ideas?

Reply July 5, 2010 at 9:34 am

Hi Justin. It’s difficult to troubleshoot that without seeing the implementation you made. I take it you’ve followed all the instructions? If you’d like I can take a closer look at it for you. Go ahead and contact me on the contact form and I’ll ask you for some information.


Dr. Lawrence Kindo July 29, 2010 at 12:48 pm

Nice tutorial. Step-by-step and detailed tutorial for tabbed widgets.

I had been looking for this one for quite some time. I really like how it runs on this blog. Will give it a try on my blog sometime.

Thanks for this tutorial. Will let you know how it progresses.


Tom Smith August 4, 2010 at 12:55 pm

Hi there , thanks for this tutorial … i think i did all the steps yet the tabs don’t change over … when i run firebug I get the following error … “$ is not defined Line 19″ ….

Do you have any advice for me? Thanks!

Reply August 4, 2010 at 1:03 pm

Hi Tom. Yeah, looks like you have a conflict with frameworks. Scroll up and look for the part in this post that talks about jquery conflicts. It’s near the top half and there’s a solution. Let me know if that worked for you. And thanks for commenting!


Tom Smith August 4, 2010 at 1:09 pm

Hi there,

I actually tried that earlier and (now again) then I get a “jQuery is not defined ” error as well …
I’ve now played with your tutorial for the last two days with no luck … any other suggestions? Thanks for the post and reply!

Reply August 4, 2010 at 2:08 pm

Hi Tom, looking at your site, jquery needs to get loaded before the organic tabs scripts. It’s loading at the bottom of the page. That should fix it. I updated the tutorial to reflect this. Thanks.


Tom Smith August 4, 2010 at 10:02 pm

Yes .. this fixed my issue … thanks for your tutorial and help!
I really like it.
Sites like yours is a lifeline for newbies like me!


Lisa August 12, 2010 at 1:46 am

Hi There.
Thanks for this tutorial, unlike some of the other tabbed widget tutorials, I actually managed to get this one to display in my sidebar. I’m stuck on one thing. All the tutorials seem to have Recent Posts, Recent Comments and Popular Posts as their tabs and I’m struggling to find the code to including other things. I’d like to be able to have my Categories, Archive (Old Ramblings) and Blogroll (Loving These) in these tabs but I just can’t find how do to it, any thoughts?
Cheers, Lisa

Reply August 16, 2010 at 11:07 pm

Hi Lisa. Thanks for commenting. Your comment got flagged as spam and only saw it now… I’d have responded sooner… Anyway, you can achieve all of those using standard WordPress template tags. Here’s what they look like and I also provided you with links to the Codex pages for each one so you can read more and learn how to use them. Good luck!

<?php wp_list_categories( $args ); ?>

<?php wp_get_archives( $args ); ?>

<?php wp_list_bookmarks( $args ); ?>


Julie @SavvyEats December 31, 2011 at 12:46 pm

I am trying to set this up with Popular Posts– Recent Posts — Blogroll as my tabs. Something about the blogroll tab is making it so that none of the tabs are working. If I replace the with , the widget works just fine. If I put the bookmarks php back in, it stops working. Any help?


Julie @SavvyEats December 31, 2011 at 12:51 pm

I forgot to mention that the site in question is

Reply December 31, 2011 at 1:33 pm

I found the problem. jQuery is being loaded twice on the page. It’s loading at the top and bottom of the page. Could be a plugin that’s loading it as well. Try disabling the plugins one by one. Also try remove the reference to jQuery in the code from this tutorial. When I removed one the jQuery reference at the bottom of the page, the widget worked just fine, even the blogroll. Thanks.


Julie @SavvyEats January 1, 2012 at 11:53 am

Disabled and renabled all plugins one by one, and removed jQuery reference in line 4 of the code. It appears to be the blogroll php code that is causing the problems. Any advice, or do I need to remove the blogroll from the tabbed widget if I want it to work?

Reply January 1, 2012 at 12:09 pm

Just had a look. I really don’t think it’s the blogroll that’s causing the issue. The problem now is that you need to load jQuery BEFORE the organic tabs script is called. Right now, it isn’t being loaded before, but rather after in the footer. This is because you removed the jQuery at the top. The one being referenced at the bottom needs to be removed. Something is loading it there. Maybe try and use the thesis_hook_after_html hook for when you load the organic tabs script so it appears below the jQuery reference in the footer.


Julie @SavvyEats January 1, 2012 at 1:12 pm


Travis August 12, 2010 at 5:25 am


I just tried your tutorial step by step and I’ve got the tabbed box in my sidebar but it isn’t working correctly. I’m kinda new to JS and the blog and such, so I’m not sure what I’m doing wrong.

A few notes and questions:
- I used the 2nd set of code (in case of conflicts)
- On the site, the last tab is below the others. I don’t know if I should fix this with styling or what, but could use some advice on how to get these to fit correctly
- In the styling, it looks like there are a few terms that use a three digit color instead of 6 spots. What’s this?
- I copied your code exactly. In your description, you mention that you used custom code for the middle tab. Is that in what I copied? If so, do I need to make any changes to make the thing work? If not, where do I go from here?

I really appreciate help on this one. Would love to get this up and moving.



Reply August 12, 2010 at 10:45 am

Hi Travis. Thanks for your comment. Well, I have to say that I’m a little perplexed by this one. I’ve checked out your site and the problem is that the organic tab script isn’t firing up because it’s halting with this error: base.$nav.delegate is not a function. There may still be some type of conflict with something on your site. If you’d like me to take a closer look, email me your ftp info and I’ll see if I can figure it out…

To answer your other questions, the 3 digit color codes are just shorter versions of the 6 digit hex codes. You can fix the 3rd tab dropping off the edge with css.


João August 18, 2010 at 12:32 pm

Hi there…

Something wrong with my organic tabs…
Can you Help me…

See it in the footer…
João recently posted..Cartão BarclaysCard AMI Uma forma de Ajudar

Reply August 20, 2010 at 9:23 am

What’s up João. I had a look at your site, and it seems that you haven’t loaded the organic tabs scripts. It’s the part that references this file: organictabs.jquery.js. I’d recommend you go back and follow all the steps to make sure you have them all covered. Thanks!


João August 22, 2010 at 9:19 am

Have already fixed it…

João recently posted..Simular Crédito Habitação Ficha Europeia de Informação Normalizada – Parte III


Bryna August 23, 2010 at 4:11 pm

Any idea how I could insert these halfway down the sidebar.. between various other widgets?

Reply August 23, 2010 at 4:29 pm

Hi Bryna. Yes, you can do this by removing the function shown in Step #4 above from the custom-functions.php file. Then add this plugin: PHP Code Widget. Now go to your widgets section, drop the PHP Code widget where you want the organic tabs to show up, and paste in the code from Step #4 between lines 04 and 35. That should do it.


MovieStreaming August 26, 2010 at 11:15 am

The missing feature again and again!

With Jquery Tab like this, the missing functionnality is always AJAX call. Load external file (.php/.html/…) when clicking a tab (Call) and populate the content…

For this component, when contents of each tab is heavy (cascading images, images covers,…) the page load takes time.


Shirls August 30, 2010 at 12:29 pm

Hi there,

Thanks for the above tutorial, it is just i wish to have to my blog. Thanks for your time.

I have a similar question as Lisa’s. Just a couple of questions, hope u could give me some lights.

(1) I wish to have Recent Posts, Recent comments and Killer Recent Entries widget (which are standard being provided by wordpress, without needing to add extra widget plugins) to the tabbed widget. However, i can’t quite find in the wordpress codex documents for the codes.

(2) I have a Popular Post Plugin. I tested in your codes, it works, but I don’t know how to add more posts on your tabbed widget. (You can see the tabbed widget at the bottom of the sidebar)

Wonder if u could give me some tips on how to solve the above problems. Thanks a million in advance, really appreciate it.

Reply August 30, 2010 at 2:14 pm

Hello Shirls,

Thanks for your comment. If I’m understanding you correctly, you want to show recent posts and recent comments without a plugin. You mention “Killer Recent Entries” which is a plugin that shows recent posts, so I don’t see the difference between that and simply, recent posts. Basically, to show recent posts without a plugin, you could use something like this:

<?php query_posts('showposts=5'); ?>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<li><?php the_excerpt(); ?></li>
<?php endwhile;?>

You can remove the excerpt line to just show the titles.

As to recent comments, this may be helpful:

With regard to your point #2 above, I’m not familiar with this plugin, but why do you need it? If you look at the code I provided in the tutorial, there is some code in there that will show you a list of popular posts by comment count. That will do the trick and you don’t need this plugin. Thanks again for your comment.


Shirls August 30, 2010 at 8:11 pm

Thanks so much for your prompt reply.

I tried your codes for the Recent Posts, and it works like a magic! :) Thanks! However, for some reasons, the other 2 tabs, I followed your instructions, but with no success. When I click on the tabs, there is no response at all. Thought might due to jQuery conflict, I changed to your second set of codes, but still no success.

Wonder if u know why. Sorry to take your time again. Thanks a million.

Reply August 30, 2010 at 9:26 pm

Hi Shirls, I was able to fix your problem. It was caused by the fact that jQuery was being loaded twice. If it’s already being loaded by another plugin or you’re loading it for something else, there is no need to reference it again.


Shirls August 30, 2010 at 9:50 pm

Thanks so much for your help and prompt response. I really appreciate it! :)


Avi D October 13, 2010 at 5:45 am

Can this also be used with tags? I want each tab to show posts that have been linked with a certain tag rather than recent, popular posts etc.

Reply October 13, 2010 at 8:33 am

Hi Avi. Yes, this is definitely possible. Think of the content of each tab as a simple list of items. Any list that you can create from the WP database, you can insert into the tabs. Here’s some code that will achieve what you want here. Insert it within the <ul> tags from which ever tab you want it to show up. Substitute ‘your-tag’ with the tag slug.

<?php query_posts('tag=your-tag');
while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>

This uses the query_posts() WordPress function. You can read more about it here, and if you scroll down, you can read more about the options you have with respect to tags.


Alex Wu October 15, 2010 at 10:00 am

Hey, thanks so much for posting this code. It’s absolutely awesome and after some troubleshooting, got it to work on my site!

Question for you – I’ve seen on some sites (notably Tim Ferriss’ blog), a tab that displays the most popular posts (by pageviews) during a recent time frame, i.e. 30 days. Is there a way to modify the code so that you can have a “Recent Hits” tab?

Many thanks!


Reply October 15, 2010 at 10:24 am

Hey Alex. Thanks for commenting. Yes, this can be done. Here’s one possible solution for you. I guess it’s the quick and dirty way to handle it as it involves installing an existing plugin. Here’s the one that should work: Popular Posts.

After you activate it, you don’t want to use the sidebar widget. Use the php code to call the function as explained on the plugin page. Just insert this code between the <ul> tags in the Organic Tabs code.

Also be sure to add the ‘days’ parameter. If you read the instructions on the plugin page, it’s pretty easy to follow.

Let us know how it worked out.


Alex Wu October 15, 2010 at 10:21 pm

It worked out great. I installed Popular Posts and re-jigged the rest of the tabs so now I have exactly what I wanted from the start! Thanks for your help. Last week I stumbled across this site and thought that doing something with this much code would be too difficult.

“Why couldn’t there be a single widget that could do all this?” I thought.

But now, I see the value of putting on the apron and getting dirty with the code ;) You get exactly what you want!


scriber October 20, 2010 at 9:18 am


Thank you for the excellent and much-needed tutorial. Even a complete noob like me could follow it easily. However, when I tried to implement it, it was another story…

I’ve troubleshooted a number of times, using every single combination of:

(1) the first JQuery script and the non-conflict script

(2) enabling/not enabling the JQuery & JQuery UI Library in the JavaScript Option of Thesis’ Design dashboard

(3) inputting/ not inputting the JQuery script into the “Header Scripts” option in Thesis (I did remove the php code first!)

…to no avail.

When I “view page source,” it seems, to my novice eyes, that the script IS loading before the Organic Tabs…but it seems to be at the beginning of the page and at the end of the page.

Any help is appreciated – my site (still in its testing stages) is:

Thank you!

Reply October 20, 2010 at 10:03 am

Hi. Thanks for commenting… I’d say the problem is that you have jQuery being loaded twice. This happened with someone else here and when they removed the second reference to jQuery, it worked. So I’d remove the one in the footer in this case because it needs to get loaded before the organic tabs scripts. It might be a plugin that’s loading in as well, so you could also try disabling the plugins one by one, unless you know specifically what could be loading in. Hope this works for you.


scriber October 20, 2010 at 7:37 pm

Thanks for the prompt response Thesis-Blogs!

I started from scratch – even reinstalling thesis! – and used the no-conflict JQuery code in Step 3.

I’m 99% certain jQuery is only loading once. I also only have Rob Marsh’s plugins, so jQuery can’t be loaded by any other plugins.

Still not working.

Any other suggestions?

Thanks again!

Reply October 20, 2010 at 9:33 pm

Can you check the folder location of the organic tabs script? I think you have it inside of a subfolder within your ‘js’ folder. That may be the issue. It should reside in the root of the ‘js’ folder.


Bryna October 22, 2010 at 8:13 pm

Hi. I’ve implemented this on the above website but I am having problems. It seems to be something to do with the js being loaded twice, so I removed your jsquery.
Bryna recently posted..Bobbi Brown- Beauty Rules

Reply October 22, 2010 at 9:59 pm

Bryna, had a look at your site. I don’t see the organic tabs script being added to the page, neither is jQuery being loaded. Could be you’re in the middle off working on it.

1. Make sure jQuery is referenced and loaded before the organic tabs script.
2. Make sure you aren’t loading jQuery twice.
3. Try the ‘noconflict’ version of the code in case you have a conflict with another library.



Bryna October 23, 2010 at 8:47 am

Sorry, I should have mentioned it is in a widget about halfway down the sidebar (as per my earlier comments on August 23).

Reply October 23, 2010 at 10:56 am

Yes, I saw where it is when I looked at your site. I checked the code again and you have jQuery loaded twice, and what appears to be a 3rd time. Remove the jQuery references in the footer. That should hopefully fix it.


Bryna October 23, 2010 at 11:46 am

I did that. Now this error comes up: Message: Object doesn’t support this property or method
Line: 21
Char: 13
Code: 0

Reply October 23, 2010 at 12:00 pm

Hi Bryna, I figured out the problem. The version of jQuery being loaded is 1.3.2 which is an older version. When I updated it to the latest version, it worked. So just go ahead and update to the latest version.


zylphryx October 24, 2010 at 7:18 pm

Nice tutorial, but I am encountering an issue. When I try to implement this I get 1 error reported on the site:

base.$nav.delegate is not a function
[Break on this error] base.$nav.delegate("li > a", "click", function() { 

the location is given as within the organictabs.jquery.js file (it is located in the custom/js directory).

I am getting no content and no tab functionality. It looks like I am calling jQuery only once and have tried both the regular and noConflict versions of the script. Any ideas on what is happening?
zylphryx recently posted..BFF Rules- How to Create Unbreakable Friendships with Your Best Gal Pals

Reply October 24, 2010 at 7:42 pm

Hi there, well I had a look at your blog and the problem seems to be that a whole chunk of code is getting stripped out. The HTML code just stops in the middle of the organic tab widget. When I added in the code manually, it works fine. A second issue is that an older version of jQuery is being referenced. You’ll need to use the latest version. Without looking at the code in your site, I can’t really tell what could be causing this. Meant to add this but forgot. View the source of your page and scroll to the bottom and you’ll see what I mean.


zylphryx October 24, 2010 at 7:59 pm

Well, I plugged the code in step 4 (within the lines you mentioned a few posts up) using the My Custom Widget plugin (which was already present as an uploaded plugin) instead of the PHP Code Widget (though it looks like the functionality between the two widgets is identical). I also tried plugging it into the custom_functions file and had the same results (where the list wrap was being cut off).

I’ll update the jquery version and see what effect that has. I’ll let you know what happens.

Reply October 24, 2010 at 8:03 pm

That may be the issue. You should try using the php code widget mentioned earlier to insert the code. Do that as well as update the version of jQuery being referenced. Let us know.


zylphryx October 24, 2010 at 8:53 pm

OK, it was not an issue with the MCW plug-in. It looks like an issue with the WPPP_show popular_posts() calls. When I kicked in a simple echo into each section it worked perfectly. The first WPPP call (recent posts) was, within the requisite PHP opening and closing:


I’ve pulled it off the sidebar for now and will be hopping back into to it tomorrow. When I figure this one out I will let you know.


zylphryx October 26, 2010 at 5:48 pm

OK, I got this to work.

The two issues I had were I needed to upgrade jQuery. This solved the tab functionality issue.

The second one was utilizing an old WPPP function call. The updated version of WPP uses different template tags and as a result the old one was causing the code to die and taking all teh following HTML with it.

FYI, the link you gave above for the WP Popular Posts gives the wrong code for calling it in this instance. The most recent version uses the function wpp_get_mostpopular. If you go to it gives info on this and a listing of the supported attributes can be found in your WP install in Settings>WordPress Popular Posts and check the supported attributes for the shortcode.

Now just to style it and I should be good to go. Thanks again for a great tutorial, this functionality was what I have been looking for.

Reply October 26, 2010 at 6:22 pm

Good to hear. Which popular posts link are you referring to? In the code example I’m using a WordPress function to get the popular posts, not a plugin.


zylphryx October 26, 2010 at 6:29 pm

Nope my mistake. I was using the WP Popular Posts plug in, not the Popular Posts plug in you referenced in your response to Alex Wu … which would explain why I was having the issues with trying to call the function. The plug in names are waaaay to similar. ;)

Thanks again. :)

Reply October 26, 2010 at 6:36 pm

ok, cool. Thanks for coming back and updating us on your success with it and this other plugin you’re using.


Trasie November 7, 2010 at 3:22 pm

Hi there,

I’m getting this error with your script:

Fatal error: Call to undefined function recent_posts() in /mnt/w0508/d04/s26/b02ac4e5/www/dev/wp-content/themes/thesis_18/custom/custom_functions.php on line 124

Any idea why?
Trasie recently posted..Alternavox Recommends- A Place Called Los Pereyra – Toronto Premiere

Reply November 7, 2010 at 3:27 pm

Hi Trasie, it looks like you haven’t added the necessary recent posts plugin. Read over the tutorial again and look for the part about adding the necessary plugins. It isn’t required for the tabbed widget to work, as you can put anything you want in each tab, but in the example provided, two of the tabs makes use of a particular plugin. Thanks for commenting.


Trasie November 7, 2010 at 3:42 pm

Thanks for that. I should have read closer. Now my problem is that the other tabs don’t work at all. I installed the Recent Comments plugin and it still does not work. Of course, I have no code for Popular Posts.

Reply November 7, 2010 at 3:48 pm

Had a quick look at your code, and jQuery is being loaded twice. This has been known to cause the organic tabs to not work right. You’ll need to remove one of the references, but make sure you’re referencing the latest version. I notice you have an older version being loaded as well after the more recent one.


Trasie November 7, 2010 at 3:53 pm

Fabulous. Any idea how I find out what’s loading the old version and how to eliminate it?

Reply November 7, 2010 at 3:58 pm

It might very well be in the code you copied from here and pasted into your custom functions file, so check in there and delete that line. In your case, something else is loading a more recent version of jQuery prior to the one you will most likely find in your custom functions file, so it should be okay to delete it.


Trasie November 7, 2010 at 4:00 pm

That did it. You rock! Thank you very much.

Reply November 7, 2010 at 4:05 pm

Yeah baby!!! Whoohoo…

haru November 16, 2010 at 10:20 am

its not work on my blog..waaa T_T didnt same with ur tab..i think there is some problems in the css

Reply November 16, 2010 at 11:24 am

Haru, there’s nothing wrong with the css. It works just fine. I wanted to take a look at your site to troubleshoot for you, but you have the maintenance mode up. Here are some things you can check:

1. Make sure jQuery is being loaded before the organic tabs scrips
2. Make sure you’re loading the latest version of jQuery
3. Make sure you aren’t loading jQuery twice
4. Make sure there is no conflict with another library

Good luck and thanks for commenting.


igoydude November 25, 2010 at 9:34 pm

i hope this works, been looking for something like this and was never able to find one that fits my taste.
igoydude recently posted..Globe Broadband Internet Down for Almost 4 Weeks


Julie @SavvyEats February 27, 2011 at 9:30 am

Love this tutorial! I currently have the tabbed widget placed after my multimedia box, before my sidebar splits into 2 (at However, I need to be able to move up my one-column ad, so I’d like to move the new tabbed widget below my other widgets.

I tried using the after_sidebars hook, but the green background of my tabbed widget then shows up behind all of the widgets, not just the tabbed one.

I tried using the after_sidebar_1 hook, but then the widget it condensed into 1 column, where I’d prefer it to span the width of both sidebars. Can you help me?
Julie @SavvyEats recently posted..Book Review- These Things Hidden

Reply February 27, 2011 at 10:00 am

Hi Julie. I’ve had a look at your site and understand that you want to move the tabbed widget so that it’s below both sidebars. The thesis_hook_after_sidebars hook is what I’d recommend you use, however I also see from your comment that you tried that. The problem I’m having is what you said happens when you try that. You say the green background from the tabbed widget shows up behind all other widgets. Something isn’t quite right perhaps with the code you have in there for the tabbed widget. Moving it to the ‘after sidebars’ hook should not result in what you’re describing.

If possible I’d like to see the tabbed widget after the sidebars and view the result on your site. Then I I could possibly troubleshoot it. Another thing you could try is place an empty opening and closing div after the sidebars and then style it so that it has some height and give it a background color. See if that results in the other sidebar widget backgrounds changing too. If not, then there is something up with the widget code you copied over. Thanks for commenting.


Julie @SavvyEats February 27, 2011 at 10:03 am

I just tried using the after_sidebars hook, and you can see that the green background extends up behind all the widgets. Where should I look in the code to fix this?
Julie @SavvyEats recently posted..Book Review- These Things Hidden

Reply February 27, 2011 at 10:37 am

I found the problem. In your case, you need to clear the organic tabs widget from the floated elements above it. Go ahead and add this line to the #organic-tabs selector in your custom.css file:


That will do it!


Julie @SavvyEats February 27, 2011 at 10:46 am

Thank you so much! That worked perfectly!
Julie @SavvyEats recently posted..Book Review- These Things Hidden


Travis March 4, 2011 at 6:04 pm

Great tutorial! I’ve been using it on my site and, if possible, would like to try something.

On my site ( I have a slider that’s displaying a photo of the day, with feature posts listed below the slider. I found some code online that I’m using to exclude the photo of the day category from the home page, and I was wondering if it was possible to do that in the Recent Posts part of the Tabbed Widget as well.


Travis recently posted..Flashpacker’s Photo Of The Day – Wicker Dragon

Reply March 4, 2011 at 6:33 pm

Hi Travis. Sure, you can filter the recent posts by excluding a category. The way the recent posts are being generated based on this tutorial is through the use of a plugin called Recent Posts by Rob Marsh. Well, that plugin has an option to exclude any category you want from the list. You can find the settings for this in the “Settings” menu of the WordPress dashboard under “Recent Posts” You’ll want to click the “Filter” link at the top. You’ll see the category filter there. Thanks for commenting.


Travis March 4, 2011 at 6:50 pm

Nice! Man, I never even thought of that.

And thanks for the near-instant response!

Keep up the great work!

Travis recently posted..Flashpacker’s Photo Of The Day – Wicker Dragon

Reply March 4, 2011 at 6:55 pm

No problem! Glad I could help.


Mihai March 12, 2011 at 7:08 am

I finnaly work it out. Thank you any way for sharing. You are the best.
Mihai recently posted..3

Reply March 12, 2011 at 5:55 pm

No problem, pleased to hear you got it resolved.


Mihai March 12, 2011 at 6:02 pm

Please help me, cause I don’t know why it’s not working…
Mihai recently posted..10000 de dispăruţi şi peste 900 de morţi- după tsunami Vezi bilanţul dramatic din Japonia


Julie @SavvyEats March 14, 2011 at 6:58 pm

I’d like to implement the organic tabs elsewhere on my site…namely, here:

However, the script doesn’t appear to be working. What do I need to do for the tabs/script to work in multiple locations on my site?
Julie @SavvyEats recently posted..Pi Day- Lessons in Pie

Reply March 15, 2011 at 12:55 am

I can take a closer look at this a little later, but you can check to see that jQuery isn’t being loaded more than once on your site. I happened to notice that it is. There are some other things you can check from this comment. Also try disabling plugins to see if that resolves it. But the script should work no matter where you have the organic tabs placed on this site.


Julie @SavvyEats May 11, 2011 at 10:25 am

I’m still struggling with this. How can you tell that the script is being loaded twice? I want it to be loaded once, but utilized in two different spots on my blog (once in the sidebar, and once on my recipes page)…is that possible?
Julie @SavvyEats recently posted..Spring ‘Fried’ Rice

Reply May 11, 2011 at 11:10 am

I had a look at your site and it looks like you got it working. The tabbed widget is working fine from what I can see. With regard to loading the widget on a page as well, it can be done but there are some things to consider.

If you want to load the HTML code required for the widget through the custom functions file, then you will need a WordPress conditional tag to only load the code onto the applicable page. You could also paste the code directly into the page itself, but in order to do that you will need a plugin that allows you to paste PHP code into a page in WP.

Another consideration is that the code used ID’s which should only appear once on a page. If you have it loaded on your recipes page as well as the sidebar, then you will have 2 of the same div ID’s on the same page. So for the code you will be using on the recipes page, you will need to give the div’s different ID names.

If you do that, then the css code needs to get updated too.



Lijin Lakshmanan April 20, 2011 at 8:37 am

Hi, Thank you for the one and only great post on Organic Tab.

I followed the exact codes as listed above, but unfortunately the Tabs are not move or no animation happening its just struck in first tab.

appreciate your help to make this work please..


Reply April 20, 2011 at 4:56 pm

Thanks for your comment. The reason your tabs aren’t working is that your site is loading jQuery 3 times. If you look at the source of the home page, you will notice how jQuery is being referenced in three different places. You will need to only load it once, before the organic tabs scripts. You may have a plugin or other code loading it multiple times.


Lijin Lakshmanan April 21, 2011 at 7:24 am

That was a quick response, much appreciated!

Thank you, problem solved and its working fine……..:)


SS April 22, 2011 at 2:35 am

I can’t thank enough for this wonderful post! Though, it’s my first experience working with jQuery. I’ve read your tutorial word to word and tried to understand what you have explained here. I tried it on my local server test blog and I reached to 50% and now having some problems.

FYI, I’m using Thesis theme too. I’ve already inserted Popular Posts plugin for popular posts. So, I have added the relevant code there. (I know there must be a big mistake in code)


1) The first tab of ‘Recent Posts’ worked out but the other 2 tabs couldn’t. I followed your instructions to the dot. When I click on the tabs, there is no response at all.

2) Like other readers, I also wish to have Recent Posts, Recent comments and Killer Recent Entries widget without adding extra widget plugins to the tabbed widget. But, I’m really confused as it didn’t work out.

I totally understand that I’ve to add appropriate code between the tags in the Organic Tabs code. But I still need to more info to run this thing.

Please note that I’m no coder and trying hard to deal with PHP so bear me and my tons of mistakes. Could you please help me to get my result? I really like this tutorial and want this on my live website. Your any help or support will really be appreciated.

Thank you very much!

Reply April 22, 2011 at 8:37 am

Thanks for your comment. Send me the domain name of your blog with however far you have got and I will troubleshoot it for you.


cj April 22, 2011 at 6:16 am

I would just like to ask if you know how to add a thumbnail for that? let’s say for your tabbed widget you have “popular posts” “recent post” “comments”

how to add a thumbnail to your popular posts and recent posts. as for the comments, it will show the respective avatar?

Any idea?

BTW nice tutorial.

Reply April 22, 2011 at 8:22 am

Yes, you can do this using the Featured Image in WordPress. You can read this post on using the Featured Image uploader in Thesis. As to avatars for the recent comments, I’d have to check but I’m not sure the plugin I’d recommended in this post for that will add avatars. I know that this one does, so you can use this one. I’ve actually used it before for this sort of thing and it works well.


SS April 23, 2011 at 8:36 pm

Thank you for reply. I’m doing this on my test blog on my local server. Now, I’ll need to put everything on my live website, so you can troubleshoot the problem. Many thanks again!


Pakdi July 26, 2011 at 7:41 am


I’ve failed to make this happen on my blog. Could you assist me please?

Reply July 26, 2011 at 7:56 am

I’d need to see the widget on your blog to troubleshoot, but check this comment and make sure you have all those taken care of.


Pakdi July 26, 2011 at 8:50 am

I’ve done the necessary but still failed to make the widget appear on my blog.

Reply July 26, 2011 at 8:56 am

Look at the code behind the page. You’ll notice that the path to the script isn’t valid. Look for this file: organictabs.jquery.js in the code. So you just need to make sure you have a valid path to the script.


Pakdi July 26, 2011 at 10:15 am

Repaired the path but still failed. Do you have any idea?

Reply July 26, 2011 at 10:51 am

I had a look at your site and I’m not seeing the actual html for the organic tab section. I’m referring to the “organic-tabs” div and everything inside of it.


pakdi July 26, 2011 at 7:12 pm

The tab now appears. But only after I enabled the multimedia box. Is there any way to put it without enabling the multimedia box ?

Reply July 26, 2011 at 7:45 pm

Yes, just use a different Thesis hook. You could use thesis_hook_before_sidebar_1. If that position doesn’t work for you, you can follow this comment thread to add it to a widget in your sidebar.


Pakdi July 27, 2011 at 11:06 am

I’ve customized the tab already. Thanks for this tutorial ya!


anandy September 5, 2011 at 6:28 am

Hey nice post. Is it possible to use popular post according to post veiws and in place of recent comments can we add random post?

Reply September 5, 2011 at 3:12 pm

Yes, you can follow this comment thread for one way to show popular posts by views.

As to random posts, sure. Just search for some code to show random posts and insert that in the applicable place in the tabbed widget code.


anandy September 5, 2011 at 6:33 am

And one more thing a grey box appears above appears above tabbed widgets how to make it white?
anandy recently posted..LG PZ850T Unveils TVs with PenTouch Drawing Technology

Reply September 5, 2011 at 3:13 pm

You need to edit the css for this and other style updates or changes.


anandy September 6, 2011 at 2:56 am

how to add the tabbed widgets below archives in my site instead of below multimedia box?
anandy recently posted..LG PZ850T Unveils TVs with PenTouch Drawing Technology


anandy September 6, 2011 at 3:09 am

and the tabed widgets work only if i enable multimedia box
anandy recently posted..LG PZ850T Unveils TVs with PenTouch Drawing Technology

Reply September 6, 2011 at 9:29 am

See this comment. As to the Multimedia Box needing to be enabled, yes that’s correct. Look at the code and you’ll see that it’s using the ‘thesis_hook_after_multimedia_box’ hook.


anandy September 6, 2011 at 9:45 am

now look at my site the tabbed widget is not working properly :(

Reply September 7, 2011 at 10:13 am

I had a look at your site and the tabbed widget is working. Perhaps you fixed it already. At the time I checked it out though, you have no css being loaded to the site so there are so styles at all.


anandy September 7, 2011 at 10:25 am

Css was not working cuz i had added code to add support of html5 code, now i removed…and after clicking recent post i cant click back popular post and the recent comments tab appear below recent post tab..
anandy recently posted..Acer Aspire TimelineX AS1830T-6651 Review

joao September 14, 2011 at 3:11 pm

hi there,

I have done all the steps and it doesn’t work.
Can you help me, i have it in my homepage…

joao recently posted..Coberturas Base do Seguro Habitação

Reply September 14, 2011 at 3:03 pm

It isn’t working because the link to this file: organictabs.jquery.js is invalid. Look at the code behind your site and you will see that it’s not linking up correctly and therefore the necessary file isn’t getting loaded. If you fix the URL so it points to the file, it should work fine.


joao September 14, 2011 at 3:44 pm

I have already try all combinations and It dont Work…

sorry may english…

How can a see the correct link to organictabs.jquery.js?
I have it here:
joao recently posted..Coberturas Base do Seguro Habitação

Reply September 14, 2011 at 11:09 pm

I checked your site and it looks like you got it working. The path is correct now. It was just pointing to a location where the script did not exist.


joao September 15, 2011 at 12:11 am

Hi there,

I have already fixed…. I change the location of the files, and put it in the local root and it works…

Thank you… You rock…

joao recently posted..Coberturas Base do Seguro Habitação


anand October 21, 2011 at 6:47 pm

i would love to implement this on my new blog great tutorial
anand recently posted..How To Delete Your Hotmail Account Permanently


Kulwant Nagi October 24, 2011 at 2:45 am

Please give me the code to have post thumbnail like you are having in Sidebars. i want to implement in sidebar only.
Kulwant Nagi recently posted..8 Best Crispy and Beautifully Designed Blogs of Indian Bloggers

Reply October 28, 2011 at 8:56 am

You can probably use a plugin for this that will include the thumbnail. The code I am using has been customized for this site and probably won’t work too well for you. Thanks.


Mark November 11, 2011 at 2:15 am

Thanks for the awesome Step By Step Tutorial.I’m looking for this quite a while…


Alina Shah November 27, 2011 at 11:49 am

Thanks for the awesome tutorial, it is working fine on my blog, can you please tell me where to make the changes if i want to add multiple tabbed widgets in a sidebar, because i think this code is not supporting the multiple “tabbed widgets”… How to do that please tell me… I just want two widgets in sidebar with multiple tabs…. like i just want to use this code once again in the same blog with other categories… etc… hope you understand….
Alina Shah recently posted..Apple Proposes New IOS Interface

Reply December 4, 2011 at 12:09 am

You could try to duplicate the code but you will have to make some changes. Since you shouldn’t have two div ID’s on the same page, you will need to change the container div to something like <div id="organic-tabs-2">. You will also need to change the function name because you can’t have two functions with the same name. Maybe something like “organic_tabs_2″.

You will also need to reference this new div in line #9 of the header scripts in the tutorial. Then you will need to use a different Thesis hook instead of the multimedia one. You could turn it into a shortcode using this:


Then in a sidebar text widget, add this: [organic-tabs-2]

If you’re going to do that, you need to enable the ability to use shortcodes in a sidebar widget by adding this to your custom_functions.php file:

add_filter(‘widget_text’, ‘do_shortcode’);

Hope that helps!


Bryan December 3, 2011 at 8:23 pm

Hi there. Everything worked just dandy. However, I would like for the comments themselves to show up in the list of ‘recent comments’ instead of a notification saying that a comment was made by ‘so and so’.

Is there a way to show the comment itself and what file do I edit and how?

Thank you for the help. This is my first time with Thesis. And, while I like it – I get a little confused as I get to know/understand all that it is/does.


Reply December 4, 2011 at 12:00 am

Yes, in this example, I’m using a plugin to display the comments in one of the tabs. This plugin has numerous options with respect to what you can display. Just head over to the Settings > Recent Comments section in your WP dashboard.

You’ll see a field called “Template for the comments”. Just edit that. There is a guide at the top right for what you can use. In your case, it will likely be “%comment_excerpt” to show the comment excerpt.


Bryan December 4, 2011 at 9:24 am

Thank you! That worked.


Sonia December 11, 2011 at 4:24 pm

Thank you very much for your beautiful tutorial. It’s worked like a ‘charm’.

First, I tried on my test blog and it’s worked perfectly. But, when I tried on my live site, it seems screwed up. :-( Don’t know why? I removed all required plugins (Recent Posts, Recent Posts and Post Plugin Library) and re-installed it. Especially, the ‘Recent Posts’ shows with thumbnail image and it’s weird. I can’t figure out what’s wrong there.

Could you please take a time and have a look on my site and advise me how to fix this. Thank you very much in advanced! :-)
Sonia recently posted..Happy New Year!

Reply December 11, 2011 at 4:36 pm

I checked your site and it looks like it’s working fine.


Sonia@7spice December 12, 2011 at 2:51 pm

I’m still not sure why it doesn’t work for my site. I use Thesis theme too. Now, I needed to remove from my site. :-(
Sonia@7spice recently posted..Happy New Year!

Reply December 13, 2011 at 1:19 am

I’d need to log in and see what’s going on. If you’d like, submit the form on the “Hire Me” tab at the top of the site.


Heather February 8, 2012 at 9:46 am

I used your tutorial with great success on a site last fall, and now I am stumped as I am trying to get it working here: . When I try to click on the tabs, nothing happens. Any help would be appreciated. Thanks in advance1
Heather recently posted..Today’s Plans!

Reply February 8, 2012 at 10:37 am

Everything looks fine with the scripts but there is no data being loaded to any of the tabs. Check to see that the code you’re using to generate the content under each tab is working right.


Heather February 8, 2012 at 10:48 am

That was exactly the problem! Thanks for your help, it’s up and running now!
Heather recently posted..Today’s Plans!


Brad Dalton June 4, 2012 at 9:11 am

Thanks for this tutorial Paul

Is it possible to base popular posts on views rather than comment count?
Brad Dalton recently posted..Bing Webmaster Tools Guide

Reply June 4, 2012 at 9:18 am

Yes, there’s a plugin or two out there that will use views as a basis for popularity. Go ahead and do a search and you’ll find one. Thanks.


Brandon July 19, 2012 at 8:59 am

Nice article. I know this is for the Thesis theme but I am using the Twentyeleven and I would love to add this to my site for categories, archives and tags. Is there anyway I could use this code? If I can what would I have to change?
Brandon recently posted..Yung Berg – Trap (Feat. Los) [Lyrics]


Brad Dalton July 23, 2012 at 11:01 am

Why don’t you use another plugin like Woo Tabs which is included in WooDojo


Emma September 3, 2012 at 9:11 am

So I must have done something wrong because when I click on the other two tabs to see that content, it does not change the tabs, and it pops me to the top of the page.

Any ideas on how to fix this? thank you!

Reply September 3, 2012 at 9:16 am

Yes, you’re missing a slash in the URL where you’re referencing the organic tabs js file. So it isn’t loading the script. Check your code and put that missing slash in there. You can ‘view source’ on the page in a browser and you’ll see it.


Emma September 3, 2012 at 9:25 am

tx! that worked…
Emma recently posted..blah


Emma September 3, 2012 at 9:47 am

Quick question – I see this and I notice at the top, there is an close php section ?> with no open <?php before it… and then at the bottom, the opposite. Don’t we need those?

function organic_tabs_scripts () {

<script type="text/javascript" src="/custom/tabWidget/organictabs.jquery.js">
		$(function() {

Emma recently posted..blah

Reply September 3, 2012 at 10:13 am

The opening <?php takes place at the very top of the custom functions file.


Emma September 3, 2012 at 10:18 am

Duh….. that makes sense… new to to Thesis and did not even notice that open / close yet.

So in order to get this placed where I want in my side nav, I decided to tuck this tab widget html in a text widget in sidebar 1 in Appearance > Widgets.

I just updated that part of the code to this… do you see any reason this would cause any issues the way I have implemented it in a text widget? It *seems* to be working fine. Tx!

Recent Posts

Hi, I’m Emma McNamara and welcome to Emma’s List! I am passionate about reading and reviewing books and sharing those reviews to benefit others. My focus is on age and content appropriate books that are both enjoyable and edifying for young ladies.

Categor PHP call to go in here.

Emma recently posted..blah


Emma September 3, 2012 at 10:20 am

NOt sure why pre tags did not work above. was trying to show this:

Recent Posts

Hi, I’m Emma McNamara and welcome to Emma’s List! I am passionate about reading and reviewing books and sharing those reviews to benefit others. My focus is on age and content appropriate books that are both enjoyable and edifying for young ladies.

Categor PHP call to go in here.

Emma recently posted..blah


Bloggerwan August 9, 2013 at 3:44 am

Looks great! I might use it for my blog to save space.
Bloggerwan recently posted..Freepik : Mesin Telusur Pencari Gambar


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: