Ask your WordPress questions! Pay money and get answers fast! (more info)

Next/Previous Page Links

  • SOLVED

Hi There,

I am looking to add a 'Next Page' and 'Previous Page' link to a particular page template on my site. The next button should go to the next page within that section, and the previous button should go to the previous page within that section.

Here is what the pages look like in the navigation structure:

- Meet our leadership
-- employee 1
-- employee 2
-- employee 3
-- employee 4
-- employee 5

I would like the links to only link between the employees. (so when you are on employee 1 there should be no previous link, and the next link would point to employee 2)

I greatly appreciate your help.

Answers (6)

2010-07-14

wjm answers:

This is the "official" way, the way Wordpress creates the <link rel='prev' ..> and <link rel='next' ..> in the head of your page.

Place this at the bottom of your content div.


<?php
//PREV AND NEXT PAGES
global $post;
$prev = get_adjacent_post( false, false, true );
$next = get_adjacent_post( false, false, false );

echo '<p style="text-align:center; ">';
if ( !empty($prev) && $prev->ID != $post->post_parent )
echo '<a href="'.get_permalink($prev->ID).'" title="'. esc_attr($prev->post_title).'">&laquo; '.$prev->post_title.'</a> &nbsp; &nbsp;';

if ( !empty($next) && $next->ID != $post->post_parent )
echo ' &nbsp; &nbsp; <a href="'.get_permalink($next->ID).'" title="'. esc_attr($next->post_title).'">'.$next->post_title.' &raquo;</a>';

echo '</p>';
?>


Attached is the page.php of the default theme (twenty ten) with the applied changes.
The page is succesfully validated as HTML5.

Hope it helps.


WP Answers comments:

Thank you for this. This method works, but I run into the same issue as I've outlined up above. (the 1st item links to the 1st item in another section on the site). Please read the explanation and check out the staging link above.


wjm comments:

Got it, you are right.
This solves that issue


<?php
//PREV AND NEXT PAGES
global $post;
$prev = get_adjacent_post( false, false, true );
$next = get_adjacent_post( false, false, false );

echo '<p style="text-align:center; ">';
if ( !empty($prev) && $prev->ID != $post->post_parent && $prev->post_parent == $post->post_parent )
echo '<a href="'.get_permalink($prev->ID).'" title="'. esc_attr($prev->post_title).'">&laquo; '.$prev->post_title.'</a> &nbsp; &nbsp;';

if ( !empty($next) && $next->ID != $post->post_parent && $next->post_parent == $post->post_parent )
echo ' &nbsp; &nbsp; <a href="'.get_permalink($next->ID).'" title="'. esc_attr($next->post_title).'">'.$next->post_title.' &raquo;</a>';

echo '</p>';
?>


I have recreated the situation you mentioned and it works now.

2010-07-14

Jared Williams answers:

$wp_query->get_posts();
if (have_posts()) : while (have_posts()) : the_post(); ?>

// the content

endwhile;

next_posts_link('« Previous Post' );
previous_posts_link('Next Post »' );


endif;


WP Answers comments:

Thank you for this but this doesn't appear to work. Nothing shows up. Does this only work with posts? I am working with pages.

2010-07-14

Pippin Williamson answers:

This was posted by Darrin a few days back to a similar problem.

Put this in your functions.php.



<?php

// function to find location within array

function relative_value_array($array, $current_val = '', $offset = 1) {

$values = array_values($array);

$current_val_index = array_search($current_val, $values);



if( isset($values[$current_val_index + $offset]) ) {

return $values[$current_val_index + $offset];

}

return false;

};



// previous page link function

function dbdb_prev_page_link() {

global $post;



if ( isset($post->post_parent) && $post->post_parent > 0 ) {

$children = get_pages('&sort_column=post_date&sort_order=asc&child_of='.$post->post_parent.'&parent='.$post->post_parent);

};



// throw the children ids into an array

foreach( $children as $child ) { $child_id_array[] = $child->ID; }



$prev_page_id = relative_value_array($child_id_array, $post->ID, -1);



$output = '';

if( '' != $prev_page_id ) {

$output .= '<a href="' . get_page_link($prev_page_id) . '"> &laquo; '. get_the_title($prev_page_id) . '</a>';

}

return $output;

};



//next page link function

function dbdb_next_page_link() {

global $post;



if ( isset($post->post_parent) && $post->post_parent > 0 ) {

$children = get_pages('&sort_column=post_date&sort_order=asc&child_of='.$post->post_parent.'&parent='.$post->post_parent);

};



// throw the children ids into an array

foreach( $children as $child ) { $child_id_array[] = $child->ID; }



$next_page_id = relative_value_array($child_id_array, $post->ID, 1);



$output = '';

if( '' != $next_page_id ) {

$output .= '<a href="' . get_page_link($next_page_id) . '">'. get_the_title($next_page_id) . ' &raquo;</a>';

}

return $output;

};

?>


Then use this at the bottom of your page.php, or which ever template file you're using.


<div class="navigation">

<div class="alignleft"><?php echo dbdb_prev_page_link() ?></div>
<div class="alignright"><?php echo dbdb_next_page_link() ?></div>

</div>


I know it's already been answered, but I've edited my answer above so that it works correctly.


WP Answers comments:

Thank you very much for this. This is working well, but has one minor flaw.

When I am on 'employee 1' it is displaying a previous link which links to the first item of the next section of the site.

Here is a link to the staging site so you can check it out (click on Michelle and you will see what I mean):

http://67.20.108.233/wordpress/about/meet-our-leadership

I appreciate any assistance on this.


WP Answers comments:

I forgot to add that (if possible) I would like the 1st item to have no previous link and I would like the last item to have no next link.

2010-07-14

Nile Flores answers:

The answer before this... would probably work. I also recall a similar question asked a few days ago.

About Employee listings, I am currently working with a plugin called Connections for a client, might be something you might want to look into for a better way to organize employees.

http://wordpress.org/extend/plugins/connections/

2010-07-14

Oleg Butuzov answers:

Well, isn't better to use new custom type?

--- however here is a solution. its bit tricky and complicated but it tested and it works.

filters that you shoudl put into functions.php

add_action('init', 'init_post_prev_next_navigation');
function init_post_prev_next_navigation(){
add_filter('query', 'only_chields_in_nav_links');
}

function only_chields_in_nav_links($sql){
global $wpdb;


if (count($wpdb->last_result) == 1 && isset($wpdb->last_result[0]->post_type)
&& $wpdb->last_result[0]->post_type == 'page' && strpos($sql, 'p.post_date') !== false
){
$sql = str_replace("WHERE", "WHERE p.post_parent = {$wpdb->last_result[0]->ID} AND", $sql);

}


return $sql;
}



actual html + php code... (base i get from twentyten theme)

<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
<?php remove_filter('query', 'only_chields_in_nav_links'); ?>



Oleg Butuzov comments:

btw, in twentyten (if you use it as base theme ) plese don't use <div id="nav-above" class="navigation"> to wrap the navigation blocks - its hidden by css for pages

2010-07-14

Mark F. answers:

Hey,

This problem was kind of just solved (for me).
http://wpquestions.com/question/show/id/599

Someone above has already posted the code I believe. The key thing is that it will navigate only the child pages, however it if you have more than just the team as child pages it will (at least from my understanding) link to them.

I hope that helps.

Thanks,
MDF