WordPress: Highlight Author Comments

Wednesday, January 27th, 2010 at 12:23 am

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:

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:

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:

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!

Firefox & Double-Hyphens in Comments

Thursday, January 14th, 2010 at 7:53 pm

So in kicking off this blog, before I could even post something about stuff I’m working on, I ran into an interesting problem just setting up the blog itself that I’ll share.

I just freshly installed WordPress 2.9.1 and found a nice clean theme called Clean Home (version 1.2 at the time of install).  I’ll probably change it up later, but for now, it’s a nice simple clean slate to start off with.  After getting the basic site set up I decided to compare across my typical suite of testing browsers that I always use to verify web pages I’m working on (Safari, FF and Chrome on Mac, and FF, IE, Chrome and Opera on Windows).  I was primarily comparing the font rendering to see if I wanted to tweak anything, when I noticed that my non-blog pages (like the About page) had a weird rendering issue only in Firefox (both Mac and Win).  Basically, there was a post slug (title, date, author, category, etc.) that was not supposed to be there since they only show up within the blog section of the site.  Also, there was a --> displayed at the end of the slug, the telltale sign that an HTML comment tag did not get closed properly.  But this code is generated from a template on the server, so it’s exactly the same in all browsers (and works fine in everything BUT Firefox).  So what gives?

I examined the page source (found in page.php) and saw this right after the start of the <div class="post"> block:

A big block of HTML — the page title and post slug section — are commented out (but still available to tinkerers like me, which I appreciate).  I have never run across the case where having a double-hyphen inside a comment would cause a problem, but being the genius hacker that I am, my first instinct was to remove that and refresh the page — voilà, no more post slug in FF.  The block of HTML is now properly commented out.

Out of curiosity I Googled this just to check my sanity, and sure enough, it’s a well-known “bug that’s not a bug” with versions of Firefox going back many years.  Basically, the HTML spec (up until version 5) allows whitespace between the -- and the > of a closing comment tag (although interestingly, not in an opening comment tag), and Firefox is apparently the only browser that actually enforces that rule.  I found a great write-up on this issue from a blogger who tried unsuccessfully to report this “bug” to Mozilla — if you are a web developer you’ll definitely appreciate it.

Anyway, problem solved and blog officially kicked off, all in one post!