Thesis/WordPress Tip: Featured Posts Script & Exclude From Front Page

Sometimes a featured post can be a good thing, if you have something you’d really want to push and make your readers aware of – like you can see on the following screenshot where I’m “pushing” the first interview I’ve ever done for techpatio.com. That post, as featured, will always appear on top of my home page until I publish a newer featured post or remove it from my featured category.

In Thesis Design Options you can opt for a “feature box” in your design, but all it gives you, is the ability to use a new hook: thesis_hook_feature_box.

You’d still have to do some actual programming to get a featured post to appear, as well as the CSS styling necessary.

Unfortunately I don’t remember where I initially found the code to this example (anyone?), but girlie over at the Thesis (DIY Themes) support forums also helped out a bit with the modifications, so credits should go to her, too.

Please note, this applies to Thesis 1.5. It might (should) still work with Thesis 1.6 though.

Thesis Options

First, in your WordPress Dashboard, go to Apperance > Design Options > Feature Box. I suggest you select “In your content column” as placement option and put it on the home page only. I guess you could use “site wide” if you really want to push your featured posts, but you’d probably have to modify the CSS a bit as it could easily be confused with the actual post’s header title and not a featured posts, then.

Custom Files

Second, you want to edit your custom_functions.php and custom.css files from within /wp-content/themes/thesis/custom. If you don’t know how to do that, then you should probably find out first as it’ll require a whole other blog post just to explain the possible tools required in order to edit those files 🙂

Custom_functions.php

This is the entire code which I’m using. You could just copy/paste it all and simply modify it in a single place. I’ll explain more in a bit.

[php]
// Featured post – image
function grab_featured_image() {
global $post;
$featured = get_post_meta($post->ID, ‘featured_image’, true);
echo ‘<img src="’ . $featured . ‘" align="right" style="margin-left:0.75em;" />’;
}

// Featured post – content
function featurecontent() { ?>
<?php $my_query = new WP_Query(‘category_name=featured&showposts=2’); while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;

?>
<div id="my-feature-box">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<a href="<?php the_permalink() ?>" title="Permanent link to <?php the_title(); ?>"><?php grab_featured_image(); ?></a>
<?php the_excerpt(); ?>
<div>
<a href="<?php the_permalink() ?>" rel="bookmark">Read the full article &rarr;</a>
</div>
</div>
<?php endwhile;
}
add_action(‘thesis_hook_feature_box’, ‘featurecontent’);

// Avoid FEATURED posts to be shown on frontpage
function limit_front_page() {
global $query_string;
if (is_home()) {
if(strpos($_SERVER[‘REQUEST_URI’], ‘page/’)==0)    {
query_posts(‘cat=-447’);
}
}
}
add_action(‘thesis_hook_before_content’, ‘limit_front_page’);
[/php]

Let’s start with function grab_featured_image first. This function grabs the value of a custom field I’ve assigned to my featured posts, called featured_image. I use that as a custom field, rather than the Post Image or Thumbnail Image from Thesis, since I might have to upload a modified post image either with transparent background or a gray background, to fit my background color of the featured post(s) area. You could just copy/paste the Thumbnail Image URL into the featured_image custom field if you like and simply use that. Or, rather easily modify the code to just use the Thumbnail Image URL to display as image for your featured post, or remove post image all together from the featured post teaser.

The next, function featurecontent, will grab two posts from the category named “featured”. If you want a different category to be shown, simply replace the “featured” text with the name of your category. If I have just one post in the featured category, only one will be displayed. If I have 2, 3 or 4 categories in the featured category, the 2 newest will be displayed. You can also modify that to your likings (showposts=2).

Now there’s some code to actually make the feature post appear, that’s the snippet that starts with <div id=”my-feature-box”>. It should be pretty self explanatory if you know a little bit about HTML.

The last one, function limit_front_page, is to avoid your featured posts also appear as teasers on your home page / front page. To use this, you must locate the ID of your “featured” category and replace that with “447” in my code. The minus in front tells WordPress to exclude posts from that category ID.

Custom.css

Now it’s time to modify custom.css so your featured post section will look nice. This code is made to make it fit within my design, so you probably have to play around with the colors and fonts/margins a bit.

[css]
/* Featured Post Formatting */
.custom #my-feature-box { padding: 22px 0px 22px 0px; }
.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: #2361a1; }
.custom #my-feature-box .featurereadmore a:hover { text-decoration: underline; }
.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; }
[/css]

Just one more thing though, if at one point you do not have any featured posts, and having the Thesis hook, thesis_hook_feature_box, enabled, it will cause an extra border to appear on top of your content section. To have that border disappear you can use this CSS code which will remove it. Unfortunately, also if you do have a featured post to display, the border below it will be removed. For now, I don’t mind, but it may not look well in your design.

[css].custom #feature_box { border-bottom: none }[/css]

That’s it. Hopefully you have a featured post displayed at the front page of your site right now. If you don’t, then feel free to leave a comment below and explain what you think went wrong and I’ll do my best to help you out.