This tutorial will take you through the process of building a tabbed widget for the sidebar of the Thesis WordPress theme.
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
With 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.
Go 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.
