Fun with Avatars

I’m working on a site (pictured above) that required some customization of the avatars. Here’s some CSS-based approaches to these changes.

Avatars as Circles

In the past I’ve used a messy solution for this – absolutely positioning a square image with a transparent circle on top of the avatar, so the avatar shows through the circle. This is bad for a lot of reasons: adds additional markup, adds an extra image, and is difficult to change the size of the avatar later on (you’d have to rebuild the image).

But there’s a really simple CSS-based approach that solves all these issues:

.comment .avatar {
border-radius: 50%;
view raw style.css hosted with ❤ by GitHub

Custom default avatar

While you could use code or a plugin to add this functionality, CSS is simpler.

In Settings > Discussion I selected “Blank” as the default avatar. I then use the following CSS to style it

.comment .avatar[src*="blank"] {
background: #a7a7a7 url(images/blank-avatar.png) no-repeat center center;
view raw style.css hosted with ❤ by GitHub

Admin Label

It’s a good idea to make the blog author’s comments stand out so someone can quickly browse the post and see what else the author has contributed. I do this on my own comments below (comments by me have a blue header).

Each comment has a series of classes that help you target it with specific styling. Three that are useful here are bypostauthor, byuser, and comment-author-[their username]. For this site I’m using bypostauthor since there will be only one author/admin of the site:

.bypostauthor > article .comment-author span[itemprop="name"] {
background: url(images/admin-badge.png) no-repeat right center;
padding-right: 60px;
view raw style.css hosted with ❤ by GitHub

If you have multiple admins you’d like to highlight and they are the only registered users, then use byuser. If you have multiple admins you’d like to highlight and they are not the only registered users, you can use comment-author-[their username].

Another option is to filter ‘comment_class’ to add your own specific classes. The following code adds a class of ‘byadmin’ if they are admins on the site:

* Admin Label
* @author Bill Erickson
* @link
* @param array $classes, list of all classes
* @return array $classes, list of all classes
function be_admin_label( $classes ) {
$comment = get_comment();
if ( $comment->user_id > 0 && user_can( $comment->user_id, 'manage_options' ) )
$classes[] = 'byadmin';
return $classes;
add_filter( 'comment_class', 'be_admin_label' );
view raw functions.php hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions


  1. Zach Russell says

    One of the things i’ve always liked about your work was the thought you put into comment systems. A lot of sites (including my own) don’t have as as good of a look and feel as they should, you do a great job at it. Keep up the great work!

    • Bill Erickson says

      Thanks! I can’t take the credit though, it’s the designers my clients hire that mock up the comment sections. I’m simply reproducing the provided design.

      It’s great that my clients and their designers consider every little detail, including the comment section.

  2. Patrick neve says

    I wish I would have known about these little goodies before I created my circular avatar in Photoshop. 🙂 Where there’s a will there’s a way. Thanks for these snippets Bill.

  3. Kingsley says

    Woow nice tutorial simple and clean. I want to ask a question.

    Is it possible to label both Admin and post author comments? I use genesis HTML5 theme news pro

  4. David Willden says

    Thank you – your tips are so helpful and easy to understand. Such a help when working with and improving your WordPress sites.

  5. Shane says

    I found this article while trying to figure out how to do the following:

    how do I only change the bypostauthor border color? so that only the post’s author’s avatar border color is different from everyone else’s avatar that is commenting?

    any help would be greatly appreciated 🙂

    • Bill Erickson says

      The actual CSS will depend upon the markup and styling of your website. If you’re using Genesis like theme, you can use .entry-comments li.bypostauthor > article { border-color: blue; }

Leave A Reply