Do you want to highlight author’s comments in WordPress? However, WordPress doesn’t offer a built-in function for this. Luckily, this blog will give you some useful ways by using simple CSS code.
Why should you highlight author’s comments in WordPress?
In WordPress, the comments section allows your website’s visitors to have a discussion with you and each other. Therefore, you can fully take advantage of this section to make users more engaged with your content. Highlighting the author’s comments is one of the best ways to achieve this. In addition, when your website has a multi-author blog, highlighting the author’s comments also helps you separate the comments of normal visitors from authors and other staff members.
Unfortunately, by default, there is no feature to help handle this problem. Therefore, in today’s tutorial, we share some useful methods by using simple CSS code.
How to highlight author’s comments in WordPress?
Method 1: Using the theme customizer
Adding custom CSS in the theme customizer is one of the easiest ways to highlight the author’s comments in WordPress. It enables you to easily add the code needed and even see a live preview of how it will appear on your website before saving it.
First of all, you need to go to Appearance > Customize from your dashboard menu. This takes you to the WordPress Theme customizer screen. Then, you will see a list of theme options in the left column. Scroll down and you will see the Customize CSS tab displayed at the bottom of the list.
Click on it to open a text area where you can add the custom CSS.
If you want to see how your comments will change after applying the custom CSS, you need to navigate to a blog post that contains comments by a post author.
Now, you need to add the following CSS code to the given space.
.bypostauthor {
background-color: #e7f8fb;
}
Immediately, you will see the author’s comment highlighted with the color code that you added in the custom CSS box. You can replace the color code in our example with another color code.
In our example, we have used the .bypostauthor CSS class which is applied to all comments added by a post author.
Alternatively, you can add a small ” Author” label to all comments added by the post author and a border around the author’s avatar image.
You can add the following CSS code to make all comments by the post’s author stand out more.
.bypostauthor:before {
content:"Author";
float:right;
background-color:#87cefa;
padding:5px;
font-size:small;
font-weight:bold;
color:#FFFFFF;
}
.bypostauthor .avatar {
border:2px dotted #87cefa;
}
Similarly, you will see the result directly in the preview area.
Method 2: Highlight author’s comment by user role in WordPress
Many WordPress blogs assign team members who are responsible for answering comments. Usually, team members with roles such as authors, admins, and moderators take part in the discussions.
Therefore, to highlight comments added by a staff member, you need to add the following code to a code snippets plugin or your theme’s functions.php file.
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 comment author role
function wpb_get_comment_author_role($author, $comment_id, $comment) {
$authoremail = get_comment_author_email( $comment);
// Check if user is registered
if (email_exists($authoremail)) {
$commet_user_role = get_user_by( 'email', $authoremail );
$comment_user_role = $commet_user_role->roles[0];
// HTML output to add next to comment author 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;
}
// Display comment author
function wpb_comment_author_role($author) {
return $author .= $this->comment_user_role;
}
}
new WPB_Comment_Author_Role_Label;
endif;
It’s used to add the user role label right next to the comment author’s name.
If you want to make it more impressive, you can go to the Appearance > Customize page, choose the Additional CSS tab and then add some custom CSS below.
.comment-author-label {
padding: 5px;
font-size: 14px;
border-radius: 3px;
}
.comment-author-label-editor {
background-color:#efefef;
}
.comment-author-label-author {
background-color:#faeeee;
}
.comment-author-label-contributor {
background-color:#f0faee;
}
.comment-author-label-subscriber {
background-color:#eef5fa;
}
.comment-author-label-administrator {
background-color:#fde9ff;
}
Summary
Hopefully, this post was worthwhile in teaching you how to highlight the author’s comment in WordPress. If you have any questions, don’t hesitate to mention them in the comment section below. We are always willing to support you.
Moreover, our free WordPress Themes website has hundreds of professional, modern themes and templates that are suitable for various topics. Visit it and try one for your website.
