$8
Next/Previous Page Links

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.

WP Answers | 07/14/10 at 8:13pm | Edit

page links, wordpress

(6) Possible Answers Submitted...

Last edited:
07/14/10
8:26pm
Jared Williams says:
$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;
- 07/14/10 9:06pm
  
  WP Answers says:
  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.

Last edited:
07/14/10
9:31pm

Pippin Williamson says:

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.

Previous versions of this answer: 07/14/10 at 9:31pm

07/14/10 9:01pm

WP Answers says:
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.
07/14/10 9:05pm

WP Answers says:
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.

Last edited:
07/14/10
8:50pm
Nile Flores says:
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/

Last edited:
07/14/10
9:25pm

wjm says:

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.

07/14/10 9:04pm

WP Answers says:
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.

07/14/10 9:13pm

wjm says:

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.

Last edited:
07/14/10
9:13pm

Oleg Butuzov says:

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'); ?>

Previous versions of this answer: 07/14/10 at 9:13pm

07/14/10 9:15pm

Oleg Butuzov says:
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

Last edited:
07/14/10
9:14pm
Mark F. says:
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