Ever wanted to add a next and previous author button at the bottom of your WordPress author pages. Look no further! I knocked this code up a few days ago and thought I would share should anyone else need this functionality.

How the fnished code will look

The code below will get a list of all users, work out which author page is being viewed and note the previous and next authors alphabetically. It will then display a link to each author page with the relevant gravatar.

The PHP

<?php
global $wpdb;

if(isset($_GET['author_name'])) :
$curauth = get_userdatabylogin($author_name);
else :
$curauth = get_userdata(intval($author));
endif;

$users = $wpdb->get_col("SELECT * FROM $wpdb->users ORDER BY display_name");
$i = 0;
foreach($users as $user) {
$user = get_userdata($user);
if ($user->first_name . ' ' . $user->last_name == $curauth->first_name . ' ' . $curauth->last_name) {

$curauthornum = $i;
$prevauthorid = ($i-1);
$nextauthorid = ($i+1);

if (get_userdata($users[$prevauthorid])) {$prevauthor = get_userdata($users[$prevauthorid]);}
if (get_userdata($users[$nextauthorid])) {$nextauthor = get_userdata($users[$nextauthorid]);}
}
$i++;
}

if (isset ($prevauthor)) {
echo "<div class="left prevauthor" ><a href="".get_author_posts_url($prevauthor->ID).""><strong>Previous Author</strong>";
echo get_avatar( $prevauthor->user_email, $size = '50', $default = '<path_to_url>' );
echo "<br/>".$prevauthor->first_name." ".$prevauthor->last_name."</a></div>";
}

if (isset ($nextauthor)) {
echo "<div class="right nextauthor"><a href="".get_author_posts_url($nextauthor->ID).""><strong>Next Author</strong>";
echo get_avatar( $nextauthor->user_email, $size = '50', $default = '<path_to_url>' );
echo "<br/>".$nextauthor->first_name." ".$nextauthor->last_name."</a></div>";
}

echo "<div class="clear"></div>";
?>

This code needs to be put in the author.php file above or below your loop.

The CSS

/* PREVIOUS AND NEXT AUTHOR BUTTONS */
.prevauthor, .nextauthor {
width:150px;
text-align:center;
margin:4px 0 12px 0;
font-size:12px;
}
.prevauthor a, .nextauthor a {
display:block;
}
.prevauthor a strong, .nextauthor a strong {
margin-bottom:5px;
display:block;
font-weight:normal !important
}
.prevauthor a:hover, .nextauthor a:hover {
text-decoration:none !important;
}
.prevauthor avatar-50, .nextauthor avatar-50 {
margin-bottom:2px;
display:block;
}
.clear {
clear:both;
}

This code needs to be placed inside your themes style.css file.

Any questions or comments, please write a comment below. Happy coding!