The comment area of a blog is often neglected in terms of design and usability when compared with the rest of the site, so I’m going to show you a number of ways that it can be improved. I shall be using the default theme that comes with Wordpress.

In this part I shall show you how to show alternate comments with a different style and then how to make the author’s comments look different to the reader’s comments.

Reader’s comments

The easiest change to make is to have alternate comments styled differently, this is built in to the default theme. All coding here is in comments.php and style.css on. Here is the way it works…

Around line 15 you will find:

/* This variable is for alternating comment background */
$oddcomment = 'class="alt" ';

This determines the style of the comment, in this case ‘alt’, that will be applied. Each comment is a list item and is written out within a foreach loop. The ‘class="alt" ‘ is added to a list item by a line a little further down:

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

This results in the following code being generated:

<li class="alt" id="comment-x">

You do not want every comment to have the ‘alt’ style and so a little further down you will find the code:

/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';

This line of code alternates the value of $oddcomment from ‘class="alt" ‘ and ” and back again. This results in:

<li class="alt" id="comment-x">

for odd numbered comments and:

<li id="comment-x">

for even numbered comments.

So that’s the mechanism for adding a style to a comment, all that you need to do is to add the styles in the style sheet. First of all, give the comment a default styling. You can be as imaginative as you like, but for the sake of simplicity for this example I shall have the comments styled with a yellow background as follows:

.commentlist li {
  background: #ffc;
}

Next we style the alt class, this time I shall make the background blue:

.commentlist li.alt {
  background: #ccf;
}

So adding these two styles will alternate the background color between pale yellow and pale blue.

Distinctive Author Comments

Now what if you, the author, wanted your comments to be styled differently so that you and your readers could spot them easily? Well, there are a number of ways you can do this, but they are essentially similar in method.

Before I go any further, I know there are plugins to change the appearance of author comments. They are great if you are the type that hates coding but really these are easy mods to do and do not slow down Wordpress like a plugin would. The only disadvantage is that if you change your theme you will have to do the changes to it as well.

First, go back to the lines:

/* This variable is for alternating comment background */
$oddcomment = 'class="alt" ';

and add:

/* This variable is for alternating comment background */
$oddcomment = 'class="alt" ';
$admincomment = 'class="auth" ';

Next go down to:

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

and change it to:

<li <?php if ($comment->comment_author_email == get_the_author_email()) {
  echo $admincomment;
} else {
  echo $oddcomment;
} ?>id="comment-<?php comment_ID() ?>">

This line is saying if the author of the comment’s email address is the same as the post’s author’s email then print $admincomment otherwise print $oddcomment. So if you make a comment it will have your style, but if it’s a visitor’s comment it will have either the default or alternate style.

To get this working all you need to add is a style to the style sheet, in this case the author will have a pale red background:

.commentlist li.auth {
  background: #fcc;
}

In a similar way, if the blog has multiple authors, each author could have a different styling . Say the blog had two authors, Mickey and Pluto, then these are the changes you would make:

/* This variable is for alternating comment background */
$oddcomment = 'class="alt" ';
$mickeycomment = 'class="mickey" ';
$plutocomment = 'class="pluto" ';

<li <?php if ($comment->comment_author_email == "mickey@inbox.com") {
  echo $mickeycomment;
} elseif ($comment->comment_author_email == "pluto@inbox.com") {
  echo $plutocomment;
} else {
  echo $oddcomment;
} ?>id="comment-<?php comment_ID() ?>">

.commentlist li {
  background: #ffc;
}
.commentlist li.alt {
  background: #ccf;
}
.commentlist li.mickey {
  background: #fcc;
}
.commentlist li.pluto {
  background: #cfc;
}

I don’t really like this method as it exposes the authors email addresses and what if they share the same email address? You could use the user ID number like this:

<li <?php if (1 == $comment->user_id) {
  echo $mickeycomment;
} elseif (2 == $comment->user_id) {
  echo $plutocomment;
} else {
  echo $oddcomment;
} ?>id="comment-<?php comment_ID() ?>">

In this case, you look up the user ID in the Admin Panel and substitute those numbers in the above code. If that sounds like too much work or numbers mean nothing to you then you could check for the author’s name instead:

<li <?php if ($comment->comment_author == "Mickey") {
  echo $mickeycomment;
} elseif ($comment->comment_author == "Pluto") {
  echo $plutocomment;
} else {
  echo $oddcomment;
} ?>id="comment-<?php comment_ID() ?>">

You just have to watch for visitors using the same name! On the other hand you could use this method to highlight the comments of honored visitors, by just plugging in their name into the above code.

In the next part of how to style your comments I shall show you how to seperate the pings and trackbacks from the comments or even remove them altogether so that only the comments show.