How to Display an Author List with Avatars in WordPress: Redux

WordPress has a built in function to display a list of all of your site’s authors. But there is no option to display their avatars, so all you really get is a text list that links to the author’s page, if you have an author.php file in your theme, that is. I needed to also display the authors’ avatars for a client so I came up with a little piece of code that seems to do the trick.

NOTE: The old piece of code only worked if you were using pretty permalinks, and it was a little clunky.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function contributors() {
global $wpdb;
 
$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name");
 
foreach($authors as $author) {
echo "<li>";
echo "<a href=\"".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "\">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href=\"".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "\">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "</div>";
echo "</li>";
}
}

I also had to add some CSS to my style.css file to make it look the way I wanted.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#authorlist li {
	clear: left;
	float: left;
	margin: 0 0 5px 0;
	}	
 
#authorlist img.photo {
	width: 40px;
	height: 40px;
	float: left;
	}
 
#authorlist div.authname {
	margin: 20px 0 0 10px;
	float: left;
	}

NOTE: If you are using the User Photo plugin you can replace echo get_avatar($author->ID); with echo userphoto($author->ID);