Who knows what’s next?

Next Page, Not Next Post

April 28th, 2009 by Matt McInvale

next-page-not-next-post

Download Next Page, Not Next Post at WordPress.org

Out of the box WordPress does a magnificent job of handling navigation between next & previous posts. It doesn’t do too great of a job handling navigation between sibling pages. We needed a solution to allow users to easily switch between these pages. After much searching and testing, it was clear that there wasn’t a good solution to this dilemma.

Our first “official” WordPress plugin “Next Page, Not Next Post” handles that without too much trouble.

An example solution

  • Home
  • About
    • Team
      • A
      • B
      • C
      • D
      • E
      • F
      • …
      • …
  • …
  • …

When a user is viewing page B, we create links to A & C. When on C, they get B & D and so on.

This plugin gives you two new functions, next_page_not_post($anchor_text, $loop, $getPages) & previous_page_not_post($anchor_text, $loop, $getPages). Each function has three simple options.

  1. Anchor Text – Either set the anchor text manually or use the page title. Defaults to page title, just leave blank for that.
  2. Looping - Link the first element to the last and the last to the first, or not. Set this parameter to ‘expand’ and the plugin will descend into child pages and ascend into parent pages when needed. This is useful for creating a simple click-thru interface with multiple levels. Defaults to not looping, set to true for looping.
  3. Get Pages – This is used with WordPress’s get_pages() function to determine the order of your pages. Defaults to menu_order and ascending.

It’s as simple as echo’ing the functions in your page:

<?php echo next_page_not_post(); ?>
<?php echo previous_page_not_post(); ?>

You can get more complex with this if needed in your templates. Setup a variable and then check if it’s empty to display more complex HTML. Maybe something along these lines?

<?php
 $nextPage = next_page_not_post('Next Page', 'true', 'sort_column=post_date&sort_order=desc');
 $prevPage = previous_page_not_post('Previous Page', 'true', 'sort_column=post_date&sort_order=desc');

 if (!empty($nextPage) || !empty($prevPage)) {
 echo '
<ul id="nextPrevPages">';

 if (!empty($nextPage)) echo '
	<li class="next">'.$nextPage.'</li>
';
 if (!empty($prevPage)) echo '
	<li class="previous">'.$prevPage.'</li>
';

 echo '</ul>
';
 }
?>

Let us know if this plugin works for you or you have any ideas for improving it.

Special thanks to Sarah & Frodo for help with testing.

History

  • 0.1.5: Added title attribute to links
  • 0.1.4: Added the ability to ascend and descend into parent/child pages.
  • 0.1.3: Replaced the manual sort option with more robust, $getPages option.
  • 0.1.2: Added the ability to manually sort.
  • 0.1.1: Updated plugin to work with “ugly” URLs.
  • 0.1: We’re still in early development with this plugin. There are bound to be some bugs and improvements we can implement.

Tags: ,
Posted in WordPress | 89 Comments »

89 Comments so far

  1. How about following menuorder?

  2. Excellent plug-in. I’ve been searching for this for quite some time!!
    Works out of the box and I already implemented it in my website to present the categories as chapters in a book. However, when I reach the end of a category (the last page) I want the next page to be the first page of the next category (parent or group) and keep going. Previous would do the opposite. Currently, the plug-in loop through the same group. Is it possible to have the plug-in move to the next parent?
    Here is an implementation of the plug-in:
    http://www.marcilan.com/pathology/cysts/lateral-periodontal-cyst/

    and second question, how do I integrate « to show up only before the title in the previous page and integrate » to show up only after the title of next page?

    Thanks!

  3. Wisam, we’re happy you like our plugin. :)

    “Is it possible to have the plug-in move to the next parent?”

    This goes well outside the intended functionality of this plugin. It wouldn’t be extremely difficult to make this happen though. Shoot me an email and we can discuss this, mcinvale@binarym.com.

    “how do I integrate « to show up only before the title in the previous page and integrate sta to show up only after the title of next page?”

    I don’t understand exactly what you’re asking here? Can you give me more detail(s)?

  4. Thanks! Works great.

  5. Now it is working like a charm. Thanks mcinvale for your help. I really appreciate it!!

  6. Thanks for this plugin. I would like to ask how could I disable looping? Although it was indicated that by default it does not make looping it seems that it is working.

    The structure is:
    A
    -B
    –C
    –D
    –E
    –F
    -G
    –H
    –I
    –J

    I use your plugin to navigate between C,D,E,F & H,I,J.
    When I am at “C”, I still have the link to “F” as previous page. Idem, when I am at “F”, “C” appears as the next page.

    Thanks,

    Best regards,

  7. Leave the loop parameter blank or set to false and it shouldn’t do that.

    • I have the exact same problem as mentioned above. It seems that it keeps looping, even when I leave the loop parameter blank or set it to false.

      What could be a solution to this?

      • I found the problem. The looping only happends with your 2nd example code. The 1st example code example works fine!

        Thanks for the great plugin.

    • It does not seem to honor the false set in no looping.. even though I have set it. The idea I need it for is that the link doesn’t display if there is not a next/previous item.

  8. You have no idea how long I was searching for a way to make my pages (not posts) show the previous – next!

    Your plug-in does it perfectly, and I can even sort it the way I want to! Thank you so much! It works on the website for the San Diego Ballet http://www.sandiegoballet.org now, if anybody is interested to see it working, go to the about/dancers/company dancers/individual dancers pages, you can nicely jump from one dancer to the next now thanks to this great plug-in.

    Thanks again, I really appreciate it!

  9. Just fantastic – thanks for this excellent plugin.

  10. Very cool! I’ve been bashing my head trying to solve this for the last couple of hours. Then I found your plugin. I should have Googled first, would have saved me a lot of time.

    Many thanks for the plugin, it’s working great for me.

  11. Great plugin – works perfect as intended. One quetsions though – I would like to have the title attribute implemented also. So besides the anchor text it also shows the title attribute. Like:
    next page anchor text
    How would you implement this?
    Thanks

  12. Grate plugin thanks!

    One tiny but crucial flaw. When viewing single image from attachment template the next and previous Page links point to that same attachment page. When clicked, nothing happens.

    Would be so great if you could fix that :)

    Really nice work, thanks a lot!! :)

    • The plugin isn’t designed to work with images, sorry.

      • I’m try to be more clear.

        I have five pages that have 10 attachments attached to each. When I’m viewing a page and click an image thumbnail open so that it opens as an attachment page I cant anymore change the page.

        I mean I’m still changing from page to page, not from attachment to attachment. I use something like next_image_link() to flip through the attachments.

        Hope I explained myself clear enough :)

  13. I’d like to change the color of the text. Where do I do that?

  14. Hello there… I’m working with the theme IMPREZZ, and so far have not had any trouble editing it. However, when I try to add this plug-in or even others so that I can view previous/next pages, nothing shows up once the code is updated, even if I manually add in the code instead of just installing the plug-in. Is this a problem with the plug-in or is something not communicating right with the theme?

    • You need to include the functions in you theme’s files for this to work.

      • Turned out it was an error made by the developer, but he released an updated version of it. Thanks anyway!

      • Can you tell me which files to put the code in? I’m using Thesis 1.7. Thanks so much!!!!!!

        • I put it in my custom_functions.php file, but it doesn’t show up. Please help. What am I doing wrong? Thanks!

          • Cindy, you just install the plugin and then modify your theme files.

          • Does anyone know Thesis? I guess I’m supposed to put the code for this plugin in my theme’s page.php file, but Thesis doesn’t have that file. It uses hooks in the custom_functions.php file. Any ideas?

            Thanks!

          • Okay, I got it this far. Here is the hook I used in Thesis:

            function page_ads() {
            if (is_page()) { ?>
            |

            <?php }
            }

            Yay. Now, how do I make it so it just does all the child pages and skips over the parent pages? I have the parent page menu linked to #, so it doesn't go anywhere. That's why I need to skip over the parent pages.

          • Sorry, the code didn’t post correctly in my last post.

  15. EXCELLENT PLUGIN!!!! I LOVE YOU!!!!

    This is just what I needed.

    Now I am wondering, is there a way to keep looping on, but restrict it from climbing back up in hierarchy, i.e. to get it to go from A in the list below through A1, A2, A3 then to B1, B2, B3 without hitting B?

    A
    1.
    2.
    3.

    B
    1.
    2.
    3.

  16. Great plugin, it’s exactly doing what I want.

    However, when the plugin is used on a page without child pages it will display links to other pages.
    Is there a way to dsplay nothing if there are no childpages?
    Thanks!

    • I’d have to see your page hierarchy to understand what you’re trying to accomplish.

      • What I mean: I have several pages. One of the contains child pages.
        When I activate the plugin, and view a chid page verything is OK. When I view a page which isn’t a child page and don’t have child pages it will display a link to the next page.

        I kind of solved it right now, to put a IF statement in my template design; if the parent of the current is ID x then show next/prev links.

        I have temporarily disabled that IF statement, so you can see on my site what I mean.
        All the links on the menu on the top of the site are pages (except the first 2 from the left). Only the link/page called ‘attracties’ has child pages.
        You can also see that the ‘about’ page is linking to the first child of the ‘attracties’ page.

  17. I can’t figure out how to get this to work (my fault…major novice here). I installed this plug in, and typed in the above code, but I must be doing something wrong. Could you please tell me exactly the code I should use so that I have “next” “previous” navigation on all the child pages under the FAQs pages of the site? I assume the code should go on each “child” page, and what, if any, specific to my site code would need to be included? Thanks!

  18. Love the plug-in, but I just can’t figure out how to align the text.
    I want’Previous’ to be on the left of the page, and ‘Next’ to be on the right.
    Any tips?

  19. Hey great plugin,
    I’ve been trying to come up with a solution which you did already with this plugin. Thanks.

    My only problem is, I’m using “expand” argument to navigate parent sibling pages, but when I’m on a subpage, it shows it own parent link as next link, not next parent.

    I’ll try to explain below:
    Parent A
    – Sub A1
    – Sub A2
    – Sub A3
    Parent B
    – Sub B1
    – Sub B2
    – Sub B3

    When I’m on the Sub A3 page, the “next link” is supposed to show Parent B, right? But in my situation “next link” shows Parent A. I need “Parent B” to show as next link when I’m on Sub A3 page.

    I’m using
    $nextPage = next_page_not_post(”, ‘expand’, ‘sort_column=menu_order&sort_order=desc’);
    $prevPage = previous_page_not_post(”, ‘expand’, ‘sort_column=menu_order&sort_order=desc’);

    as function arguments. Also each page have order numbers.

    Any ideas would be greatly appreciated. Thanks.

    • Are you using the same sort_order in your navigation? It looks like your pages are ascending but you’re using descending in the arguments.

  20. I only want to navigate between the parent pages. Is there any way to modify this plugin so that it will exclude child pages?

  21. Never mind I figured it out. If you want the code it’s here:
    http://pastie.org/901280

    Just modify the “get_pages” function in the plug-in PHP file so that it only grabs parent pages.

  22. Great plugin. I was playing about with it and have added additional functionality for $before and $after to allow text to be included in the tag just like the native WordPress version.

    I have put it in Pastebin located here.

    Now you can call next_page_not_post($before,$after) and the whole thing is a link.

    I haven’t done extensive testing but it works for me

  23. Just fixed a problem with $before and $after still showing when there is no title displayed (ie it has reached the end of the child pages).

    Update: Please use this version

    • Thanks Craig, I’ll take a look at this and possibly merge into the plugin.

    • Hey great, that works for me perfectly! Just what I was looking for! Thanks!

      I’m on WP 3.0.1 btw.

      • Woops! The before and after text weren’t appearing properly for the next_page_not_post as they were for the previous_page.. but after simply copying the code from the insde of previous_page to _next_page, it works fine now..

        Sorry, I don’t know how better to explain.. :(

  24. I got the “next_page_not_post();” link working but not the “previous_page_not_post();”. Is there any way to make it so that the links only show the parent link even if you are on a child page? So for instance: If my site looks like this:
    1
    2 -A -B -C
    3
    (Numbers are parents, letters are children)
    If a user is on the -B child page then the navigation would be “3″ and “1″ (or vice-versa).

    Using this code: http://pastie.org/901280 I was able to make the “next_page_not_post();” link do this, but the “previous_page_not_post();” show the wrong link.

  25. Awesome plugin. It does something that WordPress should do ‘out of the box’. Thanks!!!!!!!!!!

    :)

  26. Thanks for this great plugin. It’s working well, however it seems to skip sibling pages which have too high of an order assigned to them. As far as I know, page order assignments don’t need to be sequential (ie- you can have pages set to 1, 2, 5, 10, etc).

    I’m using the code which Offminded posted:

    $nextPage = next_page_not_post(”, ‘expand’, ’sort_column=menu_order&sort_order=desc’);
    $prevPage = previous_page_not_post(”, ‘expand’, ’sort_column=menu_order&sort_order=desc’);

    Any ideas?

    Thanks,

    Jrack

  27. Ok, I’m starting to feel really dumb here, but I can’t seem to get it to work properly.
    The first code example displays nothing at all for me, and using the second code example (and variations thereof), the Next Page and Previous Page links just link to the page you are currently on.
    I’m obviously doing something wrong, but I can’t figure out what it is. :/

    I’m using:
    $nextPage = next_page_not_post(‘Next Page’, ‘true’, ‘sort_column=menu_order’);
    $prevPage = previous_page_not_post(‘Previous Page’, ‘true’, ‘sort_column=menu_order’);

    Example: http://www.varlabs.ca/shop/t-shirts/my-little-betta
    The previous/next pages should be the different product pages, but it just links to the same page. The same effect happens on the parent pages as well.

    • What are you using for your shopping cart? Is each product assigned as it’s own page in WordPress?

      Nice betta shirt. :)

    • Thanks for all your help, Matt!

      To anyone with a similar problem: turns out that the plugin “Exclude Pages from Navigation” doesn’t play nicely with Next Page, Not Next Post. I’ll post an update if anything changes.

  28. Thanks for the plug in! It *almost* does what I need it to, but not quite. I’m doing next and previous pages within sub-pages, which have parent categories. Currently, it only stays within the one parent. I’m hoping to have it skip over to the sub-pages in the next parent, rather than looping within one parent. I ordered all of the pages involved in the WP back end, but it doesn’t make a difference. Any thoughts? Thank you so much!

    • can you post an example hierarchy or a link to the site you’re working on?

      • This is one of the completed pages:
        http://www.oldfarmslandscaping.com/masonry/terraces-walls/

        “Terraces & Walls” is a sub-page of the page “Masonry”. The next/previous buttons will move among pages under Masonry, but will not continue over to the other categories. For example, if you are on the “Columns” page, I would like it to jump over to the “Water Features” page under the “Unique Elements” category next. Instead, it loops back to the “Walkways & Patios” page under “Masonry”. The client is hoping to walk their viewers through each service they provide using the next buttons, under all of the categories listed in the above drop-downs.

        Hope that made sense! Thank you so much for your help.

  29. Hello, thanks for the great plug-in! It is working perfectly just as I need it, except the the order in which the pages are sorted are not congruent with the actual order of my sidebar. I am using the pages widget, and my pages are sorted by Page order, which I control through numbering each post. What function do I use so that this plug in follows page order? I am sure this is a very simple fix, and I appreciate any help in advance.

    Again thanks for the great work!

    Ryan

  30. Hello! This plugin seems to be almost perfect. Is there any way to modify the code so that it only appears on child pages, not parents. Any help you can give would be great.

    thanks,
    Euan

  31. Love the plug-in as well. how would I style this though… let me give an example.
    I want an arrow left to be the previous and an arrow right to be the next. these two arrows are images. where do i incorporate this into my code to have the image be the ?

    thank!
    heres a link: http://belovedadvertising.com/mario/successful/urban-sunshine/

    • Aaron, you should be able to use an image tag with the plugin. I haven’t tested that though. Alternatively, look up CSS techniques for replacing text with an image, there are many tutorials for that online.

      Your site looks good.

  32. This is very useful plugin but I am not success on my site. please, give me solution where I put the code. Tell me page name.

  33. Brilliant! Worked straight out of the box :)

    Thanks,

    Michael.

  34. Anyway to exclude a page ID? This plug in is a life saver btw!

Leave a comment

  • You said,
  • right now:

Trackbacks on this post

  1. [...] Next Page, Not Next Post von Matt McInvale fügt dem WordPress Blog einen “Next Post” Link hinzu. Das Plugin benötigt WordPress Version 2.7. Bookmarks setzen: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können. [...]

«
»

From the Blog

Alan and his team needed a website that would allow for blog posts to keep their clients informed and display their rentals. Our approach to the design was to keep it clean and simple to allow for their advice on San Diego property management and San Diego rentals take center stage.
read more

From our clients...

BinaryM’s work for me over the past 4 years has been truly exceptional. From conception to implementation, BinaryM’s dedication, talent and work ethic in appareled in this business. They are at the top of their field in terms of technology and cost saving solutions for their clients. I have come to rely heavily on BinaryM – they are always there for me 24/7. I never hesitate to recommend BinaryM’s services to anyone looking to develop a new web site or refresh an existing project.

Kathryn McDonald
CEO / Owner
The Global Toybox

Contact Us...

Email:
info@binarym.com
Phone:
619-928-2221
Fax:
619-462-4883