Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
Web Dev + WordPress + Security

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();
Important: No editing is required for the above code. It’s just an example to show how “posts on a page” works. Just make sure that your site has plenty of published posts to display. Otherwise if not enough posts, the navigation (next/previous) links won’t be displayed.

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.

Pro Tip: For a complete guide to building themes, check out my book WordPress Themes In Depth. It’s 450+ action-packed pages and includes an entire chapter dedicated to the WordPress Loop.

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:

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

One response to “WordPress: Display Posts on a Page with Paging and Navigation”

  1. Jeff Starr
    Jeff Starr 2023/01/20 2:27 pm Reply

    Got a question on Twitter asking if these lines

    $temp = $wp_query;
    
    $wp_query = null;

    are necessary? The $temp variable is just in case you want to restore the original query later. Both lines probably safe to remove.

Leave a reply

Name and email required. Email kept private. Basic markup allowed. Please wrap any small/single-line code snippets with <code> tags. Wrap any long/multi-line snippets with <pre><code> tags. For more info, check out the Comment Policy and Privacy Policy.

Subscribe to comments on this post

Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
.htaccess made easy: Improve site performance and security.
Thoughts
DIY: Monitor File Changes via Cron working perfectly for over a decade.
Mastodon social is a trip. Glad I found it.
As a strict rule, I never use cache plugins on any of my sites. They cause more problems than they solve, imho. Just not worth it.
Currently on a posting spree :)
6 must come before 7.
My top three favorite-to-write coding languages: CSS, PHP, JavaScript.
If you’re not 100% sure that you can trust something, you can’t.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.