When you set up a WordPress blog, you can use the WP Settings > Reading panel to limit how many posts appear on a "blog" page, i.e. any page that displays a list of posts.
When you have more than that many posts, you get Previous Entries and Next Entries links at the bottom of the page that let you navigate through them all. This is referred to as pagination.
Then, in the Thesis Options panel, you can set how many of these posts display as featured posts and how many display as teasers on your home page page (or main blog page, if you're using a static page as your home page).
As you can see, I have this blog set up so there are 13 posts per page, with the first one being a featured post and all the rest are teasers.
Now, if you set up your site so that all the posts are featured, when you click Previous or Next, those pages will display all the posts as featured as well. However, if you have it set with a mix of featured and teasers, the Previous and Next pages will only display teasers—they won't show any featured posts at the top of the page. This is because WordPress doesn't consider the Previous/Next pages to be different pages from the blog page—they're simply a continuation of the page.
Recently, someone on Twitter asked if there was any way to format those continuation pages like the main page. (If you want to follow Thesis discussions on Twitter, check out the #thesis hash tag.) I had no idea how to do this but it sounded like a fun challenge, so I spent way too many hours trying to figure it out. And I did!
Now, here's the caveat. I don't actually understand every line of code in the sample below. I am not a PHP expert and I rarely do anything that involves The Loop, the function within WordPress that actually generates the lists of posts. But I kept Googling things and building bits and pieces on top of each other and finally managed to get it to work. You can see it in action here, which is the second page of posts off the home page.
If you want the same thing, you can simply copy and paste the code below into your custom_functions.php file.
function paged_posts() {
if (is_paged() && is_home()) {
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$offset = (($paged - 2) * 13) + 13;
query_posts("posts_per_page=13&offset=$offset");
remove_action('thesis_hook_after_content','thesis_post_navigation');
add_action('thesis_hook_after_content','paged_navigation');
}
}
add_action('thesis_hook_before_content','paged_posts');
function paged_navigation() {
wp_reset_query();
$paged = ((get_query_var('paged')) ? get_query_var('paged') : 1);
$previous = ($paged + 1);
$next = ($paged - 1);
echo '<div class="prev_next">';
echo '<p class="previous floated"><a href="http://www.techforluddites.com/page/' . $previous . '" >← Previous Entries</a></p>';
echo '<p class="next"><a href="http://www.techforluddites.com/page/' . $next . '" >Next Entries →</a></p>';
echo '</div>';
}
A few notes:
- is_paged() is the conditional tag that refers to those pages that are continuations from the main blog page. It will not affect that main page itself.
- To change the code to match the number of posts per page you use on your site, replace the "13" in the three places it appears in these two lines.
- $offset = (($paged - 2) * 13) + 13;
- query_posts("posts_per_page=13&offset=$offset");
- The offset attribute is critical to making the code work correctly. Without that, the code would call the exact same posts on each of the follow-on pages. The offset tells it how many posts to skip to start at the correct spot. So the line, $offset = (($paged - 2) * 13) + 13; is calculating what that number should be, based on the how your post is set up. It basically says, "Figure out what page number I'm on and subtract 2. Multiply that by 13 (the number of posts on a follow-on-page) and add 13 (the number of posts on the home page)." So, if I'm on page 4, 4-2 equals 2. 2 x 13 = 26 and 26 + 13 = 39, so page 4 should start at post 40. That makes sense because you have 3 pages of 13 posts before it.
- If you have the same number of posts on the follow-on pages as you do on the home page, you could actually simplify that one line of code to $offset=(($paged - 1) * 13);. The reason I set it up this way is because it allows you to actually have a different number of posts on the follow-on pages than on the first page. For example, if you have 5 posts on your home page but want 9 posts on the others, you would change these two lines as follows:
- $offset = (($paged - 2) * 9) + 5;
- query_posts("posts_per_page=9&offset=$offset");
- The first part of the code causes the pages to display the correct posts. However, for some reason it also removed the Next Entries link from the bottom of the page. (I think it might have something to do with the offset feature, but I'm not positive). So I removed the default links and added a second function, paged_navigation(), that recreates them manually. This uses WordPress's default styling. If you've customized them for your own blog, you'll have to make the same adjustments to the code here as well.
Modifying the code for archive pages
Note that the code above applies ONLY to the follow-on pages from your main blog page. However, your archive pages (category, tag, date, author, etc.) also use pagination. To make it work for them, you would have to write conditional statements for each different type of archive. For example, the sample below works for category pages. Again, you can see this in action if you go to my Facebook category page and click the Next Entries and Previous Entries link at the bottom of it.
function paged_posts() {
if (is_paged() && is_home()) {
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$offset = (($paged - 2) * 13) + 13;
query_posts("posts_per_page=13&offset=$offset");
remove_action('thesis_hook_after_content','thesis_post_navigation');
add_action('thesis_hook_after_content','paged_navigation');
}
elseif (is_paged() && is_category()) {
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$cat = get_query_var('cat');
$offset = (($paged - 2) * 13) + 13;
query_posts("posts_per_page=13&offset=$offset&cat=$cat");
remove_action('thesis_hook_after_content','thesis_post_navigation');
add_action('thesis_hook_after_content','paged_navigation_cat');
}
}
add_action('thesis_hook_before_content','paged_posts');
function paged_navigation() {
wp_reset_query();
$paged = ((get_query_var('paged')) ? get_query_var('paged') : 1);
$previous = ($paged + 1);
$next = ($paged - 1);
echo '<div class="prev_next">';
echo '<p class="previous floated"><a href="http://www.techforluddites.com/page/' . $previous . '" >← Previous Entries</a></p>';
echo '<p class="next"><a href="http://www.techforluddites.com/page/' . $next . '" >Next Entries →</a></p>';
echo '</div>';
}
function paged_navigation_cat() {
wp_reset_query();
$paged = ((get_query_var('paged')) ? get_query_var('paged') : 1);
$category_name = get_query_var('category_name');
$previous = ($paged + 1);
$next = ($paged - 1);
echo '<div class="prev_next">';
echo '<p class="previous floated"><a href="http://www.techforluddites.com/category/' . $category_name . '/page/' . $previous . '" >← Previous Entries</a></p>';
echo '<p class="next"><a href="http://www.techforluddites.com/category/' . $category_name . '/page/' . $next . '" >Next Entries →</a></p>';
echo '</div>';
}
If you want to have the same effect on your tag archives or date-based archives, you'd need to write separate sections that use the appropriate parameters for the different functions for each.
As I mentioned earlier, this code is actually quite a bit above my pay grade, so if you have any questions about or problems with it, there's a good chance I won't be able to answer them. But feel free to send them along anyway and I'll give it my best shot!
Sign up for the Thesis newsletter to get more great tips, delivered right to your Inbox!
Posted in Blogging, Code Sample, Formatting, How To, Thesis
{ 4 comments… read them below or add one }
Hi! I gave the custom_functions.php code a try on my blog (enchocolat.com) with edits to show 6 posts per page but it seems that it doesn’t get along well with the custom numbered page nav script here: http://diythemes.com/forums/redirect-to/?redirect=http%3A%2F%2Fwww.artofblog.com%2Fthesis-page-navigation%2F
I added the numbered page script in prior to trying the code above to format the previous posts pages and when I implement the code above and select save it does not work to change the display format of my page but additionally it seems to protest the page nav script because it erases it from the custom_functions.php file. Any ideas?
I had a problem with the automatic Previous/Next buttons not working correctly with the code (the Next button disappeared), which is why I had to create the second part of the function to manually add them back in. I suspect there’s something similar going on with the numbered page script. But I’d have to see the full custom_functions.php file to see if I could figure out how to make it work. Feel free to email me a copy at Thesis@TechForLuddites.com. I may not be able to look at it for a couple of days, though.
Thanks! I’ve been trying to figure out how to show four posts on my home page instead of two… and this told me how. I know your tutorial is on something much more difficult, but… well, I’m new and needed to adjust this. Thanks!
I’m glad it helped!