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:
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 ";
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.
Comments
24 Responses to “How to Display an Author List with Avatars in WordPress Contributors Page”Share Your Opinions
Tell us what you're thinking...
and if you want a pic to show with your comment, then get gravatar!
Please make sure that you have read our Comment Policy.
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!
We are glad that you did not have to look around and this saved you sometime
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.
it’s mike hyatt!
Good tutorial
Great post as always man! I love finding neat little WordPress tricks like this, makes my day. Keep up the awesome work!
Real Good tutorial..How would you make it so that the profiles display three across rather than all under each other
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.
Great post, but do you know how to exclude users with no posts, or below a certain level?
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.
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
You just want to list all users on the site? Not just authors?
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.
Hey guys! How can i call the Aurthur description and remove the, Visit (Aurthur) Profile Page link on the contributors page.
sorry me again, I’m assuming its adding the function and removing another.
Yes exactly right. You replace the function you don’t want and add the function that you want.
http://codex.wordpress.org/Author_Templates
Use the above link as a guide.
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!
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!
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.
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
You would call the function in your sidebar.php file. Change the order_by parameter to post count in descending order.
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!
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?
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.