Highlight Featured Posts

Sometimes you want to write a post that stands out from the rest. Usually giving the selected post an additional CSS class will do the trick, but how do you work out which posts need highlighting? This is simply done by creating a new category called ‘Featured’ (note you can call the category anything you like, but I’ll refer to it as Featured in this post).

If you create a new category called ‘Featured’ to highlight your posts, you can choose whether to also keep this category displayed on the category listing. If you choose not to then just exclude it from the wp_list_categories() tag.

So, when you create a new post you assign it to your usual category but you also assign it to the featured category if you want it to be highlighted. Simple enough? Then with one small change in your index.php file you can easily get an additional class added to the post container.

in_category() is the template tag to check if a post is in a particular category. It’s a conditional tag ie. it either returns TRUE or FALSE so is always used in a PHP if statement.

if (in_category('featured')) :
// the post is in the featured category
endif;

So using this conditional tag we can easily target the posts in the index.php template. You want to insert a class into the wrapper of the post. This will most likely be a div. Using the Classic theme as an example we originally have:

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

So we need to insert a second class into this div if it’s a featured post. To do this we use the following code:

<div class="post<?php if (in_category('featured')) echo ' posthighlight' ?>" id="post-<?php the_ID(); ?>">

Note the additional space before the posthighlight to separate the post class from the posthighlight class.

You can then target the posthightlight class in your CSS (make sure you put this class after your post class settings, so that you override them with the posthightlight settings).

Written by Sarah from Stuff By Sarah
Posted on June 15th, 2008 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates

5