Quick Tip: Author Comment Styling in WordPress

An often-used feature in WordPress blogs is the ability to style comments made by the post’s author differently from the others – helping replies to stand out. Here, we will edit the default WordPress to add some subtle styling to author comments.

Step 1 – If Command

Open the comments.php file located in the Default’s theme directory: \wp-content\themes\default. Directly below the line:

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

There is:

<li id="comment-">

Edit this to say:

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

On the second line, we have included an ‘If’ statement, which in English says: “If the email address of the comment author matches that of the post’s author (meaning it’s the same person) – then insert the text ‘author_comment’”.

Also note that we opened a class on the first line. This is because by default, the theme automatically does this for it’s ‘$oddcomment’ variable. We shall fix this now.

Step 2 – Fixing the $oddcomment

If we left our code as it is, on every ‘odd’ comment, the classes would mess up. To fix this, towards the top of the file (usually line 17), look for:

$oddcomment = 'class="alt" ';

Edit this to:

$oddcomment = 'alt';

Then further down the page (usually line 48), look for:

$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';

Edit to:

$oddcomment = ( empty( $oddcomment ) ) ? 'alt' : '';

From the past two edits, we simply removed the class=” “ text to stop any conflicts with odd comments.

Step 3 – Style It!

Open style.css in the theme directory. At the bottom, add the lines:

ol.commentlist .author_comment {
border-bottom: 1px solid #0066CC;
border-top: 1px solid #0066CC;
}

This will change the border colors on author comments (note that we’re editing the author_comment class) to a light-blue color. You may edit this however you wish, but we are simply going for a very subtle approach.

That’s It!