How to Highlight Author’s Comments in WordPress

172

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

 

Subscribe to WPBeginner

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.

Highlight Author Chris

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.

Highlight Author Matt

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.