WordPress: Highlight Author Comments

Every time I do a fresh WordPress configuration, one of my first tasks is to customize the comments template to enable highlighting any comments by me to have unique formatting. It also seems that each time I need to set this up, I have to Google how to do it again since it involves getting into the templates and monkeying around with internal PHP code, so this time around I thought I’d document it for myself :) . It would be so nice if WP built this feature into the default template…

Well, apparently they have! And it’s actually been available since version 2.7.0., but it does not appear to be very well publicized (and many custom themes, like the one I’m using, have not been updated to use the new function). Googling for the phrase “wordpress highlight author comments” leads to lots of methods for doing this the old-school ways of modifying template code, or installing special WordPress plugins to achieve comment highlighting. Luckily, I stumbled across this page from the WordPress documentation website that describes the comment_class() function, which automatically outputs a set of CSS class names that provide for just about any comment theming you would need.

If you are using a theme that has not been updated (but you are running WordPress 2.7+), you can modify one line in comments.php like I did so that it will call the new function. Find the loop that outputs the comment blocks, and modify the opening <li> tag code to match this:

1
2
3
4
5
<?php foreach ($comments as $comment) : ?>
    <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
       ...
    </li>
<?php endforeach; ?>

The key is the comment_class() function (which should be defined in the file wp-includes/comment-template.php if your WordPress version is current). This function is called on each iteration, which will give you an extremely useful list of CSS classes in your HTML output. Here’s an example of the output for a comment I wrote:

1
<li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="comment-12">

Wow, that’s a lot of useful classes! The class I’m looking for is bypostauthor, which indicates that it’s a comment I wrote. You could also choose comment-author-admin instead, for a blog by mutliple authors if you wanted any admin of the blog to be highlighted. They’ve even included classes for thread depth, if you’ve configured nested comments — too cool!

While I’m here, I’ll also add a separate style for odd and even rows to get alternating row colors. Doing all of this is simple now, just a few basic CSS rules added to the theme’s main stylesheet:

1
2
3
4
5
6
#comments .even {
    background:#f6f6f6;
}
#comments .bypostauthor {
    background:#E0E8EF;
}

Note that the bypostauthor rule must come after the even rule in the CSS file (in my example at least). Since they both change the same attribute (background color) the second rule will always take precedence when they both apply (i.e., when one of my comments is an even row). I want any comment by me to always show up with the same color regardless of the odd/even rule.

So there you go — nice and simple, much better than the old days. Thanks, WordPress!

Filed under: CSS, PHP, Web, WordPress | Comments: 1 Comment »

One Comment on “WordPress: Highlight Author Comments”

  1. 1 Brian  January 27th, 2010 at 12:26 am

    See, it worked!