How-to style WordPress author comments

Motivated by email requests from a few readers, I’ve thrown together this simple tutorial on how-to style author comments under WordPress without the need for extraneous plugins. What we’re going to do is instruct WordPress to identify specific author emails and assign a unique class name to each. Using the flexibility of Cascading Style Sheets (CSS), we can then differentiate between specific user comments using different background colors, background-images, or fonts. This method has been tested with WordPress versions 1.5-current.

Identifiying author comments

In order to style your own, and possibly other reader(s) comments, we’ll need to modify the WordPress comment loop:

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

The code above is taken from the default comment loop. In order to differentiate and assign a unique class to your own author comments, you would modify the above code like so:

<li class="<?php if ($comment->comment_author_email == "author@domain.com") echo 'author'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">

In its simplest form, you’re telling WordPress to check a comment. If the author email matches author@domain.com, echo .author. If the comment email does not match author@domain.com, do what you normally do and display the comment using standard styling. Now that WordPress understands that it is supposed to assign .author to your own author comments, you can style li.author accordingly to quickly differentiate yourself in discussions.

Identifying author(s) & guest comments

Ocassionally, blogs feature multiple authors or highlight specific readers. In order to style these comments differently than your own [author] comments, we can modify the code above a little more:

<li class="<?php if ($comment->comment_author_email == "author@domain.com") echo 'author'; else if ($comment->comment_author_email == "guest1@domain.com") echo 'guest1'; else if ($comment->comment_author_email == "guest2@domain.com") echo 'guest2'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">

Similar to identifying author comments, in its simplest form, we’re instructing WordPress to assign .author to any comments which match author@domain.com, .guest1 to any comments matching guest1@domain.com, and .guest2 to any comments matching guest2@domain.com. If none of those emails match, then continue doing the usual.

Feel free change the assigned class names to more descriptive alternatives. Personally, I find using author or guest names easiest in the long run when pruning comments.php and style.css.

Styling author(s) & guest comments

Now that we have unique class assignments, we can style comments accordingly in order to differentiate between the masses and general readers. Assuming you wanted to add a small 16×16 pixel avatar to author comments, we would use CSS to add a background image to the authors name. The HTML / PHP might look something like this:

<span class="author_meta"><?php comment_author_link() ?></span>

The general corresponding CSS might look something like:

li.author span.author_meta a {
background: url(path/to/image.gif) no-repeat left center;
padding-left: 20px;
}

The possibilities & styling flexibility are only as limited or exhaustive as your personal CSS knowledge limitations. Feel free to drop your questions or comments below. On a public downloads note, keep an eye out for the downloads section availability which will include some related downloads.

Discuss - 70 Comments

  1. tripkolic says:

    I love it. thanks, I’ve been wondering how this was done. I’m surprised WordPress doesn’t have anything for this.

  2. thijs says:

    I tried this, but something goes wrong in the code because of the ‘oddcomment’ string. In my WordPress theme at least, that string contains the phrase “class=alt”, so the code you use produces results like “class=”class=”alt” and stuff like that.
    I’ve managed to make it work by replacing the call to the string with simple text, but I think this will not work smoothly for everyone.
    Just a note though, thanks for the work you did, it helped me out anyway.

    I found another way to do this elsewhere, using the author ID instead of the email address, but I found that my admin account is the top admin, and seemingly doesn’t have an ID associated (unless I’m missing something). Might be I have to dig it up in the database.

  3. [...] How to Style WordPress Author Comments Separating Trackbacks from Comments on Your WordPress Blog Using Gravatars in WordPress [...]

  4. LucicX says:

    Interesting article. As far as I inderstood this method is ok but in my comments.php I don’t find the "<li class="" id="comment-"> paragrapf" . I’ll search again in the others files too.

    but I have a curiosity. What plugin do you use for the floating box in the left side of your blog, the one with sharing options on social media? Thank You

  5. LucicX says:

    I’ve understood.* Typo, sorry.

  6. [...] 43. How-to style WordPress author comments [...]

  7. Kavita says:

    I do not find <li class in my comments.php so I just added the whole code but it is not showing result.