How to Highlight Author Comments in WordPress
WordPress comments are one the most effective ways visitors can interact with your content, share their views, or ask questions. The post authors will then reply to those comments, improving the overall user engagement on the website and increasing its trustworthiness. Then, seeing the diligent replies of post authors, readers are more likely to leave new comments and stay longer on your website, which could ultimately lead to an increase in subscriptions or a boost in sales revenue. However, as the number of comments on a single post increases, determining which was made by the post author or other website staff becomes increasingly difficult, as all WordPress comments are displayed in the same manner.
Therefore, WordPress post authors have to make their comments stand out so readers can pick out reliable information or helpful answers at a glance. The easiest way of doing this is to highlight author comments. An additional benefit of doing that is getting more structure for your comment section as a whole. Overall, this will help anyone reading your articles and searching for an answer to some question, find it easily and quickly. This, in turn, could lead to your blog community increasing substantially. With that being said, let’s take a look at how you can shine a spotlight on your comment section and:
Qode Themes: Top Picks
View Collection
Before we begin
In this article, we will cover two possible ways of highlighting comments. Those are highlighting post author comments only and highlighting comments from users of all user roles. Both methods have their merits, which we will also discuss as we explain how you can use them.
How to highlight post author comments only
In this section, we will demonstrate how to highlight the post author comments using CSS only. To do so, we will apply a couple of CSS rules that affect the background and text properties of author comments. Additionally, we will show you how to add a Post author label next to your comments to make them stand out on the whole.
This method will be best with smaller blogs since they will likely have the post author as the only person replying to the comments.
Even though this section requires a bit of coding knowledge to be understood properly, we explain everything in detail so most WordPress users will be able to follow along. With that being said, let’s proceed.
The easiest way of highlighting post author comments is by using the CSS classes of those comments and applying CSS rules to them. By default, WordPress adds several comments-related CSS classes to comments thanks to the get_comment_class() function. Some of them are user-related, which we’ll be considering later on in this article. For now, the question becomes how to find those classes and use them to create a suitable CSS code for highlighting the post author comments.
First, locate a post that contains at least one comment created by the post author and open that post on the front end. Then, right-click somewhere within the post author’s comment and select the Inspect option from the menu that appears.
This will open your browser’s developer tools, with the Elements tab selected by default, and a highlight over the HTML element you right-clicked. Next, navigate through the HTML structure until you find the HTML element that wraps the whole post author comment. We advise hovering over each element in the HTML code while looking for the one you need, as each element you hover over will be highlighted on the page. This will make finding the most appropriate element much easier.
After finding the element, review its ID and classes. Look for something that references the post author. As you can see on the screenshot below, it could be a custom class that targets a specific post author (e.g. comment-author-jenna-palmer) or a class that targets all post authors specifically (e.g. bypostauthor). We will use the second of the two—the .bypostauthor CSS class.
As we mentioned at the beginning of this section of the tutorial, the get_comment_class() function adds several user-related CSS classes to comments. All of these can be seen in the screenshot above. They are byuser, and comment-author-$user_nice_name (in our case, that is comment-author-jenna-palmer) if the commenter is a registered user on the website, and bypostauthor if the commenter is the post author.
This function also adds some classes that are more comment-related, but they are not relevant to this article so we’ll skip them for now. But, if you want to learn more about these classes, you can review the full source code on the page we linked that covers the function in detail. With that being said, of the three user-related CSS classes, we will be using the bypostauthor in our example.
By using the .bypostauthor CSS class, we will be able to target all comments made by the respective post authors across all posts. Additionally, we will also target the ::before CSS selector of the respective element to add a small label before the comment. This label will notify the reader that the comment was made by the post author. Both the comment and the label will be stylized with CSS code, which is included below.
Before we proceed to explain the code we composed, we need to mention that it isn’t supposed to be directly copy-pasted. CSS in general should be tailor-made to work with your current theme and design requirements. Ours was created specifically for the theme we used in this example—Twenty TwentyOne. Instead of copying it straightaway, you should go through the rest of this article and create an equivalent version of the code that will work best for you.
With that being said, let’s consider the CSS code we created for this part of the article.
.bypostauthor {
background-color: #ffffff;
border: 1px solid #f55758;
padding: 5px 10px !important;
margin-left: 100px;
}
.bypostauthor::before {
content: "Post author";
background-color: #f55758;
padding: 3px 8px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
}
To clarify, we used the code to make the background of the author’s comment white, added a border, padding, and a margin on the left. As for the comment label (which is created before the comment using the ::before selector), we specified its background color, padding, font-size, font-weight, color and set Post author as the label text. You can see the result in the screenshot below.
If your theme uses a custom comments template, then the CSS classes we mentioned previously might not be available. Instead, you will need to look for equivalent CSS classes that are added by your current theme and which are theme-specific. This is the only point in the process where using theme-specific custom CSS classes differs from using default WordPress CSS classes. Otherwise, the steps to highlight the post author comments are practically the same.
Nevertheless, we will describe the whole process again in detail. This time, we’ll be using the Lekker theme from QodeInteractive as an example. Make sure to follow the process carefully so you can understand all the key points and apply them to any other custom-made theme.
Similar to the process described earlier, the first step is to inspect a post author comment on one of your posts. Therefore, open a post that has an author’s comment on your website’s frontend, right-click on it, and select the Inspect option from the menu that appears.
Afterward, you will be placed within the Elements tab of your browser’s developer tools, with a highlight over the element you inspected. Navigate through the HTML structure of your page until you find the HTML element that wraps the whole post author comment. When hovering over each HTML element, it will be highlighted on the front end. This will make the process of finding the exact HTML element that wraps the comment easier. Once you’ve found the suitable HTML element, examine its ID and CSS classes to find the one that targets the post author. As you can see on the screenshot below, the suitable CSS class in our case is qodef-comment–author.
Keep in mind, creating CSS code should be done on a case-by-case basis. As such, you shouldn’t simply copy-paste the CSS we left below, but use it for guidance when creating your own code. Ultimately, you should add the CSS rules that you find most fitting for your current website stylization. The ones we decided to use with the Lekker theme are shown below.
.qodef-comment--author {
background-color: #FAEBD7;
border: 1px solid #f55758;
padding: 5px 10px !important;
}
.qodef-comment--author::before {
content: "Post author";
background-color: #f55758;
padding: 3px 8px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
}
The CSS code here is very similar to the one we put together to highlight the post author comments using default WordPress CSS classes. For the comment section, we specified the background color, border, and padding. And for the label, we specified its background color, padding, font-size, and font-weight. The label color is white and its text is Post author.
After inserting this CSS code, we got the following result.
Even though highlighting post author comments can be useful, additional features to help with structuring the comments section may be needed for bigger blog websites. This is especially the case if there are users with various roles creating the posts and responding to the comments. As such, it’s extremely useful to highlight the comments from all those users, as well as from subscribers, to illustrate the level of engagement your articles have.
The easiest way to do this is by adding appropriate user role labels within the comments of any registered user on the website. But, this can be challenging to achieve in practice as there aren’t any default WordPress options that can help you.
To label users with their particular roles, you would need to carefully construct a custom code snippet that displays user role labels. In this section of the article, we will show you an example of a code snippet you can use and explain it in detail. However, this snippet relies on some of the key points of object-oriented programming and WordPress in general, i.e. class objects and hooks, respectively. As such, this method is better suited for advanced WordPress users and we advise doing additional research if you need help to fully understand all the points we cover.
For the snippet to work, you will need to use FTP to place it either in the functions.php file of your theme or inside a site-specific plugin. Since this method requires you to insert custom code, making a backup of your website beforehand is a highly recommended safety precaution. Once you’ve done that, you can proceed to the steps below.
For this article, we created the following code to display user role labels in the comment section.
if ( ! class_exists( 'CommentAuthorUserRoleLabel' ) ) {
class CommentAuthorUserRoleLabel {
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'create_comment_author_role_html' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'display_comment_author_role_html' ) );
}
function create_comment_author_role_html( $author, $comment_id, $comment ) {
// Check if the commenter is a registered user
$user = $comment->user_id ? get_userdata( $comment->user_id ) : false;
if ( $user ) {
$commenter_user_role = $user->roles[0];
// HTML output added after the comment author name
$this->user_role = ' <span class="comment-author-label ' . $commenter_user_role . '-label">' . ucfirst( $commenter_user_role ) . '</span>';
} else {
$this->user_role = '';
}
return $author;
}
function display_comment_author_role_html( $author ) {
return $author .= $this->user_role;
}
}
new CommentAuthorUserRoleLabel;
}
Let’s break it down.
First of all, to help you get a general grasp of what it represents, a slightly simplified version of the code is shown below.
if ( ! class_exists( 'CommentAuthorUserRoleLabel' ) ) {
class CommentAuthorUserRoleLabel {
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'create_comment_author_role_html' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'display_comment_author_role_html' ) );
}
function create_comment_author_role_html( $author, $comment_id, $comment ) {
// Some code here
}
function display_comment_author_role_html( $author ) {
// Some code here
}
}
new CommentAuthorUserRoleLabel;
}
Looking at it now, it becomes clear that this code represents a class object we created called CommentAuthorUserRoleLabel. This class has three methods: __construct(), create_comment_author_role_html(), and display_comment_author_role_html(). Apart from that, we created an instance of this class using the keyword new at the end and then wrapped all the code with an if statement. Finally, by using the negative version of the class_exists() conditional, we made it so that the code is executed only if a class object with the name CommentAuthorUserRoleLabel doesn’t exist already. With that being said, let’s take a look at all three class methods separately.
The __contruct() method is the constructor method of our custom class object and it only contains two lines of code, both of which are uses of the add_filter() function. This is the most important part of the code. The first line of code hooks the create_comment_author_role_html() method of an instance of the CommentAuthorUserRoleLabel class object to the get_comment_author filter hook. The second line does the same, except for the display_comment_author_role_html() method and the get_comment_author_link filter hook, respectively.
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'create_comment_author_role_html' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'display_comment_author_role_html' ) );
}
As for the create_comment_author_role_html() and display_comment_author_role_html() methods, we purposefully picked names that would be easily understood. The former creates the user role associated with the comment author, if it exists, while the latter displays the user role, after the author’s name.
function create_comment_author_role_html( $author, $comment_id, $comment ) {
// Check if the commenter is a registered user
$user = $comment->user_id ? get_userdata( $comment->user_id ) : false;
if ( $user ) {
$commenter_user_role = $user->roles[0];
// HTML output added after the comment author name
$this->user_role = ' <span class="comment-author-label ' . $commenter_user_role . '-label">' . ucfirst( $commenter_user_role ) . '</span>';
} else {
$this->user_role = '';
}
return $author;
}
function display_comment_author_role_html( $author ) {
return $author .= $this->user_role;
}
Now let’s quickly go through the whole code of the create_comment_author_role_html() method, since the display_comment_author_role_html() should be quite clear on its own.
First, using the ternary operator(? : ) we examined if the comment was made by someone with a known user ID, i.e. a registered user. If it was, then the $user variable stores all the user data of that registered user thanks to the get_userdata() function. Otherwise, the $user variable is set to false (boolean value).
The main part of the code is wrapped with an if statement. More precisely, if the $user has the user data of a registered user, then the user role HTML block is created. Otherwise, the same user role HTML is set as an empty string.
To create the user role HTML block, we first store the user role inside the $commenter_user_role variable. In case that s user has multiple user roles, only the first of them will be shown. With that being said, let’s carry on with the explanation.
The label HTML is stored within the user_role property of our class object. It is a span that has the user role as the text, with the first letter capitalized thanks to the use of the ucfirst() function.
It’s important to also note, we added two CSS classes which we will use later for stylization. Those are comment-author-label and $commenter_user_role-label. The idea behind the two is that the former should be used for the CSS rules that are applicable for all user role labels we add this way, while the latter should be used for the CSS rules that are specific to a particular user role. This is done because the latter CSS class is created dynamically and is different for every user role. Meaning, for users with the author user role, the CSS class will be author-label; for editors, it will be editor-label; for administrators – administrator-label, and so on.
With that, we’re wrapping up our explanation of the above-mentioned code. By adding this code, you made it so that each registered user who leaves a comment on any of your posts will have a user role label added after their username. Here’s how it looked on our end.
As you can see from the screenshot, this label won’t be sufficiently stylized, which means you need to create an additional CSS code to adjust its appearance. When creating that CSS, you should keep in mind the tip we shared earlier regarding the CSS classes you can use for the stylization. You can see the CSS code we used below. The same as with the previous CSS codes in this article, the code below is meant as an example. You should avoid copy-pasting it, and instead use it as a guideline for creating your styles.
.comment-author-label {
padding: 4px 10px;
font-size: 14px;
border-radius: 8px;
}
.administrator-label {
background-color:#edffa9;
}
.editor-label {
background-color:#eca3f5;
}
.author-label {
background-color:#fdbaf8;
}
.contributor-label {
background-color:#b0efeb;
}
.subscriber-label {
background-color:#eefafa;
}
To quickly break down this CSS—we specified padding, font-size, and border-radius for any user role labels created with this method. Then, we specified a unique background color for each of the user role labels, with regards to their respective roles: administrator, editor, author, contributor, and subscriber, in that order. After applying this CSS, we got the following result.
Before we conclude the article, we want to share one final piece of advice. As we mentioned several times already, you will need to create custom CSS code to stylize your comments properly. You can use either of the methods we mentioned, that’s entirely up to you. But when you’ve made the code you want to add, you need to decide where to place it.
The most obvious location would be inside Appearance > Customize > Additional CSS, and it is the one we suggest for most users. You can also use theme options for adding custom CSS if your theme has them, or install third-party plugins for adding custom CSS.
If you choose to use a third-party plugin to add your CSS, you should only use plugins that don’t cause compatibility issues with your website or your existing theme and plugins.
Finally, you can also enqueue the CSS you created, which is another recommended way of adding CSS to your WordPress website, and we suggest it to our more advanced users. In this case, you would need to put the CSS code inside a .css file, upload it to your server, and enqueue it using the wp_enqueue_style() function. To learn more about this topic, you can take a look at our article on enqueueing scripts and styles.
Final Thoughts
Replying to comments is a great way to engage with your audience and grow your community as a whole. However, when the number of replies and threads starts to grow, you need to start thinking about improving the structure of your comments section. By making your replies highlighted or labeling them by user role, you will make trustworthy comments easily noticeable to all readers. And by building trusted relationships, you can attract more readers, commenters, subscribers, and, even, customers.
In this article, we outlined two different approaches to highlighting author comments in WordPress using code. Even though both of those approaches rely on using CSS, it’s up to you to decide which one you want to use. We covered all the key points in detail so you can take that knowledge and make your own CSS code, or adapt one of the examples we provided.
