If you want to give more weight to the comment from users with a high role in your post, you may want to add a user role label to the WordPress comment to let other users know the role of the author of those comments.
Many WordPress themes still don’t have this feature yet so comments from registered users, author, or even editor is displayed to almost look like an unregistered user. Many themes may highlight comments made by the post author, however, adding a user role label to the comment, may give more significance to it.
In this tutorial, we will show you how to add a user role label on WordPress commenting feature.
Adding a User Role Label on WordPress Comment
Before you start adding a user role label on your WordPress commenting feature, you may want to back up your site and use a child theme to avoid breaking the parent theme or losing your changes when you update your theme as this tutorial requires you to add some custom code in the functions.php file of your theme. Alternatively, to safely add custom code to your WordPress theme, you can use the code snippet plugin as it is an easier and faster way to add custom codes and manage them.
Step 1: Show the Comment Author’s Role
Once you’re ready, start by adding the following code to your theme functions.php file by navigating to Appearance → Theme File Editor (if you use a block theme, you can find the theme file editor under the Tools menu) to open the file editor.
// Get comment author role
function wpp_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 wpp_comment_author_role($author) {
return $author .= $this->comment_user_role;
}
}
new WPP_Comment_Author_Role_Label;
endif;
Once you’ve added the code to the editor, save the changes by clicking on the Update File button. The code above is used to display the comment author role label in your commenting feature.
However, as you can see from the above image, the role label position is in line with the comment author’s nickname which can be mistaken as their full nickname. Therefore, we need to style the role a bit to give it different look from the nickname.
Step 2: Add Some Style to the Role Label
To change the style of the comment author role, you may need to add the following CSS snippet to your theme Customizer → Additional CSS which you can access from the Appearance menu from your WordPress dashboard. If you’re using a block theme, read here to enable the Theme Customizer for that theme.
.comment-author-label {
padding: 2px 5px 2px 5px;
color:#FFFFFF;
font-size: 10px;
border-radius: 5px;
vertical-align: text-top;
}
.comment-author-label-editor {
background-color:#660000;
}
.comment-author-label-author {
background-color:#DE3163;
}
.comment-author-label-contributor {
background-color:#E31837;
}
.comment-author-label-subscriber {
background-color:#E44D2E;
}
.comment-author-label-administrator {
background-color:#7C0A02;
}
Once you’ve placed the code there, save the changes by clicking on the publish button. The CSS above will add a colored background to the role label then move it up a bit. The label color changes depending on the role of the comment author.
The Bottom Line
Many WordPress themes still don’t have a feature that gives more weight to the commenters yet so comments from registered users, author, or even editor is displayed to almost look like unregistered user. However, adding a user role label to the comment may give it more significance to their comment. This tutorial shows you how to add a user role label on WordPress commenting feature.
