Highlight Author Comments in WordPress, The Easier Right Way
I just came across a post published today which goes over “the right way” to highlight author comments in WordPress. Basically, instead of the usual code that inserts the “admincomment” class for just the first user (user ID 1). In the post, that code is adapted for any post author, no matter what the user ID is, which can be especially useful to multi-author blogs.
Ever since WordPress 2.7 was released over a year ago, a new function was introduced to display comments called wp_list_comments which is known for supporting threaded comments as well. In addition to threaded commments, it also outputs a class automatically which can be used to style author comments in WordPress 2.7.
Screencast
In this screencast, I go over the various classes added to a comment made by a post author. I also go over how to style the .bypostauthor class.
Code Examples in Video:
.bypostauthor { background: #000; }/* Sets a black background on post author comments. */.bypostauthor { background: #000 !important; }/* Overrides any other background colors. */.commentlist .bypostauthor { background: #000; }/* Another way to override other background colors (depends on how your theme is coded) */
In case you’re wondering, I was using the Firebug Firefox extension to inspect the element as well as test out the CSS code. Definitely a must-have addon for coders.
Custom Callback?
If you’re using a custom callback in conjunction with wp_list_comments, all you need to do is make sure the comment_class function is present in your callback, which will generate the same classes on each comment.
For an example of this, check out ThemeShaper’s tutorial on creating a comments template, check out where <?php comment_class() ?> is added, and copy it in the same place of your own custom callback (assuming it’s not already there).
Conclusion
If you’re using an outdated theme that does not use wp_list_comments, the code from the first link should be just fine. If you’re using wp_list_comments, this is a much better and easier solution to implement, as you probably won’t have to modify any PHP in your theme (unless of course you have a custom callback).
Anyway, hope you liked the CSS tip. Let me know what you think in the comments. Also, do you prefer screencasts plus text, or just text?
Looking for web hosting?
Question: What's the best type of web hosting?
Answer: The kind you don't have to worry about.
And that's precisely why I recommend HostGator. I've been using them myself for years and they've been nothing short of superb.
Fast load times, great support, WordPress-friendly, and good prices. Not much more you can ask for.
New customers can get 25% off of any HostGator web hosting package with the coupon: themelab25percentoff
Note: I am a HostGator affiliate, but that doesn't make my recommendation any less genuine.
Hey thanks I will try this tonight. It really looks a lot better to have the author’s comments somehow easily distinguished.
Yeah true, I don’t do it here because I think my Gravatar is pretty recognizable in the comments here.
Using wp_list_comments + comment_class is the way to do it though. It makes it so much simpler to just style the .bypostauthor class that’s already there.
This was brilliant.
I prefer the screencasts. I was searching all over the place for this tutorial that explains it bit by bit.
Thanks!
For custom comments in the latest (2.9) WP here’s a little tutorial using a custom callback that adds the user name to the various comment classes. Allows styling with background images and highlighting of any specified logged-in user. Best!
But this highlights Admin comments,
I have a multi author blog,
And i want to highlight their comments on their post.
How can i do that?
It highlights the admin’s comments if the admin is the one who wrote a post. The “bypostauthor” class which I specifically went over in this post is used to style the author’s comments.
The comment class functions is freaking amazing. A must for any WP Theme. Easy to follow vid, great job.
Thanks! i was looking the whole day for this! because all the other normal suggestions didnt work, Do youy know how i can put the commentors avatar, name & date postes outside the normal comments div? like you see on some blogs with a arrow ponted to the avatar.
Hi i’m using the in my callback comments function. But when I view the source code there is no bypostauthor, i’m a little confused as to why not. Am I missing something?