Skip to content

Featured Content For WordPress

It’s surprisingly easy to build a neat little featured content area in WordPress, using a custom query to grab a couple of posts from a selected category, tag or even custom field. In this post we’ll find out how to build a simple featured content area for your blog, rather like the one I recently added to WPShout:

Choose your posts

First thing you need to do is choose which posts you want to have in your featured area. For argument’s sake, I’m going to use a category “featured”. We’re going to be building something like what’s currently on WPShout: no fancy jQuery, just something smart and functional that clearly shows off a couple of posts. Because we’re showing only three posts, we’re not going to do the usual and display the three most recent posts, but be bold and randomly pick three posts out of our category “featured”. This requires a custom query looking something like this:

<?php
    $featured = new WP_Query();
    $featured->query('posts_per_page=3&category_name=Featured&orderby=rand');
?>
<?php while ($featured->have_posts()) : $featured->the_post(); ?>

<?php endwhile; ?>
Using a custom query here means we don’t interfere with the standard loop which you’ll (presumably) run afterwards.

Displaying posts

Now that we’ve got our posts, we need to display them. We’ll wrap them in a div with the titles wrapped in H2s and linked up, followed by the post’s excerpt. That’ll all end up something like this:

<div class="featured-post">
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<?php the_excerpt(); ?>
</div><!-- .featured-post -->

Of course, we’ll then need to sandwich that in our query, so we end up with the following:

Yay! 🎉 You made it to the end of the article!
Alex Denning
Share:

13 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Leaf.
June 9, 2010 1:57 am

I’m using Custom Taxonomies (as opposed to categories) to organise a site. I use Stickies to feature posts (as it seems a reasonably-simply solution). However I want my sticky/feature posts to appear at the top of EVERY page (all taxonomies – regardless).

Apart from manually assigning each sticky post to every taxonomy, is there some way to achieve this?

Furuskog
May 31, 2010 6:43 pm

Why do you use postion relative twice 🙂 ?

Amor
June 3, 2010 3:13 pm
Reply to  Alex Denning

I tried it but didn’t notice that too! Not until I read Furuskog’s comment. 🙂

Best On WordPress From The Past Week N.8 » wpCanyon
May 31, 2010 9:32 am

[…] Build A WordPress Powered Featured Content Area […]

Amor
May 25, 2010 12:42 pm

I saw the added intro box in the homepage last week, noticed that you didn’t use any image, just pure CSS. Was tad shy to ask how you did it, but here it is now, complete with source files! 🙂

Downloaded and tested it already, works perfectly! I just changed the “featured-post” class to “welcome-post”.

Thanks a lot for sharing!

Scott Corgan
May 24, 2010 4:38 pm

Yes, yes! WordPress to the rescue. Thanks for the heads up in this technique. Looking to get more traffic, this could be a solution!

Dave Redfern
May 24, 2010 2:53 pm

Hello,

Nice tutorial although I would suggest not creating a category for featured and instead using the commonly unused sticky feature built into WordPress. This is much more logical for both the content and structure of WordPress.

Just assign a post to sticky and then change the query to.


$featured->query('posts_per_page=3&post__in=' . get_option('sticky_posts') . ',
&orderby=rand');

Dave.

John
May 25, 2010 3:57 pm
Reply to  Alex Denning

Actually, I agree with you re: sticky. I would actually use a tag as opposed to a category myself, but as you noted, you used a category simply for the sake of this tut.

graphicbeacon
June 7, 2010 1:56 am
Reply to  John

Actually you can make the thumbnail function better by restricting the width to the same size as .welcome-post

the_post_thumbnail(array(200,9999));

9999 stands for any random height.

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!