Highlight Author Comments with Custom Styles

There are quite a few ways to customize WordPress comments, but one of the most common is to highlight author comments. When the post author responds in the comments section, you want it to stand out. This will add context, as well as help visitors find answers to previously asked questions.

WordPress’ comment_class Function

Out-of-the-box, most WordPress themes implement a standard function called comment_class(). This function adds several classes to each comment that is made on your site. Some example classes include:

• comment
• byuser
• comment-author-{username}
• thread-even or thread-odd
• bypostauthor (if comment was made by the author of the post)
• depth-# (with # being the depth level of the comment)
• children (gets added to the containing element of all replies & threaded comments)

Highlight Author Comments

All we need to do is add some CSS to style our author comments. We’ll use the .bypostauthor class.

It depends how the CSS of your theme is setup. You might be able to just use .bypostauthor. Chances are, though, you’ll need to be more specific with your styles, and add at least one parent element. We’re using .comment-list as our parent item.

You can place this code in your theme’s style.css file, a custom CSS file or a plugin that provides custom CSS functionality (like Jetpack).

Adds a background color, a border & a slight inset shadow around all author comments:

.comment-list .comment.bypostauthor,
.comment-list .children .comment.bypostauthor {
	background: #f0f7fd;
	border: 1px solid #bce8f1;
	border-left: 5px solid #428bca;
	box-shadow: inset 0 0 0 1px #fff;
}

The 2nd selector (that has .children) is added because many themes add custom styles for threaded comments. This helps ensure that your author comment styling will override your theme’s default comment styling for threaded comments.

Highlight Author Comments on Multiple Author Blogs

Let’s say you manage a website alongside 2 other people. You each still write your own articles, but all 3 of you frequently comment on each other’s posts, and sometimes even answer your reader’s questions. You want ALL 3 of your comments to be highlighted, right? Not just the post author.

We can do this with the .comment-author-{username} class. Let’s say your 3 people’s usernames are sally, michelle & dave. Use this CSS (remember to check the styling for children/threaded comments):

.comment-list .comment.comment-author-sally,
.comment-list .comment.comment-author-michelle,
.comment-list .comment.comment-author-dave {
	background: #f0f7fd;
	border: 1px solid #bce8f1;
	border-left: 5px solid #428bca;
	box-shadow: inset 0 0 0 1px #fff;
}

Get Creative

There is no limit to what you can do here. Try using the pseudo-elements to really spice things up. Please post your examples in the comments so we can learn new tricks.

If you want to take things a step further, and add content in addition to styling, check out our post on adding content to author comments in WordPress.