Super Plugin Sale! Your Choice: BOGO or 30% Off »
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:

About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
SAC Pro: Unlimited chats.

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

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

    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.

Comments are closed for this post. Something to add? Let me know.
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 »
BBQ Pro: The fastest firewall to protect your WordPress.
Thoughts
RIP ICQ
Crazy that we’re almost halfway thru 2024.
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.