WordPress: Display Posts on a Page with Paging and Navigation

In WordPress themes and plugins, the Loop is used to display posts on the front end. Typically the Loop displays either a single post (like when you’re viewing a blog post), or multiple posts (like when you’re viewing a category archive). Things get more tricky however, when you want to display posts on a page.

For example, you create a static page named something like “Recent Posts”. On that page you want to display the latest published posts. AND you want to make sure that the posts include paging. So the user can navigate through the posts. This may sound easy, but requires a few tricks to make it work perfectly. Let’s look at the code..

The magic code

Here is a basic, simplified example showing how to display posts on a page with paging and navigation. Usage instructions to follow.

<?php /* Template Name: Posts on Page */

get_header();

$paged = get_query_var('paged') ? get_query_var('paged') : 1;

$args = array('posts_per_page' => 3, 'paged' => $paged);

$temp = $wp_query;

$wp_query = null;

$wp_query = new WP_Query();

$wp_query->query($args);

if ($wp_query->have_posts()) :
	
	while ($wp_query->have_posts()) :
		
		$wp_query->the_post();
		
		the_title();
		
		the_content();
		
	endwhile;
	
	previous_posts_link();
	
	next_posts_link(); 
	
	wp_reset_postdata();
	
else :
	
	esc_html_e('404 - Not Found');
	
endif;

get_footer();

How this code works. Without rewriting the book, basically it’s just a regular WordPress Loop using WP_Query. The trick is to add paging, which is done by including the paged parameter. We use get_query_var('paged') to get the correct/current value for paged. Then after looping through the posts, we use wp_reset_postdata() to reset the query.

Usage

The above code is simplified as much as possible. It is meant as a basic example to show how to display posts on a page with navigation. Once you understand how it works, you can go in and customize things as much as desired. It’s a starting point.

Here is how to set it up:

1. Create a new/blank theme template file
2. Name the new file page-example.php
3. Add the above code and save changes
4. In the WP Admin Area, create a new page
5. For the Page Template, select “Posts on Page”
6. Save changes and done.

After completing the steps, visit the page on your site’s front end. You should find that it displays your latest published posts along with “Previous” and “Next” buttons for navigation. That’s all there is to it. Once you get the hang of it, you can customize the code to match your theme template. For example, as provided the “posts on a page” loop does not include any HTML markup, like <h1> tags around the post title.

Related Resources

I’ve written tons of articles related to this topic. To read more, you can browse the archives and/or visit some of the following resources:

• WordPress Themes In Depth
• Triple Loop for WordPress
• Display Blog Posts on any Page (with navigation)
• Easily Adaptable WordPress Loop Templates
• Optimized Post Navigation

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.