Not All Comments Are Created Equal

You may have noticed that on quite a few blogs (see Asterisk, Superflous Banter, Dunstan’s Blog) the site owner gets a specially styled comment box when replying to other people’s comments. Sometimes the comment box is a different color, has a different header or border, or just has a distingushing icon. This makes their replies stand out in case someone is just scanning a long list of comments on your blog. I will describe a simple hack to implement this feature as well as making it spoof-proof so only the authentic site owner’s comments will appear highlighted.

The default way that the XHTML is produced for comments in Wordpress is a bit strange. Individual li elements are given a unique CSS identifier of comment-#, where # is the comment ID. This is strange because there is really no way to practically take advantage of these style hooks. However, the style properties for the entire ordered list can be defined in wp-layout.css through the use of #comment-list li. This will style all the comments identically, regardless of author.

To achieve the effect of comment differentiation, we must have a way to give each comment one of two styles (or more if you want!), for this purpose lets say “user-comment” or “my-comment”. The easiest way to do this is to hack into your wp-comments.php file and change a few lines of code.

Notice: Backup your Wordpress installation before you go breaking things!

There is the main loop that spits out the comments in wp-comments.php, it looks something like this in the default installation.

<ol id="commentlist">
<?php foreach ($comments as $comment) { ?>
<li id="comment-<?php comment_ID() ?>">
<?php comment_text() ?>
<p><cite><?php comment_type(); ?> <?php _e("by"); ?> <?php comment_author_link() ?> &#8212; <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
</li>

<?php } // end for each comment ?>
</ol>

Take that chunk of code and replace it with this:

<ol id="commentlist">
<?php foreach ($comments as $comment) { ?>
<?php
// this will check the authors email address and see if it matches the secret password
// if so then the comment will be granted the hilighted style.

<?php } // end for each comment ?>
</ol>

Of course, replace “secretpassword” with something else you can remember. Now, when the comments are produced, the ones that are written by you will appear as <li class="my-comment"></li> and everything else will appear as <li class="user-comment"></li>. Ok, you may be wondering why the password is checked against the user email field. Well, its pretty simple; I think most people already know their own email addresses. When you are making comment posts on your own entries, simply put your secret password in as the email address. Unless you display your users email addresses, this is a fairly secure way to ensure that no one steals your identity on your blog. Hey, I said it was a hack.

Alright, we’re almost done. The last thing to do is to add a style hook for the “my-comment” class to make it stand out. Simply add this definition to your wp-layout.css:

ol#commentlist li.my-comment { your styles here! }

When everything is updated on the server, you should be set. One drawback to this technique is that all your old comments will appear as “user-comments” until you change the email field to your secret password. Remember, to get your comments to show up in the super-user style you defined, put your secret password (defined in wp-comments.php) as your email address.

I’m sure there are umpteen other ways to implement this hack, but a quick search through wordpress support didn’t show anything. If someone tries this out let me know if it works for you, I might of left something out in my haste! The first two comments on this post are examples of what the hack actually does.