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

 Today You will learn How to Display an Author List with Avatars on WordPress Contributors Page. Also, how you can make a contributors page that can display a list of authors with avatars or user photos and any other information you like.

WordPress has a default feature to display a list of your site’s authors. But there is no option to display their avatars. You can only link the text list to the author’s page if you have an author.php file in your theme.

If you want to show an author list page of your multi-author WordPress website, you need to make a customized WordPress authors page to list all the writers, team members, and contributors of your website. You can show a list of authors in WordPress with their bio, photos (Gravatars), and social media links. 

Basically, there are two manners to showcase authors on your WordPress website.

1. Plugin method

In this case, you can use a plugin that develops a shortcode to automatically bring data for a list of authors with their Gravatars, names, and other important details of their profiles. It is a fast way to do anything in WordPress.

2. Code method

You can create a manual code and place it wherever you need it. You can make a customized list of authors by manually adding photos, names, and other profile details. It will take more time, but it does not put an extra load on your website.

1. Plugin method- Author Avatars List 

Let us move to our first method: The Plugin Method

 Author Avatars List Plugin

The Author Avatars List is a plugin based on the WordPress core template functions to bring data for a list of authors. This plugin will automatically show authors or team members using the existing data of your recorded WordPress users.

The plugin uses an easy and simple author avatars shortcode to paste, which creates a good author list page.

Now, Install and activate, The Author Avatars List Plugin. You can check our guide on how to install Pugin to take help.

You do not have to do settings. The plugin adds new functions to the WordPress editor and a new widget.

How To Create WordPress Author List Page

You can add the author avatars to your different posts and pages in WordPress. We have to make Contributors page for your authors.

• Go to Pages >> click “Add New.” >> click the “author avatars” icon.

• select between a single author or list of authors.

• Now, you can select the options you want to show. 

• After selecting everything, click the “Insert” button.

 A shortcode is created for you on the page.

After that, you can publish or update the page. The author list will be available on your website.

2. Coding method

Let’s move further to our second method: the coding method

First, create a custom page on your WordPress website.

Then open the functions.php file in your themes and place 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>";

}

}

WordPress will create a function that shows the author’s name and the author’s avatar from the above code. You can change the avatar to user photo by simply changing the following line:

 echo get_avatar($author->ID);

Replacing it with:

 echo userphoto($author->ID);

You can also add more features to this function. For example, displaying the author URL and other information from the profile by following the structure.

You have 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;

}

After adding all the functions, you have to bring them to your page template. Open the contributors.php file. Use the same page template as page.php and add this function instead of displaying the content:

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

Now, you will have a more content-rich contributors page. This works excellent for Multi-Author blogs.

You can have a look at how it is.

 

Contributor page

If you want a contributors page with information like the example above, you have 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>";

}

}

The CSS, for the above 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;

}

wrapping up-

So, These were the ways to Display an Author List with Avatars on WordPress Contributors Page. You can go with any method from the above you like. 

You can also check our another post on How to list all authors from a blog in WordPress.

we hope this has help you!