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:
And on the BatchBlue Blog, here’s how a comment I leave looks:
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="
if (1 == $comment->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!
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.
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.
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).