How to Display User Role Badges Next to Comments in WordPress

As experienced WordPress developers, we've helped countless sites enhance comment sections by showing user roles. This adds credibility to comments from authors, editors, and admins. Follow our step-by-step guide to implement user role badges next to commenter names.

Why Display User Role Badges Next to Comments?

On sites with user registration or multiple authors, role badges help users recognize each other's authority. For instance, an editor's comment gets a badge signaling their role, building trust and boosting engagement.

Many themes only highlight post authors, ignoring other roles like admins or subscribers. This simple tweak changes that.

How to Add User Role Badges in WordPress Comments

This requires editing your theme's functions.php file. New to code edits? See our beginner's guide on safely adding code to WordPress.

Add this proven code snippet to functions.php or a custom plugin:

if ( ! class_exists( 'WPB_Comment_Author_Role_Label' ) ) :

    class WPB_Comment_Author_Role_Label {

        private $comment_user_role = '';

        public function __construct() {
            add_filter( 'get_comment_author_link', array( $this, 'wpb_comment_author_role' ) );
        }

        public function wpb_get_comment_author_role( $author, $comment ) {
            $author_email = get_comment_author_email( $comment->comment_ID );
            if ( email_exists( $author_email ) ) {
                $user = get_user_by( 'email', $author_email );
                $user_role = ucfirst( $user->roles[0] );
                $this->comment_user_role = '<span class="comment-author-label comment-author-label-' . strtolower( $user_role ) . '">' . $user_role . '</span>';
            } else {
                $this->comment_user_role = '';
            }
            return $author;
        }

        public function wpb_comment_author_role( $author ) {
            global $comment;
            $this->wpb_get_comment_author_role( $author, $comment );
            return $author . $this->comment_user_role;
        }
    }

    new WPB_Comment_Author_Role_Label();

endif;

This hooks into WordPress's get_comment_author_link filter to append role badges for registered users only.

Visit any post with comments to test. Registered users show badges; guests do not.

Next, style the badges with CSS. Our code uses role-based classes for customization:

.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;
}

Tweak colors to match your theme. Here's how it looks on our test site:

This quick addition elevates your comment section. For more, check our guide on lazy loading Gravatars in WordPress comments.