Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates.

One of our readers asked us if it was possible to highlight the user's role next to each comment on WordPress? Displaying the user role label gives weight to comments made by registered users of your website, especially authors, editors, and administrators. In this tutorial, we are going to show you how to easily add a label with the user role next to comments in WordPress.

add a label on the role of user.png

Why display the user role label next to a comment on WordPress?

If you allow user registration on your website, or if you are running a multi-authored WordPress website, user labels can present 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 present labels for other user roles, even if other comments are made by registered users or site administrators.

Easily create your website with Elementor

Elementor lets you create Easily and Free any website or blog design with a professional look. Stop paying a lot for a website you can do yourself.

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 WordPress theme files. 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.

example comment with user role.png

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:

result demonstration site css.png

That's all for this tutorial, I hope it will allow you to add a badge next to the texts of your staff members.