WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Show an Authors List with Photos in WordPress

How to Show an Authors List with Photos in WordPress

Last updated on April 25th, 2014 by Editorial Staff
45 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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

Subscribe to WPBeginner

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.

Adding author avatar widget

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:

Authors list with Photos in WordPress

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.

Adding user profile photo as local avatar in WordPress

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.

45 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

5 Comments

Leave a Reply
  1. Alex says:
    Jul 6, 2018 at 10:01 am

    I have been looking everywhere for information like this! Thank you so much. However, I seem to get bots registering via wp-login.php sometimes and they are showing up on this page. Is there any way of restricting the avatars that show up to say… JUST administrators? Thank you! Any guidance much appreciated.

    Reply
    • WPBeginner Support says:
      Jul 7, 2018 at 12:00 am

      Hi Alex,

      Please see our guide on how to moderate user registration in WordPress.

      Reply
  2. WPBeginner Staff says:
    Aug 12, 2014 at 10:27 pm

    If your theme is loading properly this means your stylesheet is responding just fine. Please check your CSS to make sure that you are using the correct CSS classes.

    Reply
  3. Brielle says:
    Aug 12, 2014 at 4:42 pm

    Syed,

    Great article and video, thank you for your help! Is there any way to continue editing the styling of the author page within the shortlink? My WordPress theme’s css stylesheet is not responding.

    Reply
  4. Manuel Echeverry says:
    Jun 5, 2014 at 9:30 am

    Ok I undestand the autor avatar, but for the visitors it is posible to let them use custom avatars? I think its the same but im not shure

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
TrustPulse
TrustPulse
Instantly get 15% more conversions with social proof. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
wpDataTables
wpDataTables Coupon
Get 20% OFF on wpDataTables WordPress plugin for tables and charts.
Smash Balloon Coupon
Smash Balloon Coupon
Get 50% off Smash Balloon's powerful social media feed plugins.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.