Making Comments stand out

In the default of most themes, all comments look the same. There have been ways of changing the appearance before using plugins and hacks - and this is more of the same. Hopefully though it'll give you some extra flexibility.

Note: I know there are ways to reduce the code I am using here by implementing more if/else statements, but I am doing it this way for clarity.

Look at this image which is taken from comments on my blog:

By the end of this page you will be able to style anyone's comments as you wish, and style pingbacks / trackbacks if you want and if big comment numbers are for you those too.

All the action takes place in the 'comments.php' file of your theme. You can edit this online but I would recommend you do this by downloading it first - the screen area will be bigger.
Whichever way you do though, backup the comments file first - mistakes happen !

Essentially we are doing two things:

Determine what sort of comment we have
Then decide what to do

It's no more complex than that - and we'll start with the styling.

Setting Commment conditions

Open comments.php and find this line:

<?php foreach ($comments as $comment) : ?>

This is part of the comment loop. Each time a comment is to be printed the code starts here so we put the conditions after that.

If you want to style your own comments differently, add this just below that line.

<?php
$isByAuthor = false;
if($comment->comment_author_email == 'you@your_email_address') {
$isByAuthor = true;
}
?>

The comment is checked and if the email address used by the commenter is you, a variable is set which will be checked later.

If you have someone else whose comments on your blog you also want to look different, just add another block like so

<?php
$isByFriend = false;
if($comment->comment_author_email == 'friend@their_email_address') {
$isByFriend = true;
}
?>

You could add others if you want.

Pingbacks & Trackbacks

This uses the same principle as the Comments styling, but you write it like this:

<?php
$istback = false;
if($comment->comment_type == 'trackback') {
$istback = true;
}
?>

<?php
$ispingb = false;
if($comment->comment_type == 'pingback') {
$ispingb = true;
}
?>

There's not a lot to alter there - just copy it into the comments.php file.

That all sets the conditions we want to be changed. Leave out those you do not need / want.

Displaying the style

You now need to tell the code what to do and where to do it.
Again in comments.php find this line:

<?php comment_text() ?>

That line actually puts the comment out, so it's the part we want to style.
Here is how we do it for the author only:

<?php if($isByAuthor ) { echo '<div class="authorcomment">';} ?>
<?php comment_text() ?>
<?php if($isByAuthor ) { echo '</div>';} ?>

The above checks to see if the condition $isByAuthor is true. If it IS, a style starts. If it not, nothing happens. Then the comment is written and then the style is closed.

So to add the styles we had above, just add more lines. If all 4 examples above are used, then it would all look like this:

<?php if($isByAuthor ) { echo '<div class="authorcomment">';} ?>
<?php if($isByfriend ) { echo '<div class="friendcomment">';} ?>
<?php if($istback ) { echo '<div class="tbcomment">';} ?>
<?php if($ispingb ) { echo '<div class="pbcomment">';} ?>

<?php comment_text() ?>

<?php if($isByAuthor ) { echo '</div>';} ?>
<?php if($isByFriend ) { echo '</div>';} ?>
<?php if($istback ) { echo '</div>';} ?>
<?php if($ispingb ) { echo '</div>';} ?>

For every condition above, add a line below.

So far though, they'll all still look the same - you need some CSS

The CSS

This is the CSS I use:

.authorcomment {
background: #eceef3;
}
.tbcomment {
padding: 5px;
background: url(images/tb.png) no-repeat;
}
.pbcomment {
padding: 5px;
background: url(images/pb.png) no-repeat;
}

It's not particularly interesting, but you will need a class in the css for each style.
There are ways to add images so you have quotation marks for instance but that is beyond what is being done here.
Using the above though you can now style your comment text backgrounds. You could also use the same statements for comment author names - just find where the name is printed to the screen and wrap it in the IF code.

The Numbers

The big numbers are done as follows.
Look inside comments.php and find this line:

<?php if ( $comments ) : ?>

Immediately above that put this new line:

<?php $i = 0; ?>
<?php if ( $comments ) : ?>

That new line sets the counter at zero.

Now find the 'foreach' line and add the $i++ line immediately below it.

<?php foreach ($comments as $comment) : ?>
<?php $i++; ?>

That increases the counter by one each time a comment gets printed.

Now you need to decide where to print the number.
In my comments - the image up at the top - I have this in my comments.php

<span class="count">
<?php echo $i; ?>
</span>

and that is directly above the comment code that was added to style the comments. For example, my code looks something like this:

<span class="count">
<?php echo $i; ?>
</span>

<?php if($isByAuthor ) { echo '<div class="authorcomment">';} ?>
<?php if($istback ) { echo '<div class="tbcomment">';} ?>
<?php if($ispingb ) { echo '<div class="pbcomment">';} ?>
<?php comment_text() ?>

Get the idea ? Now to style it....

.count {
float:right;
font-size:26px;
color:#333
}

Change to suit your needs.

As I stated at the top, there are other ways to do this, and there will absolutely certainly be ways of doing it in much less code - but this does work, is very clear so things can be added and removed and it imposes no burden on the code.