Multi-Author Comment Styling in WordPress

It always kind of bugged me a bit that comments I made on my own posts looked exactly like everyone else’s. It took me a long time to dig into how to make them look different, but I finally did. So, here’s how I styled author comments differently on this blog and on the BatchBlue Blog.

First of all, so you can get an idea of what I’m talking about, here’s how comments I leave on this blog look:

Darowski.com - Author Comment Style

And on the BatchBlue Blog, here’s how a comment I leave looks:

BatchBlue Blog - Author Comment Style

First thing I did was find this great blog post by Matt Cutts (now with Google). His solution involved taking this:

<li class="<?php echo $oddcomment; ?>"

from the comments.php page and replacing it with:

<li class="<?php
/* Only use the authcomment class from style.css if the user_id is 1 (admin) */
if (1 == $comment->user_id)
$oddcomment = "authcomment";
echo $oddcomment;
?>

Basically, what that is doing is taking any comments left by a logged in user with the user_id of 1 and applying the class “authcomment” to it. That works great if you have only one author. But the BatchBlue Blog has eight authors, with user_id from 1 to 8. Because I wanted to show a photo of the author next to his/her comment, I needed to give each author their own class name.

So, instead I used:

<li class="user_id)
$oddcomment = "comment-ransom";
if (2 == $comment->user_id)
$oddcomment = "comment-riggen";
if (3 == $comment->user_id)
$oddcomment = "comment-lynch";
if (4 == $comment->user_id)
$oddcomment = "comment-ohara";
if (5 == $comment->user_id)
$oddcomment = "comment-darowski";
if (6 == $comment->user_id)
$oddcomment = "comment-calhoun";
if (7 == $comment->user_id)
$oddcomment = "comment-sweeney";
if (8 == $comment->user_id)
$oddcomment = "comment-larson";
echo $oddcomment;
?>"

This way, comments I left would get the class “comment-darowski”, comments Michelle left would get “comment-riggen”, etc.

And the CSS to make it look like the image above…

li.comment-darowski {
  background: transparent url(../images/5-thumb.jpg) no-repeat left top;
  padding-left: 100px;
}

And repeat that for each author, swapping out a different photo file name.

For this blog, I used a mild variation on the original code by Matt, just naming the style “comment-darowski”. The CSS:

li.comment-darowski {
  background: #FFC url(images/adam.png) no-repeat 14px 14px;
  border: 1px dotted #999999;
  padding: 10px 10px 10px 50px;
}

So, there you are. Have fun!

2 Comments

  1. On June 8th, 2008 at 10:32 am mike said:

    nice technique, thought i might humbly suggest a modification.

    to make this more extensable/semantic, you want to emphasize the author’s comment whether the author is known or unknown, or whether a photo exists or not.

    i would revert back to your oddcomment->authcomment logic, that was solid. but instead of checking for user_id i would check for user_level, e.g. anything above user level 2. that way any author/editor/admin’s comments will be highlighted. use a default icon where the user picture would be, some illustration of an angry robot maybe. :P

    then add a second bit of logic to append the last name of the particular (privileged) user, if known, so you would end up with, e.g. class=”authcomment darowski”

    move the author name classes out into a separate stylesheet that you @import in, it will just contain last names and user images that would override the angry robot. :)

  2. On June 8th, 2008 at 2:19 pm Adam Darowski said:

    Yes sir, that’s more of a ninja approach than mine, for sure. I like how extensible it is. I may try that if I ever turn this design into a full fledged theme (which, strangely, has been requested).