5ThirtyOne

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.