On most sites, it is very hard for users to track author’s comments. This is why many WordPress sites highlight their author’s comment by making it a different background color, adding an image, etc. If you want to learn how to highlight author’s comments in WordPress, then you have come to the right place. In this article, we will show you the easiest and simplest way to highlight author’s comments in WordPress.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
WordPress by default generates a number of CSS classes which makes it easier for designers and users to change the styles (WordPress CSS Cheat Sheet). Among those default classes that WordPress has added, one of those are specifically targeted for styling author’s comments.
The class is called .bypostauthor which can be found in the .commentlist element. All you have to do is add your custom styles by using CSS. For example, you can add your own background, your own image, etc. Note: this code will be found in your style.css file located in your theme’s folder.
.commentlist .bypostauthor {}
.commentlist li ul.children li.bypostauthor {}
This doesn’t have to be super complex. Often it is a rather simple distinction that highlights author comment. For example, Chris Coyier has a border-top with a yellow/orange color that makes his comment stand out.
To get something like Chris, all you have to do is add this value in those classes:
.commentlist .bypostauthor {border-top: 10px solid #e18728;}
.commentlist li ul.children li.bypostauthor {border-top: 10px solid #e18728;}
Note: we strongly recommend that you change the color to match your color scheme 
Another example would be Matt Cutt’s site. He highlights his comment by adding a light background to his comment whereas all other comments have a white background.
You can do this by adding something like this in your style.css file:
.commentlist .bypostauthor {background: #e7f8fb;}
.commentlist li ul.children li.bypostauthor {background: #e7f8fb;}
Again, we strongly recommend that you change the color to match your site’s color scheme.
We hope that you find out tutorial on how to highlight author’s comment in WordPress to be helpful. The examples above are very simple, but you can go totally crazy and add background images, etc. Let us know if you have any questions.
Not work for me
I use custom theme with comments.php from twenty Twenty Thirteen.
Where can I add more CSS classes ?
Hi Rafael,
Please see our guide on how to add custom CSS in WordPress.
Thank you very much.
Hi! Whenever somenone leaves a comment on my website, the author name appears in gray. How can I change that do black? Also, a “permalink” word is always bellow the date and time of the comment . How can I get rid of that? Any help will be much appreciated. Thanks.
Hi Haina,
Please take a look at our guide on how to style WordPress comments.
Thanks for the quick reply. However, my understanding of CSS is less than “fair”. If you could give me direct instructions on how to get the comment author name in black, it would be great. If not, I understand also. Thanks.
How is it possible to exclude any replies to the authors comment from the styling?
I tried to it but i could not. I was added to my theme opition by myself.
May be i was changed “div”…
Thank you for topic.
There is a problem with changing the background if the auther is the creator of the comment and someone else replied, since the nested reply will also have the same highlighted background!
Nice post … but is there any plugin for doing the same ( there are some but 2-3 yers old ) looking for a new one with more customize options.
Is there a way to give each author (the main ones) different color comments?
Yes, it is possible to assign different color comments for registered users. The class would look like .comment-author-username. Replace username with the author’s username.
I followed the way you described but i have not found <li id=”comment-“> template in my comments.php
Any solution?
Just updated the article, so it is more current.
I’d love to see this tutorial updated to apply to Genesis and multi-author blogs!
Useful tip.
When I read post comments, I tend to read the author’s comments on the assumption that what he says carries more authority.
I’m OK with the CSS but never sure about the php.
You may have enticed me to start messing with the php!
nice tutorial, thank you
In my wordpress version,I just need to add a exist class that the wordpress generates.It’s “comment-author-admin”.Maybe the class “bypostauthor” that wordpress generates also does work.
This method would fail for multi-author blogs right?
You can probably add a comma and add more user IDs, but it will show all editor’s comment in highlighted version, so yes it will be a fail if you look at it that way.