How to Highlight Author’s Comments in WordPress

Do you want to make the author’s comments stand out on your WordPress website? No wonder—highlighting these comments has several benefits. Users will easily see people in charge are not only active but interested in leaving prompt, comprehensive answers to inquiries. This facilitates user engagement, and ultimately builds a loyal user base. These visitors will gladly contribute with their comments, and help others when the author is unavailable or unable to answer numerous queries. Others will interject with remarks or questions, and the ball keeps rolling. Whatever your goals are, here’s how to highlight the author’s comments in WordPress.

Reasons to call attention to the author’s comments

We already mentioned engagement. It will help you get visitors to check other pages, sign up for a newsletter, or even pay for a membership. But did you consider that emphasizing a comment an administrator, writer, or editor posted is an effective way to update your visitors? You can notify them about a change to a blog post, news article, or portfolio page without making edits to the post or page itself.

This is also important for websites that have many authors, as it helps distinguish their responses, some of which may be a response to another noted user role. Plenty of website owners also reserve top comments for information they gather after publishing, such as results of a poll, winners of a giveaway, or a funny remark that attracts attention. In short, doing this helps users spot noteworthy information they might have scrolled past otherwise.

1. Highlight author’s comments through Additional CSS in WordPress

Unsurprisingly, we decided to begin with the least labor-intensive and radical method. Lots of website owners merely want to change the color of the background for the author’s comments, helping it stand out in the bulk of those visitors left. That is indeed possible, quick, and simple to achieve through CSS (Cascading Style Sheets). Before we give you a practical example, we want to point out you must manually add changes to every WordPress post or page you want to see them on.

Advantages of this method are simplicity, the ability to preview changes before you make them permanent, and that it’s light on your server resources. With that said, follow these steps to modify the appearance of comments authors left on a WordPress post or page.

1. Gain access to WordPress Admin.
2. Expand the left sidebar, then click on Appearance → Customize. Alternatively, you can visit the page in question while logged in, then click on Customize in the top bar.
3. You’ll now see the preview of the front end of your website with options on the left-hand side. Navigate to the page where the author’s comments need to stand out.
4. Select the Additional CSS option at the bottom.
5. You’ll now see a blank text area (it may have some code if you added custom CSS in the past). This is where you need to add the CSS code, more specifically, decide how a default CSS class WordPress added, “bypostauthor”, should be changed. Here’s an example of what you can add:

.bypostauthor {
background-color: #f7f7f7;
}

This would modify the background color of any author-issued comment to #f7f7f7, which is a hex code for light gray. You can add any color that matches your website’s appearance. A preview of the changes will appear immediately. Click the Publish button once you’re satisfied. So long you know a bit of CSS, you can play with this endlessly. Here are some extra changes you can make (remove our comments after //):

.bypostauthor:before {
content:"Author";  //Adds an Author label
float:right;  //defines its position
background-color:#f7f7f7;
padding:4px; //Padding for the label
font-size:small; //Font size of the label
font-weight:bold; //Make the text bold
color:#FFFFFF; // Color of the text in the label
}
.bypostauthor .avatar {  //inserts the user's avatar to the position theme defined
border:1px dotted #1100ff;  //adds a border around their avatar, and sets its type and color
}

2. Use a code snipped to highlight the author’s WordPress comments

This is not an alternative, but rather a nifty addition for a multi-author website or any website that has plenty of user roles (Administrator, Editorial Staff, Author, Doctor, Specialist, and so on). This will help visitors understand which role the author plays on the website, and peer into their credentials.

Set up a label with user roles on WordPress comments

Credit and props for the code snippet below go to www.wpbeginner.com, a website we aren’t affiliated with. However, it’s simple enough, yet leaves space for customization by advanced users with knowledge of PHP. Here’s the code snippet:

if ( ! class_exists( 'WPB_Comment_Author_Role_Label' ) ) :
class WPB_Comment_Author_Role_Label {
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'wpb_get_comment_author_role' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'wpb_comment_author_role' ) );
}

// Get the role of the author
function wpb_get_comment_author_role($author, $comment_id, $comment) { 
$authoremail = get_comment_author_email( $comment); 
// Verify that the user is registered
if (email_exists($authoremail)) {
$commet_user_role = get_user_by( 'email', $authoremail );
$comment_user_role = $commet_user_role->roles[0];
// Add an output in HTML that appears next to the author's name/display name
$this->comment_user_role = ' <span class="comment-author-label comment-author-label-'.$comment_user_role.'">' . ucfirst($comment_user_role) . '</span>';
} else { 
$this->comment_user_role = '';
} 
return $author;
} 
 
// Make sure author comments apper on the frontend
function wpb_comment_author_role($author) { 
return $author .= $this->comment_user_role; 
} 
}
new WPB_Comment_Author_Role_Label;
endif;

You can add it in one of three ways:

1. In the left sidebar of WordPress Admin, click on Appearance → Editor or Theme Editor. Click on functions.php under “Theme Functions”. Add it at the bottom of the document.
2. Gain FTP access to your website. Head over to “wp-content/themes/name-of-your-child-theme/functions.php”. Add it in the same place.
3. Install and activate a plugin for WordPress that lets you add code snippets. This is safer and ensures the change persists if you switch themes.

Configure the appearance of comments for each role

You unquestionably added labels next to authors’ names. However, that may not be prominent enough for some users. That’s fine, since you may now reuse method 1 to set up additional CSS if you wish. Here are examples for two roles, but you can add more below:

.comment-author-label {
    padding: 5px;
    font-size: 14px;
    border-radius: 3px;
}
  
.comment-author-label-editor {
background-color:#f7f7f7;
}
.comment-author-label-author {
background-color:##dff7e5;
}

3. Install a WordPress plugin that emphasizes comments authors leave

Are you using any leading comment plugins for WordPress? If so, double-check whether they have an option to “enable user role badges” on the front end. You’ll often find many do, and perhaps even support customizations we went over. Even if that isn’t the case, you can switch to an alternative or install a dedicated one, such as Comment Author Role Badge by Tunghsiao Liu. The latter type of plugin is slowly updated and rarely reviewed due to a low user base, so pick one carefully.