How To Create A Featured Post Section In WP (And Get Pagination To Work)

If you’ve been working with WordPress for some time I’m sure there are a couple things you’ve had a hard time figuring out. One of the things I get asked a lot is how to get pagination working when you have a ‘featured post‘ section on the homepage.

You know, many of the ‘premium‘ WordPress themes out there have this featured post box on the homepage, sorta like a sticky post that stays there till you replace it with another featured post. This way you can give your best content more exposure by leaving it up there longer, while still publishing new posts below it.

The thing is, many of the premium themes I saw didn’t have pagination, which makes it hard for readers to find the content they’re looking for unless they use the search box or browse the full archives (which can be a pain sometimes) Also, many of the tutorials I’ve read didn’t actually mention how to get pagination to work. So let’s get to it! (btw, this has been tested with WP 2.6 and 2.7 but it’ll probably work with 2.8 and later versions too. It may also work with older versions.)

The Plan

So, let’s say we want to have 10 posts in reverse chronological order on the homepage, and 1 featured post at the very top, and maybe style this featured post differently than the rest (hey it’s a featured post after all!). That is fairly easy to do if you follow some of the instructions from the WordPress Codex. But in most cases it’ll break the pagination so when you click on ‘previous page‘ or use a plugin like PageNavi, you’ll get the same posts on all subsequent pages (www.yourdomain.com/page/2/ and so on). We don’t want that, we want people to be able to browse the older pages using the previous/next links.

So, we want 10 normal posts, 1 featured post at the top and pagination to work. First let’s create a new category and call it ‘Featured’

Now, let’s take a look at the code:

The Main Loop

Let’s start by creating the loop that will display our 10 regular posts, the code would look something like this:

[html]
<div class="normal_posts">
< ?php
$limit = get_option(‘posts_per_page’);
query_posts(‘showposts=’ . $limit . ‘&paged=’ . $paged .’&cat=-5′); ?>
< ?php if (have_posts()) : ?>< ?php while (have_posts()) : the_post(); ?>

/*** do what you gotta do here ***/

< ?php endwhile; endif; ?>
</div>
[/html]

As you can see I’ve excluded category 5 using ‘&cat=-5‘. Simply change this number to your own featured category. Also the $limit part let’s you control how many posts you wanna show from the WordPress admin panel. Let’s set this to 10.

So now we have a loop that will displays 10 posts, but we still need to get the featured post section up.

Featured Post Section

Let’s get thing up. The code would look something like this:

[html]
<div class="featured_post">
< ?php $my_query = new WP_Query(‘category_name=Featured&showposts=1’);
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>

/*** do what you gotta do here ***/

< ?php endwhile; ?>
</div>
[/html]

As you can see I’ve used category_name=Featured so this loop will display only posts published in the featured category. I’ve also set this to showposts=1 so our featured section only has one post. What’s the use of having a featured post section if we display another 10 post, eh?

Now we have a working loop that displays 10 posts in reverse chronological order, and we have a featured post section at the top displaying 1 post from the featured category. Of course you can style this featured post differently to give it more weight and make people wanna click and read. (it should be your best content, something people simply cannot skip). Simply wrap them inside divs. In my examples above the normal posts are inside a normal_posts div and my featured post is inside a featured_post div. And then you can style away!

Get Pagination Back

This is the easy part, you can find the pagination code in the WordPress Codex here.

It’d look something like this:

[html]
<div id="post_nav">
< ?php posts_nav_link(‘ – ‘, ‘Go Forward In Time’, ‘Go Back In Time’); ?>
</div>
[/html]
Add this code after this part:

[html]
< ?php endwhile; endif; ?>
[/html]

We’re Not Done Yet!

Now we got everything working, pagination works, we’re happy! But wait! There’s one more thing we need to do! If you got this working, you’ll notice that the featured post also shows up on page/2 when you click on the previous/next links. Not good! We want it to show up only on the homepage.

Just grab the featured post code:

[html]
<div class="featured_post">
< ?php $my_query = new WP_Query(‘category_name=Featured&showposts=1’);
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>

/*** do what you gotta do here ***/

< ?php endwhile; ?>
</div>
[/html]

Remove this from your index.php and create a new file called featured.php and paste the code in there. Save the file, upload. It’ll be easier when you wanna change stuff and move things around.

Now instead of the featured post code in the index.php we want to include this new featured.php file we just created, and we want to set it up so it doesn’t show up on subsequent pages. Like this:

[html]
< ?php if(is_home() && !is_paged()): ?>
< ?php include (TEMPLATEPATH . ‘/featured.php’); ?>
< ?php endif;?>
[/html]

Congrats! You’re Done!

Now you have 2 loops, one for the normal posts and one for the featured category, pagination is working and the featured post doesn’t show up on subsequent pages. Woohoo!

I’ve created sample index.php and featured.php files. You can download them below.

Download the sample php files here (downloaded [download#2#hits] times already!)

Hope you found this post useful! Lemme know if you got any questions!