Browsing page siblings through next/previous links

Question

I'm using WordPress as CMS for a site I'm developing. When I'm browsing posts, I can use Next/Previous links to walk between posts. I want to have the same thing on pages.

• Page A
• Page B
• Page C

Page A should link to next sibling Page B. Page B should link to previous sibling Page A and next sibling Page C. Page C should link to previous sibling Page B.

Is there any plugin you can recommend that generates these links? I know there are some plugins that do this, but I specifically want one that hooks into my current theme automatically. I know how to edit the theme, but that would brick my site whenever a theme update is available.

I'm using the LightWord WordPress theme.

Answer 1

from the wordpress Codex

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

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

<div class="navigation">
<?php if (!empty($prevID)) { ?>
<div class="alignleft">
<a href="<?php echo get_permalink($prevID); ?>"
title="<?php echo get_the_title($prevID); ?>">Previous</a>
</div>
<?php }
if (!empty($nextID)) { ?>
<div class="alignright">
<a href="<?php echo get_permalink($nextID); ?>" 
 title="<?php echo get_the_title($nextID); ?>">Next</a>
 </div>
 <?php } ?>
</div><!-- .navigation -->

Answer 2

Pop the following code into your functions.php file in your active theme directory:

function siblings($link) {
    global $post;
    $siblings = get_pages('child_of='.$post->post_parent.'&parent='.$post->post_parent);
    foreach ($siblings as $key=>$sibling){
        if ($post->ID == $sibling->ID){
            $ID = $key;
        }
    }
    $closest = array('before'=>get_permalink($siblings[$ID-1]->ID),'after'=>get_permalink($siblings[$ID+1]->ID));

    if ($link == 'before' || $link == 'after') { echo $closest[$link]; } else { return $closest; }
}

To call the function:

<?php siblings('before'); ?>

or

<?php siblings('after'); ?>

and it will echo out the link to the previous or next page.

If you want both you can leave the function empty and it will return an array with both links.

Answer 3

Here another function based on jackreichert's answer. With the added functionality that this wraps around to the last/first sibling when you are at the end of the list of siblings, so you can loop around endlessly. It also uses the menu order.

function get_sibling_link($link) {
    global $post;

    $siblings = get_pages('sort_column=menu_order&child_of='.$post->post_parent.'&parent='.$post->post_parent);

    foreach ($siblings as $key => $sibling){
        if ($post->ID == $sibling->ID){
            $current_id = $key;
        }
    }

    $closest = [ 
        'before' => get_permalink( $siblings[$current_id-1]->ID ),
        'after'  => get_permalink( $siblings[$current_id+1]->ID )
    ];

    if($siblings[$current_id-1]->ID == '' ){
        $closest['before'] = get_permalink( $siblings[count($siblings)-1]->ID );
    }

    if($siblings[$current_id+1]->ID == '' ){
        $closest['after'] = get_permalink( $siblings[0]->ID );
    }

    if ($link == 'before' || $link == 'after') { 
        echo $closest[$link]; 
    } else { 
        return $closest; 
    }
}

Answer 4

After trying several solutions, doing my best not to install another plugin, in the end the only thing that worked was a free plugin: Next Page, Not Next Post.

(I had issues with the solutions given here, I think perhaps because I manually order the pages in the Pages section of Wordpress Admin. You can select page order manually. So my first page in the hierarchy might have an ID of 100, and the second page might have an ID of 10. The page ID is not how my pages get ordered.)

Answer 5

A rough snippet of what I developed onwards from the answers here (to get a real link and the post title in action) - might prove helpful to someone!

$closest = array('before'=>get_permalink($siblings[$ID-1]->ID),'after'=>get_permalink($siblings[$ID+1]->ID));
$name =  array('before'=>get_the_title($siblings[$ID-1]->ID),'after'=>get_the_title($siblings[$ID+1]->ID));

if ($link == 'before' || $link == 'after') { 
echo '<a href="' . $closest[$link] . '">';
echo '<span>' . $name[$link] . '</span></a>';
}
else { return $closest; }

Answer 6

 function siblings()
    {
        global $post;
        $args = array(
                        'sort_order'    => 'ASC',
                        'sort_column'   => 'menu_order',
                        'hierarchical'  => 1,
                        'child_of'      => $post->post_parent,
                        'parent'        => $post->post_parent,
                        'exclude_tree'  => '',
                        'offset'        => -1,
                        'post_type'     => 'page',
                        'post_status'   => 'publish'
            );
        $siblings = get_pages($args);

        foreach ($siblings as $key=>$sibling)
        {
            if ($post->ID == $sibling->ID)
            {
                $ID = $key;
            }
        }
        $closest = array(
                            'back'  => array('perm_link' => get_permalink(isset($siblings[$ID -1]->ID) ?  $siblings[$ID -1]->ID : $siblings[$ID]->ID), 'title' => get_the_title(isset($siblings[$ID -1]->ID) ?  $siblings[$ID -1]->ID : $siblings[$ID]->ID)),
                            'next'  => array('perm_link' => get_permalink(isset($siblings[$ID +1]->ID) ?  $siblings[$ID +1]->ID : $siblings[$ID]->ID) , 'title' => get_the_title(isset($siblings[$ID +1]->ID) ?  $siblings[$ID +1]->ID : $siblings[$ID]->ID))
                        );

        return $closest;

    }

and then use as this:

    <?php
$newrenderViews = new renderViews() ;
$back_next      = $newrenderViews->siblings();
$next           = $back_next['next'] ;
$next_title     = $next['title'] ;
$next_link      = $next['perm_link'] ;
$back           = $back_next['back'] ;
$back_title     = $back['title'] ;
$back_link      = $back['perm_link'] ;
?>

<div  class="section" >
    <div class="content_wrapper " style="background-color: #8A8C8F; width: 970px;">
    <p class="navbar-text pull-right">
        <a href="<? echo $next_link; ?>" class="navbar-link" style="color: #ffffff;">Next - <?php echo $next_title ;  ?></a>
    </p>
    <p class="navbar-text pull-left">
        <a href="<? echo $back_link; ?>" class="navbar-link" style="color: #ffffff;margin-left: 340px;">Go back - <?php  echo $back_title ;   ?></a>
    </p>
</div>
</div>