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!
1. Great tutorial
2. Do you have a working demo?
3. You should check out this little known plug-in called Featured Slide Show (FCS). I have it running on a yet to be completed project and it looks fantastic. Here’s the link to the plug-in: http://www.perfectsurf.de/wordpress-plugin-featured-category-slideshow-fcs
Hi Morten! thanks for the comment! I don’t have a working demo but you can download 2 sample files here.
I’m working on a WP theme (which will be available for download for free) that will have a ‘featured‘ post section (and pagination working).
Hey and thanks for the heads up on the plugin btw! I usually try to use a minimal amount of plugins, but this one looks like a nice one! I’ve used SmoothGallery before and it’s pretty cool, though I hard-coded the whole thing using a similar method as described in my post :)
FCS is great because it’s styled entirely with CSS (in other words completely customizable) and controlled with some basic JQuery. Once you figure out how it works you can make it look and function any way you want and even “un-plug-in” it if that’s what you desire. I built it into a theme I’ve been working on and I’ll probably put it in a free theme at some point too as a custom field.
I’ll take a look at your solution some time this week. I think it’s something I can use for another project I’m starting soon.
I got a question: Doesn’t the WordPress Sticky function do something similar? Or am I wrong?
@Morten: Awesome! Lemme know if it works out for you :)
@Baz: You’re absolutely right! But the code in my post can also be used to work with multiple sections. I just used the example of a ‘featured‘ post so people can relate to it since we see that on a lot of blogs (or take Morten’s example above using Smooth Gallery). My code can be used/tweaked to do many things, not only for a ‘featured‘ post section. Say you wanna display a box at the top with a list of 5 posts you could use a similar query (which may break the pagination, but you can get it working again using some code from my post) or some posts at the bottom of the homepage (say a list of selected posts). The ‘sticky‘ feature in 2.7 is awesome though :)
thx a lot, it works like a charm.
Many thanks for writing this one! Should come in handy once I get my new design “WordPress-ified”. :)
I’m working on my wordpress theme project while reading this post. I’ve almost done with this part, thanks for the great tutorial :)
The freatured post is duplicating the post onto the rest of the posts. Can you help me with this issue???
This is almost what I’m looking for, but I need it in a widget, not the template, and I don’t want to create a dummy category for it.
How would I do this in a widget, and using either a tag, a custom field, or perhaps a plugin with its own settings?
@all: thanks for the comments! If you run into any problems or you have any questions you can always send me an email at jon [at] spyrestudios [dot] com and I’ll see what I can do :)
Could you please show me some screen shots when you’ve done and publish this featured post?
Does it display featured post and also related posts?
Hi there, I have a question. I know this sounds so easy but I really have hard time in working this out.
First I need to post 3 Featured posts on different div on the home page. How can I specify it to make the 3 display different posts instead of posting one item on 3 sections of the home page?
Waiting for your response. THanks.
Thank you!….Thank You!….Thank You!
I have been beating my head against the wall trying to figure this out. The code worked like a charm. A little styling and I’m good to go.
Did I say Thank you?
Can you make a featured post still appeared in paged home blog ?
Thanks! I’ve been scouring the codex, and had all but pagination working. I kept trying to make index be the secondary pagination pages, which of course didn’t work… I’ll be using your feature.php trick!
To me, the home.php file should only be used on the actual home, not pagination! Ah well!
Actually, pagination isn’t working right for me after all… How can I update the post count if a post is skipped?
Thanks for this tutorial. I was looking all over to find something just like this.
Thanks to this tutorials, I need it to my existing project :) cheers!
doesnt work! the standard posts arent formatting correctly. theres something broken as it wraps all the standard posts in 1 div.
Thanks for the tutorial, but I have a question. If I want that the featured post becomes a normal post when I create another featured post how can I achieve that??
Very thanks for this tut.
Using this feature on my new project, works perfectly, thank you..
Lee, did this work with WP 3.1? Thanks.
This was a life-saver! The homepage of the html template I am modifying for a client looked incredibly boring without the featured post, and I needed pagination as well. Thank you very much!