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..)
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
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); ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="<?php echo get_the_title($prevID); ?>">Previous</a>
</div>
<?php }
if (!empty($nextID)) { ?>
<div class="Next">
<a href="<?php echo get_permalink($nextID); ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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…
Method 2
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); ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="<?php echo get_the_title($prevID); ?>"><span class="meta-nav">←</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); ?>" rel="nofollow noreferrer noopener"><span class="meta-nav">←</span> <?php echo get_the_title($post->post_parent); ?></a>
<?php }
if (!empty($nextID)) { ?>
<a rel="next" href="<?php echo get_permalink($nextID); ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="<?php echo get_the_title($nextID); ?>"><?php echo get_the_title($nextID); ?> <span class="meta-nav">→</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); ?>" rel="nofollow noreferrer noopener"><?php echo get_the_title($first_child->ID); ?> <span class="meta-nav">→</span></a>
</div>
Method 3
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.
Method 4
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.
Method 5
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); ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="<?php echo get_the_title($prevID); ?>">Previous</a> </div> <?php else : ?> <div class="previous disabled"> <a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Previous</a> </div> <?php endif; ?> <?php if (!empty($nextID)) : ?> <div class="next"> <a href="<?php echo get_permalink($nextID); ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="<?php echo get_the_title($nextID); ?>">Next</a> </div> <?php else : ?> <div class="next disabled"> <a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Next</a> </div> <?php endif; ?> </div>
Method 6
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).'" rel="nofollow noreferrer noopener">Previous</a>';
$html .= '</div>';
}
if( !empty($nextID) ){
$html .= '<div class="alignright">';
$html .= '<a href="'.get_permalink($nextID).'" rel="nofollow noreferrer noopener">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();.
Method 7
The ‘wpse5422_the_page_siblings()‘ solution works great, I cannot comment as my rep is too low, but my only change is to make this line:
'sort_column'=>'menu_order',
To be this:
'sort_column'=>'menu_order title',
This way if the user leaves the sort order of every page as 0, it will default to sorting alphabetical by page title.
Thanks!
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0