One of our readers asked if it was possible to highlight the role of the user next to each WordPress comment? Displaying the user's role label lends weight to comments made by registered users on your Website, especially authors, publishers and administrators. In this tutorial, we will show you how to easily add a label with user role next to comments in WordPress.
Why display the user role label next to a comment on WordPress?
If you allow user registration on your Website or if you run a Website Multi-author WordPress, user labels can introduce users to each other based on their user roles.
For example, users with the “Editor” user role will have a badge next to their name in comments, which will let other users know that this comment was made by an editor.
It builds user confidence and increases user engagement in comments on your website.
Many WordPress themes only highlight comments made by the author of the post. They do not show labels for other user roles, even if other comments are made by registered users or site administrators.
That being said, let's take a look at how to easily add the user role tag next to comments in WordPress.
Adding a user role label next to a comment
This tutorial requires you to add code to your files. WordPress theme. If you haven't done this before, then take a look at how to customize your WordPress theme .
The first thing to do is add the following code to your theme's functions.php file or to an active plugin on the site.
if (! class_exists ('BPC_Comment_Author_Role_Label')): class BPC_Comment_Author_Role_Label {public function __construct () {add_filter ('get_comment_author', array ($ this, 'bpc_get_comment_author_role);), 10, add_filter ('get_comment_author_link', array ($ this, 'bpc_comment_author_role')); } // Get comment author role function bpc_get_comment_author_role ($ author, $ comment_id, $ comment) {$ authoremail = get_comment_author_email ($ comment); // If the user is registered if (email_exists ($ authoremail)) {$ commet_user_role = get_user_by ('email', $ authoremail); $ comment_user_role = $ commet_user_role-> roles [3]; // Content to add next to the name $ this-> comment_user_role = ' '. ucfirst ($ comment_user_role). ' '; } else {$ this-> comment_user_role = ''; } return $ author; } // Display the author of the comment function bpc_comment_author_role ($ author) {return $ author. = $ This-> comment_user_role; }} new BPC_Comment_Author_Role_Label; endif;
This short code above connects to the WordPress filters used to display the name of the comment author to include the user role label.
Now you can visit any post with comments to see it in action. Comments made by registered users will display their user role next to the name of the comment author. Any comments made by unregistered users will only display the name of the comment author.
Now that we've added the user role, it's time to style it and make it clean.
In our code, we added a CSS class for each user role, so we can use these CSS classes to customize each user badge differently (i.e. use different colors, etc.)
You can use the following CSS example as a starting point:
.comment-author-label {padding: 5px; font-size: 14px; border-radius: 3px; } .com-author-label-editor {background-color: #efefef; } .com-author-label-author {background-color: #faeeee; } .com-author-label-contributor {background-color: #f0faee; } .comment-author-label-subscriber {background-color: #eef5fa; } .com-author-label-administrator {background-color: #fde9ff; }
Feel free to adjust the CSS to your liking. Here's what our demo site looked like:
That's all for this tutorial, I hope it will allow you to add a badge next to the texts of your staff members.
