Help Your Writer Stand Out From the (Comment) Crowd

in WordPress Tutorials

Responding to user comments is a great way to communicate with your readers and interact with your websites community. But it’s no secret that the comments section of any popular blog or site can become saturated. In a long list of comments it can be difficult for readers, and admins to pick out the instances where an author responded. So to better identify comments written by the original post author it would seem obvious to create a new format that makes the related comment stand out from countless others. For instance, comments posted by various members of  the community could display as normal; while comments posted by the original post author could display on a dark grey backdrop. This would basically outline the author’s comments and make them much more visible in an extended list of comments and trackbacks (We wrote an earlier article on separating trackbacks from comments, see the tutorial here). The code to implement this feature is quite simple, but requires editing of certain WordPress source files (“style.css”, “comments.php”).

Adding the “Authcomment” Command to the CSS Stylesheet

First we need to add style code into the active theme for the authors comment, which will basically tell the page how it should be displayed. In order to do this we need to open the “style.css” file for the active theme and add the following code to the end of the file text:

.authcomment {
background-color: #000000 !important;

For those users who aren’t quite as familiar with html code the “#000000″ segment of the code above indicates the color black in the html color code chart. This in turn means that you can alter this code by swapping it out with the corresponding code for the color you would like displayed behind author comments. As a quick example consider the following. If for instance you had a dark WordPress theme and would like the color displayed behind the author’s comment to be white you would change the code above to the following (The color white is signified as “#FFFFFF” in the html color chart):

.authcomment {
background-color: #FFFFFF !important;

Editing the Comments.php File

Now that we have told our current theme how to display the author’s comments we need to tell it how to identify them from community comments. We are basically going to tell WordPress to check if the commenter’s user-ID matches the ID of the blog-post author. The reason we are not going to match up the commenter’s e-mail address and the author’s e-mail address is quite simple, because then users could enter in the author’s e-mail address and they would receive the same comment style benefits, which would in turn render this code completely useless. Open the “Comments.php” active theme source file and look for the following line of code:

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

After you have found the code above, change it to the following:

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

That’s it! All done.

Now all comments posted by the blog’s author will display in a different style then random comments posted by the community. Notice how (image on the left) my comments display on a black background entirely different from the community comments.

Keep in mind that with the right source code, you can completely alter how the author’s comment will display in the “style.css” file. With a bit of ingenuity the author’s comments can be displayed in a different text style, different text color, or even appear on a specific background image. The sky’s the limit! Well, as far as the author’s comment style is concerned…