Tabbed Widget Tutorial for Thesis Wordpress Theme

by Matt Langford on April 22, 2009 · Comments

Tabbed Widget for Thesis Wordpress Theme

This tutorial will take you through the process of building a tabbed widget for the sidebar of the Thesis Wordpress theme. For an example of what’s possible with this process, look at my sidebar.

There are no graphics required and everything will be done within the Wordpress admin panel and custom.css. For the sake of simplicity, we will make good use of the Thesis Openhook Plugin by Rick Beckman.

For more Thesis tips, check out my 10 Easy Ways to Customize Thesis post.

Step 1: Download and Upload

Files Needed: Download the zip

Upload the domtabs.js file into your Thesis custom folder. You only need to upload this file, not the entire folder!

Copy and paste EVERYTHING from tabs.css into custom.css. To someone with experience, the code may seem a little redundant, but I did that to keep the process simple.

Step 2: Editing Your Header with Thesis Options

Header ScriptsWith other themes, you would have to edit header.php to complete this step, but Thesis makes it very easy!

In the Wordpress admin panel, navigate to Appearance > Thesis Options. Under Stats Software & Scripts, press the + button next to Header Scripts.

Paste the following code directly into the text box (and input your url in the specified space) and press save:

<script type="text/javascript" src="SITE_URL_HERE/wp-content/themes/thesis/custom/domtab.js"></script>

Step 3: Installing Widget

Your options for widget placement in this manner are as follows: above or below any sidebar -or- above or below entire sidebar area.

Navigate to Appearance > Thesis Openhook in the Wordpress admin panel. Choose your location (Above/Below Sidebars, Sidebar 1, or Sidebar 2) and paste the following code into that space and save:

<div class="domtab">
<ul class="domtabs">
<li><a href="#t1">Tab 1</a></li>
<li><a href="#t2">Tab 2</a></li>
<li><a href="#t3">Tab 3</a></li>
</ul>
<div>
<a name="t1" id="t1"></a>
<p>Insert contents of the first tab here.</p>
</div>
<div>
<a name="t2" id="t2"></a>
<p>Insert contents of the second tab here.</p>
</div>
<div>
<a name="t3" id="t3"></a>
<p>Insert contents of the third tab here.</p>
</div>
</div>

Your tabbed widget should be visible in your selected location now. Now, let’s add some quality content and style it up!

Step 4: Adding Content

In Thesis Openhook, you can edit the HTML or add PHP to display any content you would like (If you add PHP, remember to check the “Execute PHP” option).

For this tutorial, we will use some very good, lightweight plugins to do the heavy lifting for us. Download, install, and activate these plugins by Rob Marsh: Post-Plugin Library, Recent Comments, Popular Posts, and Recent Posts.

placementGo to Settings > Recent Posts. Under the Output option, select YES for “Output in content” and save.

Next, re-enter Thesis OpenHook and find your code you pasted before (Step 3). Replace the text “Tab 1” with “Recent Posts.”

Find “Insert contents of the first tab here,” and replace it (remove <p></p> tags as well) with the following code:

<?php recent_posts(); ?>

Repeat the process above with the Popular Posts and Recent Comments plugin, putting them in Tab 2 and Tab 3. The respective php codes for those plugins are:

<?php popular_posts(); ?>
<?php recent_comments(); ?>

In the settings for each plugin, you can further customize the amount of posts shown, display options, and much more. Highly recommended for Popular Posts, especially.

Step 5: Style it up!

This step will be primarily up to you, because every setup of Thesis is different and as such requires different styles. I will, however, attempt to get you headed in the right direction.

In the code you pasted into custom.css way back in Step 1, I included comments to help you understand it. I suggest you make good use of Firebug for Firefox (or even the surprisingly adequate Inspector for Safari).

You can also view my css, but understand that you will have to make modifications for your specific layout. The tabbed widget code is at the very bottom.

Don’t be afraid to experiment! If you do run into a roadblock, I will do my best to help you in the comments section. You can also try the DIYthemes Forum for help.

  • Great tutorial Matt; simple and powerful. Kill or edit this comment if you like, but it seemed to us you might have unintentionally used your full domain path in the first "paste this" code box?
  • Ohh... Thanks, Nice call! Glad someone caught it right after I published it... It now should read and work as intended. Thanks again.
  • *Comment Edited to Properly Display Code

    Matt I found "Output in content:(via special tags)" under Placement Settings at the bottom, is that correct? I activated it.

    In Open Hook I have:

    Recent Posts
    Popular Posts
    Recent Comments




    And I did added the header script (just as it was above, did I need to add something?) and custom styling. What am I doing wrong? For some reason a connection is not being made because I am still only getting "Tab 1" etc. (http://laurelwreathsreflections.com/) Also each of the plug-ins are installed and activated (set to 5).

    Suggestions?

    <abbr>Lori’s last blog post..Sweet Childhood</abbr>
  • Lori, I am reading the correct titles in your tags (Recent Posts, etc), but I'm not seeing any body content. First, make sure you pasted everything from Step 3, because it looks like you only got the top half. One reason you were still seeing "Tab 1" could be because your SuperCache plugin had yet to refresh. Deactivating it while you make changes might help!

    Let me know if that helps!
  • Also, the Recent/Popular plugins by Rob Marsh require this one to work: Post-Plugin Library. I linked to it in the post, but maybe you overlooked it?
  • I emailed you my code because it did not show up correctly here in the comment section. =)

    <abbr>Lori’s last blog post..Sweet Childhood</abbr>
  • Hey bro,

    I'm giving it a spin. I'll keep ya posted. :) I can't remember, did you say you're using a particular plugin for your comment threads?

    <abbr>Miguel Wickert’s last blog post..Power of Less: Days 11-13</abbr>
  • Good Luck! As for threaded comments, if you have Thesis 1.5, all you need to do is enable Threaded comments in the Settings > Discussion panel of Wordpress. That's it!
  • cool, okay. Yeah, that's easy. Got another question for ya, how do I find my Gravatar link? Sounds silly but I can't find it? :) Thanks bro,

    -Mig

    <abbr>Miguel Wickert’s last blog post..Power of Less: Days 11-13</abbr>
  • No worries bro, got it done. Thanks again for sharing. :) Cheers,

    -Mig

    <abbr>Miguel Wickert’s last blog post..Power of Less: Days 11-13</abbr>
  • Glad to hear it! Let me know if you need anything else!
  • Matt,

    I'm having trouble downloading the file. I get an error that the box already exists though it creates a folder. Then, the contents that do show up seem to be blank files. Any suggestions?

    I did copy your css file to try it, but no go. This is all just on the test site until I'm settle with what I want.

    Thanks for any help you can give.

    Mark
  • Mark, I'm not sure I really understand your question. I just downloaded the file on another computer, no problem. No one else seems to be having that problem, so I'm a little lost on a possible solution? Could you go a little more in depth on the steps you've taken and what you've encountered?
  • I downloaded the file again this morning. There is something Vista doesn't like about have two files names tabs. Weird, but I just copied the .js file out of the zipped file and got the code. I think anyways. I pasted it into my custom.css folder, but it didn't change anything. I will have a look in just a bit to see if I missed a step.

    Thanks for looking at this,

    Mark
  • OK, I *think* I set everything up correctly. I am not getting a box to show up on the homepage. Does it need actual content? Any suggestions for me?

    I'm learning as I go so I imagine there is something I overlooked.

    Thanks for your patience.

    Mark
  • Mark, from what I can tell on your site... The content is showing up correctly, but it's not accessing the js file correctly.

    Troubleshooting: Check that the domtabs.js file is located directly in your custom folder, and not inside another folder (such as custom/tabs). This has been the most common error.
  • Mark, I just checked out your site and found the problem... Your thesis site is in a subfolder, but the code from step 2 doesn't reflect that. Where I told you to put your SITE URL, you need to put hereiblog.com/th3s1s in place of what you currently have. That should fix it!
  • Matt, I did change the url to the correct directory. Unfortunately, I'm still not getting any boxes to show up. I'm pretty sure I put everything in its proper place. Does the .js file need any special permissions?

    Thanks,
    Mark
  • The url is still incorrect as your thesis installation is using an odd folder name. Your flies are not in a folder called "thesis" but in a folder called "thesis-15" in Step 2.

    You should have: themes/thesis-15/custom/domtab.js
    Instead of: themes/thesis/custom/domtab.js

    My instructions were for a default installation of thesis. You have different folder names, but the above changes should fix the problem.
  • I'm still not getting anything. Are the plugins necessary for the box to even show up? I was waiting to do that after I get this installed properly. My thesis learning curve is way too big for my patience level. :)

    I do appreciate your help. I also don't mean to be a bother.
  • Mark, when I go to your site, I see the tabs and it works correctly on the top of your right sidebar. The only thing you need to do now is style it. Either do your own thing in your custom.css or put what I have as a starting point and modify it. But the js file and your html are working fine...
  • Matt, shouldn't it look like a box though? Even when I copy your file from custom.css it looks the same. All I see is this sitting against the left side of the sidebar:
    .Tab 1
    .Tab 2
    .Tab 3

    Is this it?
  • Ok, I'm looking at your CSS now... First your .custom #page property does not having a closing bracket }. Secondly, you need to comment out (or delete) your .custom ul#tabs properties that have simple text in them (no properties).

    Your tabs are functioning properly, the only error is with the styling. Hopefully, making the above corrections will take care of that.
  • Wow, that did it! That is my lack of experience in using css. I over look small items. I really appreciate your help and patience. Funny, I was actually able to solve someone elses problem with the custom header in thesis. Slowly but surely.

    Thanks again.
  • No problem, Mark. Most problems with websites are as simple as that! Although they create the biggest headaches... Let me know if you need anything else!
  • Hey there Matt, nice stuff. Been looking for something like this for a while.
    First, as point of reference you said "Go to Settings > Recent Posts. Under the Output option, select YES for “Output in content” and save." Well actually it's not under Output but Placement.

    I tried but it didn't really worked. I think I have the same problem with Mark. I have the js file in custom and folder name is thesis but still didn't work. Please help.

    Another thing, can you please tell me how can I put page views beside the Popular post? Thanks a lot in advance ;-)
  • Winmac, Mark's problem was just a couple typos, but nothing major. I will need to see a test page with the code installed in order to help diagnose any problems you have.

    As for the page views, if you are using the plugins I mentioned in the post, go to Settings > Output and place this in the Output Template where you'd like it do display: {postviews}
  • Hi Matt, thanks a lot. Got it running already ;-) Only 2 problems left.
    1. I can't the tabbed styling to go away in the box. I tried removing the style list-style:none; on ul.domtabs but still the bullet appears
    2. Upon using the new plugin, the counter was restarted to zero. How can I get back my old pageview numbers?

    Thanks
  • Winmac, the list-style:none; is what removes the bullets. If you're having problems with the display, try changing the css you currently have with what my site uses by clicking the link at the bottom of the post.

    The popular post plugin I said to use for this one can only count back to the day it was installed. If you used another pop post plugin, you'll have to refer to its documentation (or ask the author) for a way to insert it into the widget.
  • Hey there Matt,

    Thanks for your help. I've got it running however, I can't back the pageviews counter back. It's ok. I tried list-style:none; on ul.dom, .dom even applying directly on the div of each tab, but still can't get the styling off.
  • That probably means something else in the css is interfering, but I'll need to see a link with the tabs installed to say for sure...
  • @ Matt

    First, great tutorial. I've been walking through the steps, and just hit a snag. I'm working on a friend's site www.accordingtonina.com. The tabs are showing, but no content. Ive installed post-plugin, recent posts, and most popular. I then tried copy and pasting some posts under the Target Tuesday tab, but even that doesn't show up. Any suggestions?

    <abbr>Jeff Rose’s last blog post..Encouragement For Getting Out of Debt</abbr>
  • @ Matt

    Ahhh! Just figured it out. I created a Thesis-15 folder for the new update and didn't change that in the header script. Is it funny how a "-15" can make all the difference in the world.

    <abbr>Jeff Rose’s last blog post..How To File a Complaint Against Your Broker</abbr>
  • Cool! It looks good too... A few others have had the same problem. Good job!
  • thanks for this tutorial.
    i already apply this tabbed widget at my blog.
    cheers!
  • Thanks so much for this! I've been after a way of implementing this for a long long time.

    The only thing I can't seem to do (and I know it'll be something silly I've done) is to get the link style the same as the rest of the page, e.g. underlined normally, then removing the underline on a hover, the same as you have here. Any ideas?
  • Mark, add this to your custom.css:

    .custom a:hover {text-decoration: underline;}
  • Thanks Matt. It wasn't quite what I was after (I'd like it underlined by default, with the underline removed on a hover, like the other links on my site), but I'll have a play :)

    I've also noticed it's a little slow rendering. I appreciate it's doing rather a lot "under the hood", but do you know of any ways to speed it up? I'm using WP Super Cache and PHP Speedy.

    Cheers,

    Mark
  • Mark, for that effect, add the following to your css:

    .custom a {text-decoration:underline;}
    .custom a:hover {text-decoration:none;}


    As for the slow loading thing, it all depends on your server/host and the amount of traffic you have at a given time. Although, visiting your site just now took only 1.3 seconds for the entire PAGE to load...
  • Almost there :) That code made the whole site have those a tag attributes. I found this:

    .domtab div a {text-decoration:underline;}
    .domtab div a:hover {text-decoration:none;}

    worked for just the domtab list items, which is what I was after.

    Thanks re the speed check - must be just my connection.

    Thanks once again for this terrific tutorial.
  • It looks very good on your site! Very clean! Great job implementing it...
  • Thanks :) I'm still dabbling with it.

    One thing I would mention to folks is to check it in multiple browsers when you think you've finished setting it up. I generally developer using my Mac and it looked very different on Firefox on the Mac than it did on IE on a Windows machine. On IE, the tabs wrapper over 2 lines and the tab text was much bigger.

    Not your fault, I know, but thought it was worth a mention. I didn't notice for a day or two.
  • Matt,

    I am not using open hook but using a "text" widget to insert the html. I don't know how to "Execute PHP” option" for the text. My tabs show up but no content.

    Also, how do you have a popular posts for different categories in this tab? For example, I would like my tabs to say recent, green building, recycling, etc. Is there a way for the tabs to be 2 lines rather than one?

    Also, can I put a Title on top of my widget such as "Must Reads?" If so how do you do that? Thanks so much for your help.

    <abbr>Anna’s last blog post..Home Depot BP Solar Partnership. No Installation Deals here.</abbr>
  • Anna, by itself a text widget will not correctly encode php. There are plugins for this though... Try Exec-php.

    As for the popular posts from each category, that would depend on which popular post plugin you're using. You'll need to ask the developer of the plugin for that...
  • Matt, how do you put a box around to say: Must reads? I decided to install open hook since it is seems like the same idea as you suggested.

    <abbr>Anna’s last blog post..FDU’s Jumpstart the New Green Economy. A Conference Not to Miss!</abbr>
  • You can add something like this at the very top that will blend in like your other widgets:


    <div id="tabcontainer">
    Must Reads



    Add the closing div tag at the very bottom in OpenHook and then you can style it in custom.css. Here's something to start it with:

    .tabcontainer {background: #fff; border: 2px solid #ccc; padding: 5px; }
    .tabcontainer h3 {font-size:1.2em;}
  • Victor
    Matt - thanks for this. Question about how to add content. if I don't want to use plugins to add content, then what are my options? I am using a text box widget to hold the content for each tab. I am planning to show most recent posts, comments, and an rss feed - how do i do that without plugins? thanks again.
  • Matt,

    I'm having a little trouble for some reason. On the main page the tabs won't change when clicked on. However, if you are viewing a full post the tabs work fine.

    Any ideas as to what the problem could be?

    Thanks,
    Mark

    <abbr>Mark | hereiblog’s last blog post..Blog Relaunch With Thesis DIY Theme</abbr>
  • Estêvão Soares
    How can I do this Without OpenHook?

    I've tried:

    function tabbed() { ?>



    Posts Recentes
    Os + Populares
    Ultimos Comentários







    <?php }
    add_action('thesis_hook_before_sidebar_1', 'tabbed');



    I can see the Tabs but no content and the rest of my sidebar is gone too... Could you help me?
  • Estêvão Soares
    Sorry, the problem was the wrong path for the dom file...
  • Cool! Glad you got it figured out!
  • I think I may have finally figure this out. Thank you. I would like to style the tabs the same way as the default Thesis tabs. Does anyone know what the css for this would look like? I haven't had much luck.

    <abbr>Matthew Clapp’s last blog post..The Journal of Scientific Exploration</abbr>
  • Not much time here, but I'd suggest just changing the border color to black and the background color to white. Then, on hover add text-decoration:underline; and remove all the color options. Do the same for active.

    You may want to remove or minimize any padding as well...
  • Just checked your site out again, Matt, and I must say I really do like your implementation of that tabbed widget. Very clean! One of the best yet!
  • Thanks. The only site I could find that matched the main navigation tabs was Stijn Vogels (aardling.com). He's done some great, subtle modifications.

    <abbr>Matthew Clapp’s last blog post..The Journal of Scientific Exploration</abbr>
  • Special Note From Matt:

    While this tutorial will still work correctly, I have published a New Tabbed Widget Tutorial that makes use of jQuery and includes more features, such as animation.

  • Mickey
    Thanks for the steps. Can these be tweaked to display posts from certain categories? I'm trying to do this, but I'm no way near to accomplish this. Any help would be great.
  • Mickey, you can do that by using the following code. Be sure to change the category number to correct number and the number of posts to display (both can be found on the first line of the code). Let me know if this works for you!

    <?php query_posts('cat=4&showposts=10'); ?>
    <ul>
    <?php while (have_posts()) : the_post(); ?>
    <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></li>
    <?php endwhile;?>
    </ul>
  • Matt,

    I am so close - and yet so far. Doing something terribly wrong and haven't been able to sort what it is. Would you be so kind to check out http://www.tchochkes.com and tell me what I need to do?

    -s
  • In Step 2, I tell you to link to the domtab.js file you uploaded from Step 1. On your site, you do have a link to it in the head, but it's incorrect. Make sure it links to the file you uploaded, wherever that may be!
  • I must be doing something wrong i have everything in place but I'm not seeing any content inside the tabby. Please help. http://www.bizziemommy.com

    Thanks
  • Stephanie, from Step 2, you didn't replace "SITE URL HERE" with your website address. =)
  • Ugg - I knew it was going to be something totally lame. Thanks for your speedy help!
  • bizziemommy
    Thanks for you help Matt. Question I'm having browser style issues, do you do any freelance to just complete the styles for the tabby?
  • I don't do any paid freelance work, but I am willing to (attempt to) help you out with any problems. Just let me know specifics and provide a link to the widget you currently have, and I'll see what I can do!
  • Pawan Saini
    Sir how to Copy and paste EVERYTHING from tabs.css into custom.css. via ftp ? Is there any other way to do it?
  • Download and Install the Thesis OpenHook plugin (as described near the top of this tutorial), then navigate to Thesis Custom Styling (under the appearances tab) in the Wordpress admin panel.
  • Pawan Saini
    Thanks Matt, I got it... You are the MAN...
  • Hey Matt.. thanks for the tutorial. One question... I've added it to my site (http://elektro.ca), and everything is working fine... so I'm just wondering how I can add a gray line like you have on yours between each link in the box...

    Thanks a lot for your help!
  • Cam, looking at your setup specifically, adding the following code to custom.css should work.

    #t1 li {border-bottom: solid 1px #C3C3C3;}
    #t2 li {border-bottom: solid 1px #C3C3C3;}

    If you are going to make them exactly the same, you can combine them into one statement (not necessary) or use them separately as above to style them differently.
  • Hmm.. thanks for the suggestion. I tried it out and there doesn't seem to be any change. Any other ideas?
  • Yep, stupid error by me -- do this:

    .domtab li {border-bottom: solid 1px #680000;}

    That work?
  • You got it! Thanks a ton... been trying to figure this out for days!
  • nice post, I have a request if I may, I'd love the php code and css for your "Stay In The Loop! + Share This Post" box, I'm thinking you have the function then you calling with a hook right "Thesis Hook After post" or a similar one, I'd love to implement. Thanks
  • Jorge, you can find all of that in this post.
  • Tsh
    Hi Matt - Thanks for this great tutorial! It's working nicely on one of my sites here, except for one thing.

    On the "Popular" tab, where I'm pulling info from the Popular Posts plugin, I don't quite have the CSS right. Specifically, the "•" to the left of the post name is sitting outside the box. Do you have any ideas?

    Here's my current CSS:

    .domtab li {padding:8px; line-height:2em; font-size: 14px; }

    Thanks for any ideas!



    edit to add: I figured it out, but thanks anyway!
  • Awesome! list-style:none; normally does the trick!
  • Matt,

    For some reason I am not seeing the boxes. I can only see the tabs. Also, is there any way to insert html code into the boxes rather than have it pull posts from recent posts, recent comments and popular posts? I am trying to get it to look almost exactly like the tabber on this page - http://www.phoenixarizonarealestatehomes.com/
  • Yes, you can insert any html or php into any tab. If you don't see the boxes, You most likely have an error in the html below the tab titles. Double check your code with what I have here and see how that works out.
  • Great tips, I'm going to try this on our site: http://www.muffslap.com
  • I want a Sidebar like that of yours
    Can you help me?
  • There are a ton of css customizations, graphics, and plugins being meshed together for my sidebar. You can feel free to dig into my code manually (View Source) or by using Firebug for Firefox.
  • lickmylife
    Hello, thank you for this great tutorial.

    Could you probably tell me where I can find the Thesis Openhook options within the new version 1.6? It seems to be gone.

    thank you very much in advance
  • Kyle
    Great help, thanks!
  • Holly
    What css formatting would result in the border below the active and hovered tabs being invisible, such as on this theme: http://www.woothemes.com/demo/?t=1
  • leethehotflashqueen
    I love your site and it has really been so helpful with my lack of knowledge for thesis. I am trying to use this code on my site, but for some reason the bottom of the box is not showing up. Not sure what I have done wrong. I would love some help!! http://www.commentcrackwhoresanonymous.com. Also, I am not sure where to find the php functions for the widgets that I want to use....Thanks!
blog comments powered by Disqus

Previous post:

Next post: