How to Show an Authors List with Photos in WordPress

If you’re running a multi-author WordPress blog, and you want to highlight your authors by displaying a list of authors with their photos, then you’re in the right place. Previously we showed you how to display an authors list in WordPress, but this method is very code intensive. Then we showed you how to create a simple staff list in WordPress, but that requires you to recreate author profiles in a separate section. In this article, we will cover how to show an authors list with photos in WordPress without writing a single line of code.

Video Tutorial

If you don’t like the video or need more instructions, then continue reading.

First thing you need to do is install and activate Author Avatars plugin. After activating the plugin, you get a widget and two shortcodes that you can use to display authors list with their photos.

Display Authors List with Photos Using a Widget

If you want to display the authors list in your sidebar or another widget area, then you need to use the widget method. Go to Appearance » Widgets and drag-drop the AuthorAvatars widget to your sidebar. This widget comes with various options that allows you to customize your list in the way you want.

From the widget’s configuration screen, you can set the image size for author’s avatar, choose which author information to display, set a minimum number of posts required, choose user roles, and more.

Display Authors List with Photos using Shortcode

The plugin comes with two shortcodes. To add an authors list with photos inside a post or page, you can use the shortcode [authoravatars]. However, simply adding the shortcode alone will only display the avatars of authors. This shortcode has other parameters that you can add to display additional information. For example:

[authoravatars avatar_size=44 link_to_authorpage=true show_name=true show_biography=true]

You can also modify the appearance of your list by overriding the styles in your theme’s style.css file. We added this CSS to our demo to customize the display:

.shortcode-author-avatars .avatar { 
float:left;
text-align:left;
padding:3px;
margin:3px;
border: 1px solid #EEE;
}
.shortcode-author-avatars div.author-list .user {
text-align: left;
}

This is how the author’s list looked after applying the custom CSS above:

Display Unregistered Author with Photo in WordPress

This plugin also allows you to display unregistered users by using their email address. This is particularly useful for guest authors who may not have a user account on your site. You can also use this method to highlight any user of your site by using their user id or email address. The shortcode to display single user avatar is [show_avatar]. It also has parameters which can be used like this:

[show_avatar email=mail@address.com avatar_size=25 align=left]

You can also modify the appearance of avatar by overriding plugin’s stylesheet in your theme’s style.css file.

.shortcode-show-avatar {
  padding: 3px;
  border: 2px solid #EEE;
}

Allow Authors to Upload Profile Photo in WordPress

By default this plugin uses gravatar, but in some cases your authors may not want to display their gravatar. In that case, you can allow them to upload their own profile photo in WordPress.

First thing you need to do is install and activate Simple Local Avatars plugin. Upon activation the plugin adds an Avatar upload section on user profile page. Users can go to Users » Your Profile page to upload their own photo to be used as avatar on your site.

If the author has a custom avatar, then author avatars will simply display the custom image rather than showing the gravatar.

We hope that this article helped you add an authors list with photos on your WordPress site. If you have any questions and feedback, then please leave a comment below. Also don’t forget to follow us on Twitter.