Thesis feature box – How to show off your best articles

One of the new features released with Thesis 1.4 was the thesis feature box.  Uses for the feature box are endless, however most poeple are using it on their blogs to highlight their best articles and featured posts.  Although the feature box is available in Thesis 1.4, the only way to utilize it currently is through the use of  Thesis hooks.  For those that may be a little less “coding able”, I thought I’d share an article on how to quickly and easily utilize the Thesis feature box to highlight posts on your Thesis WordPress blog.

Enabling the Thesis feature box

The first thing you’ll need to do in order to utilize the Thesis feature box is turn it on, or enable it.  This is done by going into your WordPress administration console, selecting Appearance on the left hand menu, followed by Design Options.

In the top corner will be a box titled appropriately: “Feature Box”.  Using the drop-down menu below it, select “In your content column”.  Please note that there are two other options available: Full-width above content and sidebars and Full-width above header only.  These are just two more ways you can utilize the Thesis feature box.

Next, you’ll need to specify when you would like the feature box shown.  This will depend on how your blog is set-up an what your preference.  Most will want to select the default: on-blog page only.  The third setting lets you select at what point on your blog page you’ll want to show the feature box.  Most will want it at the top, and thus the default setting “Above All Posts” will meet your needs.

Once you’ve adjusted your feature box settings appropriately, navigate down and click on the Save button.

Create a “Featured’” category

The way we’ll determine which article to display in our featured section will be by placing that article in a category we’ll name Featured. Using your WordPress admin console, create a new category named: Featured and save it.  Find the post you want to feature, edit it and add it to the new Featured category.  You’ll see how we’ll use this new category in next.

Adding the Thesis feature box hook

Next, we’ll open up the custom_functions.php file and add in our hook.  There are various different ways to edit your custom_functions.php file, but I generally just ftp to my server using FireFTP, navigate to my custom folder, and edit the file using Notepad++ directly.  Another easier option for those of you not as technical is the Openhook plugin, which allows you to edit your custom_functions.php and custom.css files directly within the WordPress admin console.

Regardless of which option you select, you’ll want to add the following code to your custom_functions.php file:

Update:The code has been modified from the original as Thesis 1.5 added a DIV tag for the feature-box. Thanks to R.J. for pointing out the problem via a comment.

function featurecontent() { ?>
<div id="my-feature-box">
<?php $my_query = new WP_Query('category_name=featured&showposts=1'); while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<div class="featurereadmore">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Read the full article">Read the full article →</a>
</div>
<?php endwhile; ?>
</div>
<?php
}
add_action('thesis_hook_feature_box', 'featurecontent');

I won’t go into the gory details of what this code actually does, but suffice it to say it pulls the post placed in the Featured category and displays it as a partial post, adding the “Read the full article” link to the end.

One VERY important note.  Make sure the same spelling and case is used in the code for “Featured” as you named it in your Category listing in the WordPress panel, if you don’t your featured post won’t show.

Making your Thesis feature box look pretty

While that works, it won’t look very nice, so let’s style it by adding the following to the custom.css file:

/* Featured Post Formatting */
.custom #my-feature-box { font-family: Helvetica,Arial,sans-serif; color: #ffffff; background: #bbbbbb; padding: 22px 15px 22px 15px; }
.custom #my-feature-box h2 { font-size: 2.2em; margin: 0 0 15px 0; }
.custom #my-feature-box h2 a { color: #000000; text-decoration: none; }
.custom #my-feature-box h2 a:hover { color: #ffffff; }
.custom #my-feature-box p { font-size: 1.4em; line-height:1.571em; text-align: justify;}
.custom #my-feature-box .featurereadmore { padding: 22px 0 0 0; }
.custom #my-feature-box .featurereadmore a { font-size: 14px; text-decoration: none; }

Save your file, refresh your site and you should have a featured post featured at the top of your site, which a light gray background! You of course will probably want to adjust the colors some to better match your site, but the hard parts done. I’ll discuss in a future article on how to add multiple articles to the Featured category and have your feature box scroll through them! Interested in using a graphical slider instead?  Check out my new article on how to include a slider in your Thesis feature box.