DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Next/Previous Post Navigation Outside of the WordPress Loop

Posted by on

WordPress provides several navigational template tags to make it easy for visitors to surf your pages. There are basically two different types of template tags used for chronological post navigation:

  • posts_nav_link() – for navigating various archive (non-single) pages
  • previous_post_link() & next_post_link() – for navigating single-post pages

These template tags output the HTML markup required to create the actual hyperlinks that will appear on your web pages. By default, navigation links for single pages display the title of adjacent posts, while those for archive pages display “Next-Page” and “Previous-Page”.

Of course, the default text, link-position, and just about everything else can be customized and optimized according to your specific needs.

Normally, WordPress’ navigational template tags appear within the loop:

<?php get_header(); ?>

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

		<h1><?php the_title(); ?></h1>
		<?php the_content(); ?>

	<?php endwhile; ?>

		<p class="nav"><?php posts_nav_link(); ?></p>

	<?php else : ?>

		<h1>Nothing Found</h1>
		<p>Please try a little harder next time..</p>

	<?php endif; ?>

<?php get_footer(); ?>

This code is typical for index.php and other “Archive-View” pages, such as for Categories, Tags, Search Results, and so on. Similar code is used for Single Page-Views, where single.php would replace the posts_nav_link() 1 template tag for previous_post_link() and next_post_link() tags.

The navigational template tags are generally placed between the endwhile and else 2 statements, along with stuff like post comments, meta information, and social-media links. Within this section of the loop, code is processed only once, as opposed to multiple times in the first part of the loop.

Navigation outside of the loop

The good news is that the template tag for archive-view navigation (i.e., non-single pages) seems to work just fine outside of the loop. So you can just place posts_nav_link() anywhere within your theme template.

Then, to include single-view navigation outside of the loop, we can use query_posts to substantiate the loop anywhere within your single.php file. Here is a simplified version of the code that I am using at Perishable Press:

<?php $posts = query_posts($query_string); if (have_posts()) : while (have_posts()) : the_post(); ?>

	<?php previous_post_link(); ?> | <?php next_post_link(); ?>

<?php endwhile; endif; ?>

That’s all there is to it, really. A nice trick to have in the hat. Then, we can take it a step further and consolidate both types of page navigation (single and archive) in a single chunk of code:

<?php if(is_single()) { // single-view navigation ?>

	<?php $posts = query_posts($query_string); if (have_posts()) : while (have_posts()) : the_post(); ?>

		<?php previous_post_link(); ?> | <?php next_post_link(); ?>

	<?php endwhile; endif; ?>

<?php } else { // archive view navigation ?>

		<?php posts_nav_link(); ?>

<?php } ?>

This code displays the appropriate template tags for both single-page-views and archive-views. If placed in its own file named “nav.php”, including it within your theme files is as simple as a template tag:

<?php include_once("nav.php"); ?>

That’s an easy way to get your Next/Previous page navigation working anywhere outside the loop. This could easily be made into a custom function for your theme’s functions.php file. Or maybe even a plugin..? ;)

For more information on WordPress Page Navigation, check out these fine DiW articles:

15 Responses

  1. cooljaz124 April 23, 2010

    Nice tip :)

  2. I’ve been trying to work out how to do this on and off for about a year. THANK YOU!

  3. Very nice tip. By using the query_posts() function with default query string, we can access to everything as inside the Loop. That’s really cool. Thank you very much for sharing that great tip.

  4. Nancy Entwistle April 23, 2010

    Chris,

    I watched your 3 videos on translating your html website into a wordpress theme.
    Does your book contain that content?

    Nancy

  5. Ash Blue April 26, 2010

    I used to use WordPress’s default next/previous, anymore I use PageNavi. This post will be really useful If I need to do anything outside of normal paging though.

  6. Cool tips. Simple,nice and usable.Thanks for sharing this-.

  7. Correct me if I’m wrong. But isn’t those 3 template tags that you mention does work outside loop without the need of using query_posts(). Unless I’m missing something here.

    • zeo, correct. As mentioned in the article, posts_nav_link() works fine outside the loop, but previous_post_link() and similar require the loop. Here is the documentation:

      http://codex.wordpress.org/Template_Tags/previous_post_link

      • Odd. Have you tried yourself despite what codex tells u?

        • Yep, it is as specified in the Codex. I discovered this while working on the latest theme design for Perishable Press, where I am actually using this method out of necessity. Thought I’d share here with others.

  8. twincascos May 17, 2010

    Great tip, thanx…
    I have a previous -next plugin which shows a thumbnail for the posts.
    superslider-previousnext-thumbs

  9. Scott Corgan May 19, 2010

    That loops kills me. I don’t like it.

  10. Dyllon June 29, 2010

    I have a quick question. Which page is used when you ‘view older posts’?

  11. Got a question here.
    are comment template have to call inside the loop? If so, how to call it outside the loop?

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry