Home » Blog » Tutorials » How to Display an Author List with Avatars in WordPress Contributors Page

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

Posted on January 14th, 2010 by Editorial Staff in Tutorials | 58 Comments

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