Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

How can I get a Previous / Next navigation that only navigates the child pages of the current page?

By that i mean url.com/page/child1, url.com/page/child2 and so on..

I've been searching around alot but I'm still lost.

It seems like you can't do that according to wordpress (they recommend plugins..)

share|improve this question
add comment

6 Answers 6

Great hack, it did what I was looking for. I thaught some of you might be interrested in what I added, that is: alternative links

  • to the first child page when you are browsing the parent page
  • to the parent when you are browsing the first child page

the nav is not displayed when not necessary, the styling fits the one the twenty-thirteen theme applies to post navigation.

<?php // display nav only if there are child pages
if ($post->post_parent) { // applies only to child pages 
$pagelist = get_pages("child_of=".$post->post_parent."&parent=".$post->post_parent."&sort_column=menu_order&sort_order=asc");
$pages = array();
foreach ($pagelist as $page) {
$pages[] += $page->ID;
}
$current = array_search($post->ID, $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
?>

<nav class="navigation post-navigation" role="navigation">
<div class="nav-links">
    <?php if (!empty($prevID)) { /* if we are browsing first child, then link to parent page*/ ?>
        <a rel="prev" href="<?php echo get_permalink($prevID); ?>" title="<?php echo get_the_title($prevID); ?>"><span class="meta-nav">&larr;</span> <?php echo get_the_title($prevID); ?></a>
    <?php }
    else { // else, link to previous child ?>
        <a rel="prev" href="<?php echo get_permalink($post->post_parent); ?>"><span class="meta-nav">&larr;</span> <?php echo get_the_title($post->post_parent); ?></a>
    <?php }

    if (!empty($nextID)) { ?>
    <a rel="next" href="<?php echo get_permalink($nextID); ?>" title="<?php echo get_the_title($nextID); ?>"><?php echo get_the_title($nextID); ?> <span class="meta-nav">&rarr;</span></a>
    <?php } ?>
</div>
</nav>                      
                    <?php }
                    else { // if we are browsing parent page, then link to first child
$child_pages = get_pages("child_of=".$post->ID."&parent=".$post->ID."&sort_column=menu_order&sort_order=asc");
$first_child = $child_pages[0]; ?>
<?php if (!empty($first_child)) { ?>
<nav class="navigation post-navigation" role="navigation">
<div class="nav-links">
    <a rel="next" href="<?php echo get_permalink($first_child->ID); ?>"><?php echo get_the_title($first_child->ID); ?> <span class="meta-nav">&rarr;</span></a>

</div>

share|improve this answer
add comment

You could use find the parent page of the current post using post->parent_page, then plug that into get_page_children,obtaining all siblings of the parent page, and then find the next and previous elements in the array that is returned.

share|improve this answer
add comment

If you're open to going the plugin route, which I personally am for this kind of thing, the plugin Ambrosite Next/Previous Page Link Plus is pretty awesome. It supports the functionality that you're looking for, plus a lot more.

share|improve this answer
add comment

Untested, but this should work:

First use get_pages to find all other pages (or CPT) with the same parent as the current page. Then find the 'previous' and 'next' pages.

function wpse5422_the_page_siblings(){
    $post_id = get_the_ID();
    $parent_id = wp_get_post_parent_id( $post_ID );
    $post_type = get_post_type($post_id);

    $sibling_list = get_pages(array(
         'sort_column'=>'menu_order',
         'sort_order' =>'asc',
         'child_of' =>$parent_id,
         'post_type'=> $post_type
    ))
    if( !$sibling_list || is_wp_error($sibling_list) )
        return false;

    $pages = array();
    foreach ($sibling_list as $sibling ) {
         $pages[] = $sibling->ID;
     }

    $current = array_search($post_id, $pages);
    $prevID = isset($pages[$current-1]) ? $pages[$current-1] : false;
    $nextID = isset($pages[$current+1]) ? $pages[$current+1] : false;

    echo wpse5422_display_prev_next($prevID, $nextID);
 }

The above function must be used inside the loop - it takes the current page (or any hierarchical post type) and finds the previous and next sibling page (i.e. of same parent as current page) according to their menu order (this can be changed to date, or title).

It then uses the following function which takes two IDs as an argument and is simply responsible for producing the output:

 function wpse5422_display_prev_next($prevID=false, $nextID=false){
    if( empty($prevID) && empty($nextID) )
       return false;

    $html = '<div class="navigation">';

    if( !empty($prevID) ){
         $html .= '<div class="alignleft">';
         $html .= '<a href="'.get_permalink($prevID).'">Previous</a>';
         $html .= '</div>';
     }

    if( !empty($nextID) ){
         $html .= '<div class="alignright">';
         $html .= '<a href="'.get_permalink($nextID).'">Next</a>';
         $html .= '</div>';
     }

    $html .= '</div><!-- .navigation -->';

    return $html;
}

Where to put this code

Ideally you should create a plug-in out of it. It will work in functions.php - but really, it shouldn't be living there.

Usage

Inside the Loop, whether you want to display the page links: wpse5422_the_page_siblings();.

share|improve this answer
add comment
up vote 0 down vote accepted

All right, here it is, fully working:

<?php
$pagelist = get_pages("child_of=".$post->post_parent."&parent=".$post->post_parent."&sort_column=menu_order&sort_order=asc");
$pages = array();
foreach ($pagelist as $page) {
   $pages[] += $page->ID;
}

$current = array_search($post->ID, $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
?>

<div class="navigation">
<?php if (!empty($prevID)) { ?>
<div class="previous">
<a href="<?php echo get_permalink($prevID); ?>" title="<?php echo get_the_title($prevID); ?>">Previous</a>

</div>
<?php }
if (!empty($nextID)) { ?>
<div class="Next">
<a href="<?php echo get_permalink($nextID); ?>" title="<?php echo get_the_title($nextID); ?>">Next</a>
</div>
<?php } ?>
</div>

One little cosmetic thing needs to get fixed, and that is that the "Previous" and "Next" links always should be shown, whether or not there are any more pages...

share|improve this answer
add comment

To show next and previous links independent of whether or not any more pages are present you need to add some conditional statements: (edited the pointless elseif stuff)

<div class="navigation">
<?php if (!empty($prevID)) : ?>
<div class="previous">
<a href="<?php echo get_permalink($prevID); ?>" 
title="<?php echo get_the_title($prevID); ?>">Previous</a>
</div>
<?php else : ?>
<div class="previous disabled">
<a href="#">Previous</a>
</div>
<?php endif; ?>
<?php if (!empty($nextID)) : ?>
<div class="next">
<a href="<?php echo get_permalink($nextID); ?>" 
title="<?php echo get_the_title($nextID); ?>">Next</a>
</div>
<?php else : ?>
<div class="next disabled">
<a href="#">Next</a>
</div>
<?php endif; ?>
</div>
share|improve this answer
    
Why the empty else? Why elseif at all, if the second condition is the exact opposite of the first? Simple if / else constructs would do here. –  Johannes Pille May 24 '13 at 12:12
    
I agree- sorry about that- I was working it out as I went myself and only really came here for the previous answer on this page. I've taken your advice- thanks. –  Chris May 28 '13 at 8:42
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.