Aug
17
2009

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

by   |  Posted in Tutorials  |  45 comments
This code is no longer up-to-date. Please check out “An Even Better Author List in WordPress” for a better approach.

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

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
If you liked this, please share it.

Tags: , , ,

Short URL: http://bit.ly/dfa5mH

Discussion 45 Comments

Newer Comments →
  1. DarioDN on March 24, 2009 at 2:30 pm

    Sorry. I tried but it doesn’t works… the list is ok but no avatar appears!
    I’m using userphoto

    • DarioDN on March 24, 2009 at 2:36 pm

      the output is only

      User
      USer
      USer

    • c.bavota on March 25, 2009 at 12:07 am

      Did you change the code so that it has userphoto($id); instead of get_avatar($id);? You might also need to make sure that you have avatars turned on under you admin panel in Settings => Discussions.

    • Claude on April 29, 2009 at 2:43 am

      Hi!

      i seem to have the same problem, i get just a list when i have userphoto($id); in the code. with get_avatar($id); it shows the avatar‚Ķany idea what i’m doing wrong? Avatars are turned on‚Ķ
      cheers!

    • Claude on May 5, 2009 at 4:45 am

      thanks for sharing your code!
      i’m using it and it’s working with get_avatar($id); but when i insert userphoto($id); i only get a list of the users but no pics. user-photo is installed and working‚Ķ
      do you have any idea what i can do to solve this?

  2. benbca on April 1, 2009 at 4:46 pm

    What if you don’t have ‘authors.php’. Can it manually be added to magazines (2.3.3)?

    • c.bavota on April 2, 2009 at 12:17 am

      Yup. There is some info on how to make an author.php page at WordPress.org.

  3. kgagne on April 16, 2009 at 12:10 am

    Can you link us to a page that demonstrates this code’s output? I recently wrote my own code to do something similar, as seen at the link in this comment’s byline; I’d like to see how they compare.

  4. david on May 3, 2009 at 9:29 pm

    Thank you for posting this but I’m having trouble getting user_photo to display. I swapped out the get_avatar text with userphoto. Userphoto is working on the individual author pages and on the posts themselves but not working when trying to list all authors. I’m not sure what I’m doing wrong.

  5. Ivo Vegter on June 9, 2009 at 8:36 pm

    Thank you for this code.
    It worked fine on the normal website, when permalinks are on the images will not load. Do you have a solution for this?

  6. Rebecca on June 10, 2009 at 3:47 am

    amazing!! thank you! Only question – how do I add the bio / description as well?

  7. Paul Bearne on June 12, 2009 at 5:30 am

    Check out this plugin http://wordpress.org/extend/plugins/author-avatars/

  8. Jenyum on July 3, 2009 at 1:03 am

    I tried this on my blog, but I get the same avatar for all users. Any idea what could be causing that?

  9. Sacit on July 10, 2009 at 12:17 pm

    Thank you for this code.

    In addition to this code, I click on the author would like to list in the title. list, the title belongs to the author, the date of writing articles for the category. Would this help with

  10. Andrew Kirksey on July 24, 2009 at 12:17 am

    Is there anyway to incorporate a command to display the author’s description as well?

    • c.bavota on July 27, 2009 at 7:58 am

      Sure. Add the_author_meta() function.

    • pepe on July 30, 2009 at 5:00 pm

      hey, thanks… I was just wasting hours trying to find this exact thing!

  11. Jonas on August 11, 2009 at 4:00 am

    Is there anyway to get the latest post under the name aswell?
    Would be much apriciated…Thx in advance

  12. Jonathan on August 17, 2009 at 3:23 pm

    The function works perfectly; thank you very much! Is there a way to make it skip listing admin?

    • c.bavota on August 17, 2009 at 5:55 pm

      Just replace line #4 of the first part with:

      $authors = $wpdb->get&#95;results("SELECT ID, user&#95;nicename from $wpdb->users WHERE display&#95;name <> 'admin' ORDER BY display&#95;name");
    • fatihturan on May 14, 2010 at 6:54 am

      Hi,

      Can i exclude multiple users from author list?

      By the way thank you for this useful information.

  13. Mr. Quoter on August 18, 2009 at 10:10 pm

    I will tested on my blog, thanks for sharing this code

  14. neel on October 16, 2009 at 4:30 am

    Hi this is what i want. but i want to create a slider and display all the authors on a wordpress blog with image and short description. what should i have to display small description and author image.

    • c.bavota on October 21, 2009 at 11:55 am

      Use the following to display the description:

      the_author_meta('description', $author->ID);

      Add it to the above wherever you would like it to appear. Surround it with a div to style it.

  15. A.R Zico on October 30, 2009 at 3:42 pm

    Works great. Is there any way to sort author list by most number of post?

    • c.bavota on November 4, 2009 at 1:38 pm

      There is probably a way to do this but not with the above code. The users database doesn’t contain any post info so you would have to grab the user ID and then match it up against the posts database table.

      Check out http://codex.wordpress.org/Function_Reference/wpdb_Class for more info.

    • Jared Alessandroni on July 29, 2010 at 5:50 am

      Gah! I needed THIS post so badly, so I feel remiss not trying to be helpful here – sorry to bogart the thread, though. Below, I check if they’re over 20 posts…

      $authors = $wpdb-&gt;get_results("SELECT ID, user_nicename from $wpdb-&gt;users ORDER BY display_name");
 
foreach($authors as $author) {
	if (count_user_posts( $author-&gt;ID ) &gt; 20) {
 
echo "";
echo "<a>ID;
echo "\"&gt;";
echo get_avatar($author-&gt;ID);
echo "</a>";
echo '';
echo "<a>ID;
echo "\"&gt;";
the_author_meta('display_name', $author-&gt;ID);
echo "</a>";
echo "";
echo "";
 
	}
}
  16. daniel k on December 9, 2009 at 4:37 am

    hello, thanks for the tip! But im having problems uploading the image in User Photo Plugin. When i upload it doesn´t show any image. Do you know what it could be?

  17. zulsdesign on December 22, 2009 at 5:29 am

    how to change w&h grafatar images?

  18. Ryan on April 21, 2010 at 5:45 am

    Great tute, thanks, it works a treat!.

    Now, here’s the good part, why not extend this even further, theres a great tute at:
    http://wpengineer.com/extend-user-contactinfo-wordpress-29/

    which allows you to extend the user contact info, so, you can add any, and show any fields you want now.

    here’s my example:

    // http://wpengineer.com/extend-user-contactinfo-wordpress-29/
function my_new_contactmethods( $contactmethods ) {
  //add Address
  $contactmethods['address'] = 'Address';
  //add City
  $contactmethods['city'] = 'City';
  //add State
  $contactmethods['state'] = 'State';
//add Postcode
  $contactmethods['postcode'] = 'Postcode';
  // Add Twitter
  $contactmethods['twitter'] = 'Twitter';
  //add Facebook
  $contactmethods['facebook'] = 'Facebook';
 //add Phone
  $contactmethods['phone'] = 'Phone';
  //add Fax
  $contactmethods['fax'] = 'Fax';
 
  return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

    Note how I didn’t want to show my root admin user (ID 1), And I call it like:

    //http://bavotasan.com/tutorials/how-to-display-an-author-list-with-avatars-in-wordpress/
function contributors() {
global $wpdb;
$authors = $wpdb-&gt;get_results("SELECT ID, user_nicename from $wpdb-&gt;users WHERE ID != '1' ORDER BY display_name");
 
foreach($authors as $author) {
echo "";
echo "<a>ID;
echo "\"&gt;";
echo get_avatar($author-&gt;ID);
echo "</a>";
echo '';
echo "<a>ID;
echo "\"&gt;";
the_author_meta('display_name', $author-&gt;ID);
echo "</a> - <strong>";
the_author_meta('city', $author-&gt;ID);
echo ",";
the_author_meta('state', $author-&gt;ID);
echo "</strong>";
the_author_meta('phone', $author-&gt;ID);
//the_author_meta('description', $author-&gt;ID);
//echo "";
//the_author_meta('user_url', $author-&gt;ID);
 
echo "";
echo "";
}
}

    I also wanted this to appear just on my contacts page, so, in the sidebar, i added my code like this:

    post_parent == '20' ) { 
echo "Contacts";
echo "";
  if (function_exists('contributors')) contributors();
echo "";
} else {}
?&gt;

    Thanks again, you’ve helped cut out a tonne of unessecary plugins!

  19. tann on June 19, 2010 at 11:29 pm

    Thanks man. Awesome job.
    I got one more question. How do i implement it to pick a random author per day or week. and how can i limit the number of authors to display.

    Thanks in advance.

    viva bavotasan.

    • Brad Mahaffey on June 25, 2010 at 2:47 pm

      I have the same question, how would I go about limiting the amount of authors displayed? Also can I make the authors displayed random so they are different everytime the page is loaded?

    • Jared Alessandroni on July 29, 2010 at 5:46 am

      Since I’m here: This is just old-skool MySQL, so you can do that really easily. For example,

      Limit:

      $authors = $wpdb-&gt;get_results("SELECT ID, user_nicename from $wpdb-&gt;users limit 10");

      Random:

      $authors = $wpdb-&gt;get_results("SELECT ID, user_nicename from $wpdb-&gt;users order by rand()");
  20. Jared Alessandroni on July 29, 2010 at 5:42 am

    Thanks for the code. I don’t know if everyone knows, but you can also order by last name even though there is no last name field. Here, I remove an admin user (#2) and sort by last name (assumes single last name!)

    $authors = $wpdb-&gt;get_results("SELECT ID, user_nicename from $wpdb-&gt;users where ID !=2  ORDER BY SUBSTRING_INDEX(display_name, ' ', -1) ASC");
  21. Chad on October 12, 2010 at 5:53 pm

    Great stuff. It seems to be pulling Subscribers as well. Is there a way to restrict the query to only showing authors, contributors, editors, and admins?

    get_results("SELECT ID, user_nicename from $wpdb-&gt;users ORDER BY display_name");
    • Chad on October 12, 2010 at 6:58 pm

      BOOM! Got It!

      $authors = $wpdb-&gt;get_results("SELECT  ID, display_name FROM wp_users INNER JOIN wp_usermeta ON wp_users.ID  = wp_usermeta.user_id WHERE wp_usermeta.meta_key = 'wp_capabilities' AND (wp_usermeta.meta_value LIKE '%admin%' OR wp_usermeta.meta_value LIKE '%contributor%' OR wp_usermeta.meta_value LIKE '%editor%' OR wp_usermeta.meta_value LIKE '%author%' ) ORDER BY display_name");
    • c.bavota on October 13, 2010 at 12:10 pm

      Thanks for that.

  22. Chuck Reynolds on November 16, 2010 at 7:26 pm

    I had to exclude a few admins but still display the client admins on site so this is what I used to do that.

    $authors = $wpdb-&gt;get_results("SELECT ID, user_nicename from $wpdb-&gt;users where ID not in(94,6,7) ORDER BY SUBSTRING_INDEX(display_name, ' ', -1) ASC");

    As you can see, user ID’s 94, 6 and 7 are excluded from the list.

  23. hairudy on November 23, 2010 at 10:39 pm

    Hi,

    great tutorial, i like it… but i have few question.
    guys..please refer this site… http://www.mammothmen.com/ <– iam very sure this website have not using WP author display.

    my Q is… WP should be to produce as same the website (author display)? Because the display admin / editor is using two column …

    thanks.
    RUdy

  24. puanthanh on February 15, 2011 at 4:25 pm

    What about pagination? and pretty url for the author link?

  25. Fask on March 13, 2011 at 7:02 pm

    hello, thanks for the tutorial… it is possible to pagination custom page ? on my site all users can write articles and list of contributors is long. It’s possible set 10 users for page ? would be really great.

    (sorry for my english)

Newer Comments →