Highlight Author Comments in WordPress (Like a Boss)

It’s always satisfying when you post something on your blog and it attracts a tonne of comments. It means you’re doing something right.

The problem is, when you start accumulating a serious discussion on one of your blog posts, it can be difficult to keep track of the conversation and tell one commenter from the next.

People are generally more interested in what the author has to say, so if you’re participating in a discussion on your own blog post (which you always should), a lot of readers will be skimming through the comments in search of your own two cents.

Highlighting author comments is an easy way to distinguish your own input and make it easier for people to find in a rambling comments discussion.

If you want to boss it up a couple of notches and stand out from the crowd, this is a very easy way to do it.

Styling author comments using CSS

I’ve chosen a clean and minimalist theme called “Ari” to demonstrate this trick, but it should work with whatever WordPress theme you’re using. (Bear in mind that a lot of themes use author comment highlighting by default, so this might already be in action on your own blog).

This is the comment section of my blog post, with the default styling of the Ari theme:

As you can see, in a longer list of comments it would become quite difficult to pick out the author at first glance, especially when lots of commenters are using gravatars. But a pinch of CSS will fix that.

There are numerous different ways you could approach this, but for the purpose of this tutorial I’m simply adding some CSS code to the stylesheet of my WordPress theme, which will change the look of author comments. You’ll need to get access to the style.css file of your WordPress theme to do this.

Once you’ve got your style.css file open, simply copy and paste this piece of code:

.commentlist .bypostauthor {
background-color: #eef4ef;
background-image: -webkit-gradient(linear, left center, right center, from(rgb(238, 244, 239)), to(rgb(201, 199, 195)));
background-image: -webkit-linear-gradient(left, rgb(238, 244, 239), rgb(201, 199, 195));
background-image: -moz-linear-gradient(left, rgb(238, 244, 239), rgb(201, 199, 195));
background-image: -o-linear-gradient(left, rgb(238, 244, 239), rgb(201, 199, 195));
background-image: -ms-linear-gradient(left, rgb(238, 244, 239), rgb(201, 199, 195));
background-image: linear-gradient(left, rgb(238, 244, 239), rgb(201, 199, 195));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eef4ef', EndColorStr='#c9c7c3');
}

This code adds color to the background of the author’s comment, which helps it to stand out from the other comments. A linear gradient is used to transition smoothly between two different shades of grey, which creates a more polished visual effect.

This is what my comments section looks like now:

Simple as that. From now on, all my comments will be highlighted. If you know a bit of CSS you can play around with this and produce all sorts of different effects.

Over to you – got any handy little WordPress CSS tricks up your sleeve? Sharing is caring!

_{Props to Lumaxart for the photo.}