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. Sunit says:

    How do get a count of the no of posts each author has written?

  2. Mark Genest says:

    Hi,

    How can I include only users from a certain role?

    Thanks alot!

    • WPBeginner Support says:

      For that you will need a little different code, particularly the query part:

      $user_query = new WP_User_Query( array( 'role' => 'Administrator' ) );
      
      if ( ! empty( $user_query->results ) ) {
      	foreach ( $user_query->results as $user ) {
      		echo '<p>' . $user->display_name . '</p>';
      	}
      } else {
      	echo 'No users found.';
      }
      
  3. Rhodo says:

    Hi There,

    This tutorial is really great. How woulkd one achieve to exclude multiple users from the list? I tried using array (admin, etc) or ‘admin’ , ‘other_user’ but that doesnt work.

    Thanks in advance!

  4. Michael says:

    Hi,

    who can i sort by last Name instead of display_name.

    This is a nice script.

  5. Michael says:

    Who can i exclude the admin of the List ?

    • WPBeginner Support says:

      Try changing SQL Query on line 4 like this:

      $authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users WHERE user_nicename != 'admin' ORDER BY display_name");
      
      • Rhodo says:

        Hi,

        And how can i exclude multiple authors from this query?

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

        Thanks in advance!

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.