Highlighting the admin and author comments in WordPress can improve UX (User Experience) because the users can quickly spot them.

Unfortunately, by default, WordPress and most themes don’t come with an option that allows you to highlight the author and admin comments.

But there’s some good news!

WordPress adds specific CSS classes to the comments made by authors and logged in users, such as the Administrator.

By using those classes, you can create simple CSS codes that allow you to highlight the comments for those two user roles.

So, yes, ladies and gentlemen, we won’t use a plugin for this because it’s very easy to do it manually. The fewer plugins you have, the better!

Let’s get to it!

How to highlight the author comments in WordPress

If this is not somehow changed by the theme developers, the main CSS class for the author comments is bypostauthor.

To verify that, you can go to an author’s comment (in the front-end), right-click on it and select Inspect or Inspect Element (depends on the browser).

Then, a box will appear at the bottom, which will show you the HTML code for the section you selected.

Scroll around nice and easy inside of it until you find this:

As you can see, that line of code highlighted the entire author comment and also contains the CSS class that we’re looking for: bypostauthor.

Here’s a detailed tutorial on how to find a CSS selector in WordPress.

Now, you can use that CSS class to highlight the author comments in WordPress.

For example, let’s add a simple border at the top.

The simplest way to add CSS in WordPress is to go to Appearance -> Customize -> Additional CSS.

Once there, add the below code and click the Publish button if you’re satisfied with the changes:

.comment-list .bypostauthor, .commentlist li ul.children li.bypostauthor {border-top: 5px solid #0098ff;}

Here’s how the customized author comment looks like in the front-end of the default Twenty Seventeen theme:

If you want to add a background color instead of the border, then add a CSS code like this:

.comment-list .bypostauthor, .commentlist li ul.children li.bypostauthor {background-color: #b7e2f3;}

Here’s how it looks like (can differ from theme to theme):

Unfortunately, there’s no padding, and if you try to add any, it will kind of mess up the whole comment box for some reason, including the avatar, which will move to the right.

I think it needs some more custom CSS, and at the moment, I couldn’t figure out a quick solution, unfortunately.

It could look fine for some, even without a padding, but it really depends on the theme.

How to highlight the admin comments in WordPress

If you’re not the only author on your blog, and you reply to comments on other author’s posts as an admin, then you might want your comments highlighted as well.

To do this, we’ll use another main CSS class, comment-author-username, where “username” is your WordPress username, so don’t forget to change it in the code.

In my example, my WordPress username is ThemeSkills, so my CSS class will be comment-author-themeskills.

The whole CSS code for highlighting the admin comments in WordPress will be this one:

.comment-list .comment-author-themeskills, .commentlist li ul.children li.comment-author-themeskills {border-top: 5px solid #e1482a;}

Here’s how the customized admin comment looks in the front-end now:

You can also add a background color following the above example.

There are different CSS customization that you can add for the WordPress author and admin comments, but I can’t cover all of them.

For example, instead of ‘solid’, you can make the border dashed, dotted, double, and so on, by switching the ‘solid’ word inside the curly brackets.

Example: border-top: 5px dashed #e1482a;

You can find more border styles here.

Notes

1. Only add one highlighting code per user role: one for the admin and one for the author.

For example, if you add the code for the background color, but you don’t like it, then delete it and add the other one.

2. To find out hex codes (e.g. #b7e2f3) for different colors, use a tool like this one.

Or check for your theme’s color scheme in the settings to find a color that matches that.

That’s a wrap

Hope you found the post useful and comprehensive, and you managed to successfully highlight your admin or author comments in WordPress!

Don’t forget to share the post to help out others!

You can quickly subscribe to my newsletter by using this link or the subscription form.

If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

My WordPress blog and website installation service is at your disposal!

On-going WordPress support and maintenance service is on the menu as well!