Create a Contributors List with Avatars in WordPress
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.
#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;
}
You would also need to add the following lines to your CSS file:
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.
Here’s an example of what it can look like.
If you want to have a contributors page with information like what’s displayed in the example above, you will need to make a few changes to the original function and whaddya know… Here’s some example code.
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 mentioned in this 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.
While working on a client’s website, I realized that the built-in function provided in Wordpress for listing authors was not sufficient enough. It only allowed for a simple list that was confined to the sidebar. If you want to create a more content-rich and useful contributors page, then that particular function is useless. Cue the robust tutorial.
-
Travis
-
Lance
