Featured Content For WordPress

Posted on 24. May, 2010 by Alex Denning in Theme Customization

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:

<?php
$featured = new WP_Query();
$featured->query('posts_per_page=3&category_name=Featured&orderby=rand');
?>
<?php while ($featured->have_posts()) : $featured->the_post(); ?>
<div class="featured-post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
</div><!– .featured-post –>
<?php endwhile; ?>

By adding the div within the loop, this runs it for every post so that each post is wrapped in the class featured-post.

Styling the featured content

Next a little styling. Nettus recently published a screencast showing how to make the fold over (that’s actually a triangle) effect purely with CSS. We’ll be using that technique here to give a little pop to our featured content. We’ll also be employing some subtle CSS3 shadows and gradients to subtly make our content look awesome.

First, we need to wrap the whole lot in a div and give that a width, background etc:

#welcome{ position:relative; margin:0; background: #EAEAEA;
height:180px; padding:20px 20px 20px 40px; width:662px;
text-shadow:1px 1px 1px #fff; margin:0 0 0 -20px;
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929; }

In addition to the CSS3 box shadow we’ve got, you might like to add some CSS3 gradients to the box, something like this looks subtly awesome!

background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#C9C9C9),color-stop(1,#C9C9C9)) fixed no-repeat 0 100%;
background: -moz-linear-gradient(100% 100% 90deg, #C9C9C9, #FFF) fixed no-repeat 0 100%;

We can then add a little styling to the .welcome-post class we created to wrap each post with:

.welcome-post { width:200px; padding:0 20px 0 0; float:left;}

This’ll split up the area into three little columns, one for each post.

We can then style links and H2s:

#welcome h2{ font-family:arial; border-bottom:dashed 1px #aaa; padding: 0 0 10px; }
#welcome a:hover{ color:#444; }

And again, some optional CSS3 enhancement:

#welcome a{ -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; }

Finally, we just need to add the little arrow:

.arrow { border-left: 20px solid transparent;
border-top: 10px solid #3E8AAD; height: 0px; left: 0px;
line-height: 0; position: absolute; top: 221px; width: 0px; }

And we’ve created an awesome featured content area. You can grab the source files below and just check out the homepage for an example.

Download

Enjoyed the post? We'll see you on Twitter or in your RSS reader!

WPShout is hosted by the fine folks at WPWebHost.

You can get exactly the same hosting as WPShout has for $7.95/month with WPWebHost's Freedom Plan.

Plus get 30% off the Freedom Plan with the code WPSHOUT.

Visit WPWebHost

Alex Denning is the founder of WPShout. A WordPress developer from London, Alex is a keen musician and freelance writer and developer.

You can find Alex on Twitter.

14 Responses to “Featured Content For WordPress”

Dave Redfern
24. May, 2010
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.
Reply to this comment
- Alex Denning
  24. May, 2010
  Not sure about that. Sticky posts are meant for holding posts at the top of your site and whilst they’re good when you want to have just a single post featured, in this situation I don’t think they’re the best option as potentially posts are going to be in the featured content area for a couple of months, as I’ve got it set up on Shout. This’ll be a pain to get around in archives and even when just running the standard loop below — as no single post stands out, stickies will get pushed to the top so you’ll have to filter them out, but what if you wanted them just in order?! It can be done, just it’s a pain! This makes things simpler.
  Reply to this comment
  - John
    25. May, 2010
    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.
    Reply to this comment
    - graphicbeacon
      06. Jun, 2010
      I do see the flexibility in using tags – that will make thing a whole lot easier. I am currently building a featured section for a charity website. This featured section tutorial could easily be improved by allowing the post-thumbnail feature:
      <div class="featured-post"> <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <?php the_excerpt(); ?>
      </div><!-- .featured-post –>
      Check http://bit.ly/7RnaCm for a better guide to the post-thumbnails feature
      P.S.- The code you used for the commenting should be <!– and not <!-
      Reply to this comment
      - graphicbeacon
        07. Jun, 2010
        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.
Scott Corgan
24. May, 2010
Yes, yes! WordPress to the rescue. Thanks for the heads up in this technique. Looking to get more traffic, this could be a solution!
Reply to this comment
- Alex Denning
  05. Jun, 2010
  It’s a fantastic way of keeping readers on your site. Let me know how it goes!
  Reply to this comment
Amor
25. May, 2010
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!
Reply to this comment
Furuskog
31. May, 2010
Why do you use postion relative twice ?
Reply to this comment
- Alex Denning
  03. Jun, 2010
  Because I’m an idiot. Ta for the heads up
  Reply to this comment
  - Amor
    03. Jun, 2010
    I tried it but didn’t notice that too! Not until I read Furuskog’s comment.
    Reply to this comment
    - Alex Denning
      05. Jun, 2010
      It wouldn’t have had an effect on the functionality, just wasting load time very slightly.
      Reply to this comment
Leaf.
09. Jun, 2010
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?
Reply to this comment