Next/Previous Post Navigation Outside of the WordPress Loop
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) pagesprevious_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 tips on WordPress Page Navigation, check out these DigWP tutorials:
About the author
Jeff Starr is a professional web developer and book author with over 15 years of experience. Jeff works with WordPress every day, designing themes, developing plugins, and securing sites. His books include Digging Into WordPress, WordPress Themes In Depth, and The Tao of WordPress.
15 responses
-
cooljaz124Nice tip :)
-
I’ve been trying to work out how to do this on and off for about a year. THANK YOU!
-
Deluxe Blog TipsVery 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. -
Nancy EntwistleChris,
I watched your 3 videos on translating your html website into a wordpress theme. Does your book contain that content?
-
Ash BlueI 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.
-
Cool tips. Simple,nice and usable. Thanks for sharing this-.
-
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.-
Jeff Starr Post Authorzeo, correct. As mentioned in the article,
posts_nav_link()works fine outside the loop, butprevious_post_link()and similar require the loop.Here is the documentation.
-
Odd. Have you tried yourself despite what codex tells u?
-
Jeff Starr Post Author
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.
-
-
-
-
twincascosGreat tip, thanx…
I have a previous -next plugin which shows a thumbnail for the posts.
superslider-previousnext-thumbs -
Scott CorganThat loops kills me. I don’t like it.
-
Jeff Starr Post Author
Care to elaborate?
-
-
DyllonI have a quick question. Which page is used when you ‘view older posts’?
-
febriGot a question here. are comment template have to call inside the loop? If so, how to call it outside the loop?
