SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

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

December 29, 2008 by Jon 25 Comments

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’

Adding The Featured Category

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.

Limit Number Of Posts In WordPress

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!

Filed Under: Tutorial, WordPress

Comments

  1. Morten says

    December 29, 2008 at 1:52 am

    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

  2. Jon Phillips says

    December 29, 2008 at 1:55 am

    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 :)

  3. Morten says

    December 29, 2008 at 3:15 am

    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.

  4. Baz L says

    December 29, 2008 at 6:32 am

    I got a question: Doesn’t the WordPress Sticky function do something similar? Or am I wrong?

  5. Jon Phillips says

    December 29, 2008 at 6:43 am

    @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 :)

  6. mathias says

    January 5, 2009 at 6:28 am

    thx a lot, it works like a charm.

  7. Rask says

    January 30, 2009 at 4:17 am

    Many thanks for writing this one! Should come in handy once I get my new design “WordPress-ified”. :)

  8. Armand says

    February 18, 2009 at 10:44 am

    I’m working on my wordpress theme project while reading this post. I’ve almost done with this part, thanks for the great tutorial :)

  9. mike says

    February 18, 2009 at 7:39 pm

    The freatured post is duplicating the post onto the rest of the posts. Can you help me with this issue???

  10. Scott Allen says

    March 2, 2009 at 4:25 pm

    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?

  11. Jon Phillips says

    April 30, 2009 at 2:59 am

    @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 :)

  12. V.C says

    May 18, 2009 at 11:12 pm

    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?

  13. Michael Tan says

    September 23, 2009 at 1:45 am

    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.

  14. Jeff says

    November 2, 2009 at 8:45 pm

    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?

  15. viettel says

    December 16, 2009 at 5:28 am

    Can you make a featured post still appeared in paged home blog ?

  16. andi*pandi says

    March 2, 2010 at 2:01 pm

    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!

  17. andi*pandi says

    March 2, 2010 at 4:57 pm

    Actually, pagination isn’t working right for me after all… How can I update the post count if a post is skipped?

  18. Richard says

    April 1, 2010 at 7:16 am

    Thanks for this tutorial. I was looking all over to find something just like this.

  19. japs says

    May 28, 2010 at 1:10 pm

    Thanks to this tutorials, I need it to my existing project :) cheers!

  20. max says

    June 3, 2010 at 7:56 pm

    doesnt work! the standard posts arent formatting correctly. theres something broken as it wraps all the standard posts in 1 div.

  21. Seb_298 says

    December 26, 2010 at 7:07 pm

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

  22. Anonymous says

    December 29, 2010 at 1:12 pm

    Very thanks for this tut.

  23. Lee Fuller says

    March 24, 2011 at 11:45 am

    Using this feature on my new project, works perfectly, thank you..

  24. Travis Fulton says

    March 31, 2011 at 10:52 pm

    Lee, did this work with WP 3.1? Thanks.

  25. Brandon says

    April 6, 2011 at 8:09 am

    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!

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022