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.

Note: This is not a Thesis tutorial. When Thesis launched, WordPress didn’t have post images, so Thesis had its own method of using them and it was great. Now that WordPress has native support for them, I prefer to use that. To learn how to use the_post_thumbnail with Thesis, check out this article or this article.

WordPress 2.9 brought us the_post_thumbnail, which lets us set a photo for a post without using custom fields. It works really well and it’s one of my favourite newer features. The post thumbnail works with WordPress cropping functions and can be called at various sizes. Now, wouldn’t it be cool to show just a thumbnail, and then have a bigger photo open in a Lightbox script when clicked?

I thought it would be, and figured it would be easy, but there was one problem:

Most Lightbox scripts work by placing a link to your full-sized image and adding rel=”lightbox” to it. When you call the_post_thumbnail, WordPress doesn’t just spit out the URL, but also a whole lot of other code. We need to get rid of that first, and then rock and roll.

Here’s a quick tutorial on using the post_thumbnail with Lightbox:

1. Add post_thumbnail support

   Add the following to your theme’s functions.php file, if it’s not already there:

   <?php add_theme_support( 'post-thumbnails' ); ?>
   

   Now when you go to a post page, you’ll see an option on the bottom of the right hand side that allows you to set a post thumbnail. Easy enough. Let’s move onwards.

2. Install Lightbox

   There are lots of lightbox scripts out there, and this isn’t a tutorial on how to work them. I like to work with Slimbox because it’s tiny and uses jQuery, but the original Lightbox script is the most popular. Whichever script you choose, install it according to its instructions.

3. Add your post_thumbnail

   Now here comes the tricky part. In your single.php or wherever you want to place the image, put:

   <?php
   $thumbnail_id=get_the_post_thumbnail($post->ID);
   preg_match ('/src="(.*)" class/',$thumbnail_id,$link);
   echo $link[1];
   ?>
   <a href="<?php echo $link[1]; ?>" rel="lightbox"><?php the_post_thumbnail('thumbnail'); ?></a>
   

   This strips out all the extra HTML and gives us just the link, allowing us to append rel=”lightbox” to it. Awesome. You can change “thumbnail” to whatever size you want the thumbnail to be.

And that’s it. Lightboxy goodness.

Source:
Get the_post_thumbnail direct path for WordPress

Further reading on post_thumbnails:
Function Reference/the post thumbnail
Everything you need to know about WordPress 2.9′s post image feature
The Ultimate Guide For the_post_thumbnail in WordPress 2.9
New in WordPress 2.9: Post Thumbnail Images

So you just picked up a copy of the wonderful Thesis WordPress theme framework, installed it, and don’t quite know where to begin. Sure you can read some basic tutorials and instructions and get a simple site going, but we all know Thesis is more powerful than that. That’s why I’ve compiled this list of 9 awesome blogs to read and subscribe to that will be sure to make you a Thesis master in no time.

Note: You should always have a solid WordPress foundation before working on a specialized framework, so make sure to check out some WordPress development blogs before you dive into these.

DIY Themes Blog

Sometimes the best place for information is the source. Luckily, the DIY Themes crew have been hard at work pumping out tutorials and tips, and you can find them here. This site is rather recent, but has a great selection of awesome tutorials already. If you want beefy, in-depth tutorials, the official site is the place to be.

How to Set up Tracking Scripts with Thesis
How to Use the Robots Meta Tags in Thesis
How to Generate Affiliate Links to Any Page on DIYThemes

DIY Themes Answers

The DIY Themes Answers site has a tonne of quick tutorials and snippets. If you need to do something quick and just aren’t sure how, you’ll find the answers here a lot of the time.

Bill Erickson

Bill Erickson is a great designer who blogs and teaches about WordPress. He has released an 18 part tutorial on Thesis, which will teach you everything from the basics to the really advanced. His other WordPress articles are great to read too!

Thesis Tip #18: Full Width Navigation
Thesis Tip #17: Adding Content Between Posts
Thesis Tip #16: Redirect Pages

Matt Hodder

Matt Hodder is one half of the Thesis Themes team (who are my friends, as I sell my skin, Thesis Magazine, through them). Very talented at Thesis coding with a great eye for design, Matt’s blog shows you how he does some of the things he does for Thesis Themes.

Recent posts:
Change Your Thesis Site to a Fluid Layout
Enable WordPress 3.0 Features for the Thesis Theme
Starter PSD and Custom Files

Kristarella

Kristarella has some of the most read and classic Thesis posts around. She writes about a variety of things but check out her Thesis archives to see a variety of in-depth guides. Her posts are less tutorials and walk-throughs, and more general articles to teach you how to do your own thing. Very useful.

Recent posts:
WordPress 3.0 Custom Post Types, Taxonomies & Thesis
Position Your Thesis Nav
Mod Timthumb for WPMU and Thesis

Art of Blog

Not only is Art of Blog one of the most impressive Thesis-based sites I’ve seen to date, but it’s filled with all sorts of blogging advice, including tips on creating websites using the Thesis Theme. Their Thesis archives are filled with goodies and easy to follow tutorials, and while you’re there you can check out other how-tos and tips to take your designing and blogging to the next level.

Recent posts:
Creating Date Based Design Elements in Thesis
How to Use Thesis Custom Body Classes
301 Redirect Any Thesis Page

Greg Rickaby

Greg Rickaby is a web developer who has really taken a shine to the Thesis theme (and now the Genesis framework as well). You’ll find some more advanced tutorials and in-depth how-tos here, and it’s a great place to go when you want to do something really fancy with the framework.

Recent posts:

How to Use jQuery Lazy Load in Thesis 1.7
Thesis 1.8 Header Image
How to Create a Sub-Loop in Thesis

Matt Flies

I almost didn’t include Matt Flies, as it’s under construction right now and the posts are unavailable. That being said, when they are available, they’re excellent. Bookmark it or sign up to his newsletter because he puts out very easy to follow tutorials that teach you how to make Thesis do some really cool things.

Theme Thesis

I know, I know, shameless. But I like to think that Theme Thesis is indeed one of the best Thesis resources available right now. Not only will you find tutorials for Thesis, but you’ll also find tutorials for regular WordPress templates, so you can see what’s different and what makes Thesis unique.

Recent posts:
How to Make a jQuery-Powered Alert Box for the Thesis WordPress Theme
How to Use Thumbnails for Previous/Next Navigation in WordPress
How to Add The WordPress 3 Nav Menu to Thesis

That’s not all folks!

There’s no doubt more awesome Thesis resources out there. These are just my 9 favourites, and a varied collection that I feel will give you a great well-rounded education in Thesis development. You’re more than welcome to share your personal favourites in the comments!

Links are a basic part of the Internet. They’re what keep it connected, really, so why not make these connections fun? A link hover is what happens when you hover your mouse over a link (obviously). Usually you’ll see an underline, or an underline removed, or a different colour. But there are many ways to show people that they can click, so I thought I’d show you four of my favourites.

1. Transition

   CSS3 has introduced an awesome new property called “transition”. Don’t be scared when I say CSS3, as this degrades perfectly fine and non-supporting browsers will just show a regular hover (I’m looking at you Internet Explorer). You can use this transition property to make your link change colour slowly. It’s a very subtle but nice-looking effect.

   You apply the transition like so:

   a:hover {
   color:#000;
   -webkit-transition:color 500ms ease-in;
   -moz-transition:color 500ms ease-in;
   -o-transition:color 500ms ease-in;
   transition:color 500ms ease-in;
   }
   

   Check me out, I’m an example.

2. Shadow

   Another CSS3 trick. Make sure to specify this along with a colour, as otherwise it won’t degrade nicely at all and your older browser users will get confused.

   a:hover {text-shadow: 1px 1px 1px rgba(0,0,0,.4);}
   

   If you hover me, good things will happen.

3. Move

   This is a simple one, but one that I like and use a lot. You can add some cool interactivity if you slightly alter a link’s position on hover.

   a:hover {position: relative; top: 2px;}
   

   I just can’t stay still when you hover me!

4. Opacity

   This is a trick for images, and one that I use all the time. It’s nice to give images a hover state, as not all images are clickable, so you should be letting your readers know which ones are.

   a.img {opacity: .5;}
   

   You can see an example of this on the social media links at the top of this page. These links also move.

Well there they are. There’s nothing super mind-blowing here, but it’s the little details that count and will make your website a little more special. Are there any techniques that you like to use? Share them in the comments.

image by aidan morgan

The details of this tutorial only apply to people using the Thesis theme. The technique, however, can apply to anyone. So if you’re new to jQuery with any tip of website, read on.

As you may know, the wonderful Thesis theme comes with some default paragraph styles. This includes styling for notes (as you can see above) and alerts (as you can see above that). These are great, but wouldn’t it be cool if you could close the alert after you’ve been alerted? Potentially.

This tutorial has a bigger purpose than that, though. It should be a great introduction to jQuery for those who have never used it before. So let’s begin.

1. Turn jQuery on

   On a normal site you would call jQuery from the head of your document. Thesis has support for this built in, so in your WordPress dashboard go to Thesis > Page Options > Javascript and select the jQuery library.

2. Place the following in custom_functions.php:

   function custom_alert_box() {
   ?>
   
   <script type="text/javascript">// <![CDATA[
   $(document).ready(function() {
      $('#closealert').click(function(){
        $('p.alert').hide('2000');
      });
    });
   
   // ]]></script>
   
   add_action('wp_head', 'custom_alert_box');
   

   So what does this mean? It means that p.alert will be closed when you click something with the ID closealert and the animation will be finished in 2000ms. This allows for lots of customization, as #closealert could be an image or a span that says close me or a header, or whatever you think would be most useful.

3. Add alerts with your close mechanism

   Now when you use the built-in alert style with <p class=”alert”>, place your #closealert button in there somewhere and you’re all set.

Tip: If you don’t want to add a closing mechanism, then you can change the applicable lines in the code to this:

$('p.alert).click(function(){
$('p.alert').hide('2000');

Now when you click anywhere in the alert box it will close.

Enjoy

This post was brought to you by the Thesis WordPress theme; the search-engine optimized powerhouse of a framework designed to help you get a website up and running faster and more successfully. Want more information? Get it here. Want a professional website built on the Thesis framework and customized just for you? Contact me.

Almost every WordPress theme you’ll come across has support for going to the previous or next post. That’s all well and good, but in WordPress 2.9 we got the ability to have post thumbnails. Wouldn’t it be great to use thumbnails instead of or alongside our post titles? The answer is yes, it would. So I embarked on a journey to figure out how to add this functionality to your theme, and have posted the results below. First for regular WordPress users, and then for Thesis users.

1. Add post thumbnail support

   Open up functions.php and place add_theme_support(‘post-thumbnails’); in there, if it isn’t there already.

2. Add the code

   Open single.php and go down to where the previous_post_link and next_post_link is situated. If your theme doesn’t have that already, then just find a proper place for the thumbnails. Place the following code in:

   <?php
   $prevPost = get_previous_post();
   $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(150,150) );
   previous_post_link('%link',''.$prevthumbnail.'', TRUE);
   ?>
   
   <p class="prev_next2"><?php previous_post_link('%link','<') ; ?>
   
   <?php
   $nextPost = get_next_post();
   $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(150,150) );
   next_post_link('%link',''.$nextthumbnail.'', TRUE);
   ?>
   <p class="prev_next2"><?php previous_post_link('%link','>') ; ?></p>
   

   And that’s it for the code. The 150,150 is the size of the thumbnail, so feel free to experiment with that. You can style the thumbnail by targetting .wp-post-image in your css. The ‘<' can be changed to ‘%title’ if you’d like to put your previous/next titles in there instead of an arrow, and this can be styled by targeting p.prev_next2.

3. Add post thumbnails to your post

   Go into your post screen on the dashboard, and make sure you have an image set for “Featured image” on the right hand size. This is where the thumbnail will come from.

4. For Thesis users:

The trick works the same for Thesis, only instead of placing it in single.php, place it in a function like follows:

function prev_next(){
if (is_single()) {
?>

// CODE HERE

<?php } }
add_action('thesis_hook_after_content, 'prev_next);
remove_action('thesis_hook_after_content','thesis_prev_next_posts');

The remove_action gets rid of the previous/next navigation that is already built in.

Sources:

WordPress support forums
Digging into WordPress

It’s been a while since 47 Customizations for the Thesis Theme was posted and there has been some great Thesis tutorials written since then. Here I’ll share some of my favourite ones.

WordPress 3.0

Enable WordPress 3.0 Features for the Thesis Theme

WordPress 3.0 has some cool new features that Thesis doesn’t out-of-the-box support yet. Learn how to add that support yourself.

WordPress 3.0 custom post types, taxonomies & Thesis

Learn about the more techy WordPress 3.0 advancements and how to use them with your Thesis theme here.

How to Add the WordPress 3 Nav Menu to Thesis

Learn how to quickly add the WordPress 3.0 navigation menus to your Thesis site.

Making it Pop

Using Thesis Custom Body Classes To Break Down Design Barriers

Want to add some flair to a specific post on your Thesis-based site? Learn how to do so with custom body classes.

Styling the Thesis Sidebar

Using the default sidebar can be a giveaway that you’re using the Thesis theme. Here I’ll teach you how to style yours and make it unique.

How to Make Custom Comment Avatars for Thesis

Sick of the default gravatar in your comments? Here’s an article on putting your own in.

How to Make a Rotating Header Image in Thesis

One header image? Boring! Learn how to make it rotate.

Position Your Thesis Nav

Sometimes you don’t want your navigation bar where it comes by default. Luckily it’s easy to change its position.

How to Use jQuery Lazy Load in Thesis 1.7

Want to be like the cool kids and have your content load in as you go to it? Here you’ll learn how to do so.

Pages & Features

How to Create Additional Page Templates

Page templates are infinitely useful in WordPress, but a little trickier with Thesis. Learn how start creating them.

Another Tabbed Widget for Thesis Tutorial

Learn how to add a cool tabbed widget to your sidebar. (See the one on the right here for an example)

Create a Powerful jQuery-Powered Archives Page

Create a useful Archives page like the one used here.

How to Create a Subloop in Thesis

A tutorial on using advanced loops in Thesis.

Add Extra Widget Areas to Thesis

Thesis only comes with 2 widgets by default, but sometimes we need more. Learn how to add them with this tutorial.

Functionality

Hide Dates in Old WordPress Posts Using the Thesis Theme

Have some old content that’s still applicable and relevant? Don’t let people judge it by its date! Learn how to hide the dates in only old posts.

Smarter Thesis Hooks

If you’re doing any kind of real customization to your Thesis theme, you probably have functions all over the place. Learn how to implement them efficiently.

Slideshows

Adding a Featured Content Slider to Thesis in 5 Quick Steps

Learn how to add a jQuery slider to your Thesis site using s3lider.

How To Make a jQuery Image Slideshow in Thesis

Learn how to quickly add a jQuery image slideshow to your Thesis site.

Adding a Featured Content Slider for Thesis

Use jQuery Cycle to add a content slider to your Thesis site.

How to Create a Featured Content Slider

An in-depth tutorial to show you how to add support for a featured content slider in Thesis.

Thesis Feature Box – How to Add a Slider

Learn how to add the d13slidehow to your Thesis feature box.

How To Integrate Cu3er Post Elements To Thesis Theme Feature Box

Cu3er is a popular flash slideshow. Learn how to get it working in your Thesis feature box.

Social Media Integration

How to Install Twitter’s @anywhere in Thesis

@anywhere was launched recently with some really cool features. Learn how to implement it on your Thesis site.

Inserting Facebook’s Like Button in Thesis

Facebook is a huge source of traffic. Everybody and their grandmothers is on it. Learn how to leverage that in your site with this tutorial.

Add A Tweet This Post Box To Your Thesis Post Footer

Learn how to give visitors a custom tweet they can send out directly from your post.

Show Number of Retweets in WordPress Without a Plugin

Use social proof to entice people to share your WordPress posts with unlimited customization potential.

Add Social Links to WordPress Without a Plugin

Learn how to make sharing easy by putting already-formatted social media links in your posts without using a plugin.

Create a “Floating” Area in Thesis

Keep your social media links from and centre with this floating tutorial.

photo by back_garage

It’s time for a really quick tip.

With art directed posts being all the rage now, everybody wants to style everything. There are plugins and custom fields and all sorts of ways to do this, but WordPress already has two not-so-popular functions that allow you to style specific posts or pages

So here they are:

Body Class

<body <?php body_class(); ?>>

This will generate something like this:

<body class="single postid-61 logged-in">

Using this you can easily change the background image of your post by targetting .postid-61 in your CSS file. You could change anything else by targetting whatever it is, such as .postid-61 li to change your lists or .postid-61 a to change your link colours.

Post Class

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

This will generate something like:

<div class="post" id="post-61">

This will allow you to style the post section in the same way by targeting #post-61. Thus you can change the p font or the h1 or anything else.

There’s a lot you can do with these tags, since your content is wrapped in post and the rest of your site is wrapped in the body class. Not all themes will have this built in, so if yours doesn’t you can just replace the body and post tags with the functions above. I didn’t go over everything you can do here because it’s almost limitless, I just wanted to make sure that you were aware of the possibilities. There are links at the bottom you can read if you want more detail on the body class. Have fun!

Note: depending on your CSS structure you may have to place !important in your tags to override others.

Further reading

WordPress 2.8 and the body class function
WordPress 2.8 body_class, automatic_feed_links
9 Ways to Set Dynamic Body IDs via PHP and WordPress

photo by ivan makarov