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; ?>

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; ?>

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.

[button href=https://wpshout.com/downloads/featured-area.zip]Download[/button]