Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Display an Author List with Avatars in WordPress Contributors Page

Last updated on by
Elegant Themes
How to Display an Author List with Avatars in WordPress Contributors Page

While working on a client’s website, we realized that the built-in function for listing authors was not enough. We showed you how to display all authors from your site, but that method was only good if you want a simple list to display in your sidebar. If you want to create a more content-rich and useful contributors page, then that function is useless.

In this article we will show you how you can create a contributors page which will display a list of authors with avatars or userphoto and any other information that you like. This tutorial is an intermediate level tutorial.

First thing you need to do is create a custom page using this template.

Then you will need to open functions.php file in your themes folder and add the following code:

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>";
}
}

By adding this function you are telling WordPress to create a function that will display author’s name, and author’s avatar. You can change the avatar to userphoto plugin setting by simply changing the following line:

echo get_avatar($author->ID);

and replacing it with:

echo userphoto($author->ID);

You can add more features to this function such as displaying author URL and other information from the profile by following the structure used.

You would also need to add the following lines to your CSS file:

#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;
}

Once you are done adding the function, now you would need to call it in your page-template. Open the contributors.php file or whatever you name the file. Follow the same page template as your page.php and in the loop, just add this function instead of displaying the content:

<div id="authorlist"><ul><?php contributors(); ?></ul></div>

This will provide you with a more content-rich contributors page. This trick is excellent for Multi-Author blogs.

Now here is an example of how we used it:

Example of a Contributors Page with Author List and other Info

If you want to have a contributors page with information like displayed in the example above, you will need to make a few changes to the original function. We have an example code that will get you exactly everything displayed in the image above.

function contributors() {
global $wpdb;

$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users WHERE display_name <> 'admin' ORDER BY display_name");

foreach ($authors as $author ) {

echo "<li>";
echo "<a href=\"".get_bloginfo('url')."/author/";
the_author_meta('user_nicename', $author->ID);
echo "/\">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href=\"".get_bloginfo('url')."/author/";
the_author_meta('user_nicename', $author->ID);
echo "/\">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "<br />";
echo "Website: <a href=\"";
the_author_meta('user_url', $author->ID);
echo "/\" target='_blank'>";
the_author_meta('user_url', $author->ID);
echo "</a>";
echo "<br />";
echo "Twitter: <a href=\"http://twitter.com/";
the_author_meta('twitter', $author->ID);
echo "\" target='_blank'>";
the_author_meta('twitter', $author->ID);
echo "</a>";
echo "<br />";
echo "<a href=\"".get_bloginfo('url')."/author/";
the_author_meta('user_nicename', $author->ID);
echo "/\">Visit&nbsp;";
the_author_meta('display_name', $author->ID);
echo "'s Profile Page";
echo "</a>";
echo "</div>";
echo "</li>";
}
}

This code is utilizing User Photo plugin. The twitter field is being displayed using the trick we mentioned in the article How to Display Author’s Twitter and Facebook in the Profile page.

The CSS for example would look like:

#authorlist ul{
list-style: none;
width: 600px;
margin: 0;
padding: 0;
}
#authorlist li {
margin: 0 0 5px 0;
list-style: none;
height: 90px;
padding: 15px 0 15px 0;
border-bottom: 1px solid #ececec;
}

#authorlist img.photo {
width: 80px;
height: 80px;
float: left;
margin: 0 15px 0 0;
padding: 3px;
border: 1px solid #ececec;
}

#authorlist div.authname {
margin: 20px 0 0 10px;
}

You can display more information if you like by using the advanced code as your guide.

Source of this Function


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Ganesh Matkam says:

    Its wonderful! you have given me exactly what I need, Thank you!

  2. Bill Quick says:

    Thanks and see the WordPress plugin list-site-contributors plugin. Cheers.

  3. kate says:

    For some reason – even though this works well functionally – my CSS isn’t panning out. The text/links is directly below the avatars. Any thoughts why? Nothing I do will change it – I’ve tried doing it in Firebug to test out changes but the CSS won’t even show up.

    other than that, works great.

    • Editorial Staff says:

      Can’t say without really analyzing your CSS code. But again, the issue is not with the PHP code. Most likely in your CSS.

    • Inra Jaka says:

      Hi, I loved this tutorial. I had the same problem with Kate, the photo css does not apply (float to the left and sized) and I get this instead
      class=”wp-user-avatar wp-user-avatar-96 avatar avatar-96 photo” height=”96″ width=”96″
      I am not really sure where does that come from, possibly is there a way to clean css from the avatar and replace with your suggested css?

  4. Philip Isaacs says:

    Great tutorial. I was wondering if anyone has any examples of how to also utilize this with pagination. I sort of new to wordpress, and I’m still trying to understand how custom templates work.

    Thanks so much.

  5. Erika Lewis says:

    Is there a way to have the userphoto thumbnail pulled instead of the main photo?

  6. Surjith SM says:

    Hi, im doing it with your second script with twitter facebook and all. its work fine. But displaying all users. But i need to display only Administrators, Authors & contributors. with hide empty. How can i achieve that ?

  7. Karla Porter Archer says:

    ok – so I answered my child theme/main theme question on the other post, but I’m encountering another question regarding those pages when trying to do this part:

    “Once you are done adding the function, now you would need to call it in your page-template. Open the contributors.php file or whatever you name the file. Follow the same page template as your page.php and in the loop, just add this function instead of displaying the content”

    There is no page template in the page template file — (I’m using Genesis…)

    I’m not sure what to copy into my “contributors” page…

    • Editorial Staff says:

      First refer back to the other article where suggest that you add the page template in your child theme folder not your parent theme. We are not sure what you called the page template file, but whatever you called it, just paste the div php contributors(); text in that file.

      Page template is what you created using the other tutorial. By adding: /* Template Name: WPBeginnerT1 */ in a php file, you have created a new page template.

  8. arionarian says:

    thanks again for this useful tutorial :) , now i have a list of contributor on my wordpress theme :)

  9. someonegetsteve says:

    @KayeBarnes I use the get_user function instead that came in with WP 3.1 which has the role and include(or exclude) parameters to filter only a certain role and users by their IDs…example:

    function contributors() {

    global $wpdb;

    $blogusers = get_users(‘role=author&exclude=7,8,9′);

    foreach ($blogusers as $user) {

    echo “<li>”;

    echo $user->user_email ;

    echo $user->display_name;

    echo “<a href=”".get_bloginfo(‘url’).”/author/”;

    echo $user->user_nicename;

    echo “/”>”;

    echo get_avatar ($user->ID);echo “</a>”;

    echo “</li>”;

    }

    }

  10. markwinsf says:

    In case anyone can help and needs reference to how to add the custom fields to the code in this tutorial, I’ve been doing it like this…

    $order = get_cimyFieldValue($author->ID, ‘CHAIN_OF_COMMAND’);

    echo cimy_uef_sanitize_content($order);

  11. markwinsf says:

    This is almost totally awesome, but I’m trying to order the authors (who are architects in a typically hierarchical firm) by a custom field (created with the Cimy User Extra Fields plugin) that has a number in it. So instead of this…

    $authors = $wpdb->get_results(“SELECT ID, user_nicename from $wpdb->users WHERE display_name <> ‘admin’ ORDER BY ID”);

    … I’d like to sort by a pecking order field that runs from 1-10. Any ideas out there in wpbeginner land?

  12. KayeBarnes says:

    Is there a way to exclude users by either name (such as the originating admin user) and role (subscribers)?

  13. FabioFask says:
  14. FabioFask says:

    hello guys, there are still new to impaginations? I am willing to pay if you want ..

  15. Fask says:

    this is good news ….. I look forward to updating …. thank you

  16. Fask says:

    ok thanks anyway.

    • Editorial Staff says:

      You are welcome. Your suggestion is very good, and our developer liked the suggestion. According to him, we will be releasing a new tutorial soon that will do that :) (No time estimates though)

  17. Fask says:

    ok thanks for answer you have been very kind, you have a solution to the problem of 10 users per page?

    • Editorial Staff says:

      The code above was released on as is basis because it was something we did for our clients. We do not offer customizations as part of the tutorial.

  18. Fask says:

    but why my comments are never published?

  19. Fask says:

    hello running on the internet I found this snipped http://xrl.in/7g52 it might be a good solution. this should be called in the custom page like this:

    However, a page number is not set (Users per page) can you help? I’m sure it is useful to all. thanks

  20. Fask says:

    hello, thanks for the tutorial, I wanted to ask if you can enable custom paging in a custom page? virtually all users can write articles on my site and list of contributors is long. So I wanted to insert a function like wp-PageNavi ….. can you help me?

  21. Eric says:

    Silly question, but what URL does the contributors.php page show?

    • Editorial Staff says:

      You need to create a page called Contributors and then select the custom page template that you made using this article.

  22. Trisha says:

    Is there a way to order by last name instead of display name? I have the page working but it lists contributors in order of their first name, since I have the display name (for all) set to their first, then last names. But I’d prefer to sort the list by Last name instead.

    When I change the “orderby” parameter from display_name to last_name, I get nothing – the list is blank. It will only display the list when I order by display_name.

    Any suggestions would be greatly appreciated!

  23. puanthanh says:

    How to randomize it and limit the numbers to 6.

    I want to show it on my homepage as “Suggested people”

  24. Caleb J Ross says:

    I was not able to find a way to list only users with a specific role (authors and admins, in my case). Can anyone offer any additional help?

  25. Caleb J Ross says:

    Sorry, another question so soon. I tried to implement the above solutions for allowing the contributor page function to deny displaying certain levels (in my case, I want to keep subscribers from showing up). But I was not able to make this work. Does anyone have any other ideas?

    • Editorial Staff says:

      Yes, it is possible to do so. We were able to write a patch for one client which allowed us to show users only with posts. If you look at the function reference and see how the author.php core file is working, you should be able to figure it out.

      • Caleb J Ross says:

        Thanks. I’ve done a few hours of searching, but I can’t come up with the correct code. I’ve decided it might be easier to call based on # of posts (where having 0 posts will not display the author on the contributor page).

        Based on the snippet:

        $authors = $wpdb->get_results(“SELECT ID, user_nicename from $wpdb->users WHERE display_name ‘Admin’ ORDER BY display_name”);

        It seems I would want to replace the –display_name ‘Admin’– line with something that calls the post count. However, nothing I see to do works. Any thoughts?

        • Editorial Staff says:

          You would have to look in the post field to check how many does that author has. There is an example of that in author.php core file.

  26. Caleb J Ross says:

    This is a fantastic tutorial. This is the first time I’ve messed with the function.php file, and I feel confident to keep going with it.

    Is there a way to have the website, twitter, or facebook (or whatever else we choose to include) information no appear if that field in in the user’s profile page is not populated? Currently, the word “Twitter” will still appear on the webpage even if there is no Twitter url specified. Is there a way to change this?

    Thank you!

    • Editorial Staff says:

      Yes, you can run a if parameter and check to see if the field is populated or not.

  27. Jim C says:

    Hi there, nice post, thanks for sharing.

    Currently the functionality is set to show users alphabetically.

    What would need to be amended to show recent authors, ie: by activity, or last logged in. I have tried to look in the codex but cant find anything that specific.

    Many thanks,

    Jim

  28. Amber Weinberg says:

    How do you show contributor accounts only? I don’t want to show administrators or authors.

  29. Marc Tytus says:

    Whoa, awesome, thanks for this…

  30. Angel Del Rosario says:

    Hello, I thought the one that will appear is the author’s uploaded photo using the user-photo plugin but what is showing is their gravatar.

  31. Bert says:

    Love this tut. Exactly the type of function I am looking for.

    Quick question.

    Do you have an easy way to display the latest post authored by each author and have that be hyperlinked?

  32. James says:

    This is awesome! Thanks.

    How do you set a maximum number of authors to show? This site has 10+ writers but in a particular area we only want to show 6.

    Thanks in advance!

  33. Kevin Cooper says:

    How can I create this to add to the sidebar and have a function where the author with the most recent post appears on top and the title of their recent blog post? Thanks for the help

    • Editorial Staff says:

      You would call the function in your sidebar.php file. Change the order_by parameter to post count in descending order.

  34. Lindsey says:

    Hi, great tutorial! Thank you. I’m using this on one blog of a WPMU/BP installation so I can’t restrict the list by user role without getting other blog authors/admins listed. Is there a way to restrict by blog_ID? I’m searching around, but I’m not sure what to use.

    I thought it’d be something where the (“SELECT ID, user_nicename from $wpdb->users WHERE display_name ‘admin’ ORDER BY display_name”) should be changed to something like “WHERE blog_id = ’4′…” but that didn’t work. Any help would be appreciated! Thanks!

    • Lindsey says:

      Nevermind, found a solution with :

      $authors = $wpdb->get_results(“SELECT ID, user_nicename from $wpdb->users WHERE id IN (’3′,’5′,’6′) ORDER BY user_login”);

      If anyone has pointers for ordering the authors by last post date, that’s my ideal use.

  35. Charly says:

    I got it working!! Great code!
    But i cant filter the list by user role (admin, subscriptor, editor, etc..) and filter the amount of user displayed.

    Someone could? Any ideas?
    Thanks in advance!

  36. Arron Davies says:

    sorry me again, I’m assuming its adding the function and removing another.

  37. Arron Davies says:

    Hey guys! How can i call the Aurthur description and remove the, Visit (Aurthur) Profile Page link on the contributors page.

  38. Martin says:

    Hi,
    I’m trying to limit the function by user level (I only want to show contributors, not authors). It seems like it shouldn’t be hard using user_level but I just can’t get it to work. Any ideas?
    Thanks a million,
    Martin

    • Editorial Staff says:

      You just want to list all users on the site? Not just authors?

      • Martin says:

        I’ve got a hierarchy set up where frequent writers are in the system as Authors, but one time submitters are in as Contributors. I did get this working using Justin Tadlock’s function and restricting the user_level there where the level for the authors list is >1 and the level for the contributors is 1.

  39. John says:

    Great post, but do you know how to exclude users with no posts, or below a certain level?

    • Editorial Staff says:

      Yes, you see in the second option, how we specify not to include admin. You can add a parameter like where display_name post count > 0 or something. And it should work.

  40. Malcolm says:

    Real Good tutorial..How would you make it so that the profiles display three across rather than all under each other

    • Editorial Staff says:

      You would simply need to change the li values in the CSS to your needs. You might have to utilize inline-block technique to display these. But there is nothing on the php end, it is just CSS.

  41. Jake Rocheleau says:

    Great post as always man! I love finding neat little WordPress tricks like this, makes my day. Keep up the awesome work!

  42. Nimit kashyap says:

    Good tutorial :)

  43. John (Human3rror) says:

    it’s mike hyatt! :)

  44. Tom says:

    That is perfect for blogs that have multiple contributors! All my blogs are written by me, so it kind of defeats the purpose of having a contributor page.

  45. Kim Woodbridge says:

    You must have read my mind – I needed something like this today and saw your post before I started searching around for the info.

    Thanks!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.