{"id":25122,"date":"2021-06-05T17:00:18","date_gmt":"2021-06-05T15:00:18","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=25122"},"modified":"2021-06-04T12:14:57","modified_gmt":"2021-06-04T10:14:57","slug":"how-to-highlight-author-comments-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-highlight-author-comments-wordpress\/","title":{"rendered":"How to Highlight Author Comments in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]WordPress comments are one the most effective ways visitors can interact with your content, share their views, or ask questions. The post authors will then reply to those comments, improving the overall user engagement on the website and increasing its trustworthiness. Then, seeing the diligent replies of post authors, readers are more likely to leave new comments and stay longer on your website, which could ultimately lead to an increase in subscriptions or a boost in sales revenue. However, as the number of comments on a single post increases, determining which was made by the post author or other website staff becomes increasingly difficult, as all WordPress comments are displayed in the same manner.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"535\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Comments.jpg\" class=\"attachment-full size-full\" alt=\"Comments\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Comments.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Comments-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Comments-768x424.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Comments-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Therefore, WordPress post authors have to make their comments stand out so readers can pick out reliable information or helpful answers at a glance. The easiest way of doing this is to highlight author comments. An additional benefit of doing that is getting more structure for your comment section as a whole. Overall, this will help anyone reading your articles and searching for an answer to some question, find it easily and quickly. This, in turn, could lead to your blog community increasing substantially. With that being said, let\u2019s take a look at how you can shine a spotlight on your comment section and:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#default-wordpress-css-classes\">Highlight author comments using default WordPress CSS classes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#theme-specific-custom-css-classes\">Highlight author comments using theme-specific custom CSS classes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#highlight-users-of-all-user-roles\">Highlight users of all user roles<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Before we begin<\/h2>\n<p>[\/vc_column_text][vc_column_text]In this article, we will cover two possible ways of highlighting comments. Those are highlighting post author comments only and highlighting comments from users of all user roles. Both methods have their merits, which we will also discuss as we explain how you can use them.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">How to highlight post author comments only<\/h3>\n<p>[\/vc_column_text][vc_column_text]In this section, we will demonstrate how to highlight the post author comments using CSS only. To do so, we will apply a couple of CSS rules that affect the background and text properties of author comments. Additionally, we will show you how to add a <em>Post author<\/em> label next to your comments to make them stand out on the whole.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This method will be best with smaller blogs since they will likely have the post author as the only person replying to the comments.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Even though this section requires a bit of coding knowledge to be understood properly, we explain everything in detail so most WordPress users will be able to follow along. With that being said, let\u2019s proceed.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;58px&#8221;][vc_column_text]<a id=\"default-wordpress-css-classes\"><\/a><strong>Highlight author comments using default WordPress CSS classes<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The easiest way of highlighting post author comments is by using the CSS classes of those comments and applying CSS rules to them. By default, WordPress adds several comments-related CSS classes to comments thanks to the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_comment_class\/\" target=\"_blank\" rel=\"noopener\">get_comment_class()<\/a> function. Some of them are user-related, which we\u2019ll be considering later on in this article. For now, the question becomes how to find those classes and use them to create a suitable CSS code for highlighting the post author comments.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, <strong>locate a post that contains at least one comment created by the post author<\/strong> and <strong>open that post<\/strong> on the front end. Then, <strong>right-click somewhere within the post author\u2019s comment<\/strong> and <strong>select the <em>Inspect<\/em> option<\/strong> from the menu that appears.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"561\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Comments-Inspect.jpg\" class=\"attachment-full size-full\" alt=\"Comments Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Comments-Inspect.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Comments-Inspect-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Comments-Inspect-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Comments-Inspect-620x359.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will open your browser\u2019s developer tools, with the Elements tab selected by default, and a highlight over the HTML element you right-clicked. Next, <strong>navigate through the HTML structure until you find the HTML element that wraps the whole post author comment.<\/strong> We advise hovering over each element in the HTML code while looking for the one you need, as each element you hover over will be highlighted on the page. This will make finding the most appropriate element much easier.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After finding the element, review its ID and classes. Look for something that references the post author. As you can see on the screenshot below, it could be a custom class that targets a specific post author (e.g. comment-author-jenna-palmer) or a class that targets all post authors specifically (e.g. bypostauthor). We will use the second of the two\u2014the <strong>.bypostauthor<\/strong> CSS class.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"603\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Elements\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Elements-300x187.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Elements-768x478.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Elements-620x386.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As we mentioned at the beginning of this section of the tutorial, the get_comment_class() function adds several user-related CSS classes to comments. All of these can be seen in the screenshot above. They are <strong>byuser<\/strong>, and <strong>comment-author-$user_nice_name<\/strong> (in our case, that is <strong>comment-author-jenna-palmer<\/strong>) if the commenter is a registered user on the website, and <strong>bypostauthor<\/strong> if the commenter is the post author.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This function also adds some classes that are more comment-related, but they are not relevant to this article so we\u2019ll skip them for now. But, if you want to learn more about these classes, you can review the full source code on the page we linked that covers the function in detail. With that being said, of the three user-related CSS classes, we will be using the <strong>bypostauthor<\/strong> in our example.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]By using the <strong>.bypostauthor<\/strong> CSS class, we will be able to target all comments made by the respective post authors across all posts. Additionally, we will also target <a href=\"https:\/\/www.w3schools.com\/cssref\/sel_before.asp\" target=\"_blank\" rel=\"noopener\">the ::before CSS selector<\/a> of the respective element to add a small label before the comment. This label will notify the reader that the comment was made by the post author. Both the comment and the label will be stylized with CSS code, which is included below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Before we proceed to explain the code we composed, we need to mention that <strong>it isn\u2019t supposed to be directly copy-pasted<\/strong>. CSS in general should be tailor-made to work with your current theme and design requirements. Ours was created specifically for the theme we used in this example\u2014<a href=\"https:\/\/wordpress.org\/themes\/twentytwentyone\/\" target=\"_blank\" rel=\"noopener\">Twenty TwentyOne<\/a>. Instead of copying it straightaway, you should go through the rest of this article and create an equivalent version of the code that will work best for you.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, let\u2019s consider the CSS code we created for this part of the article.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.bypostauthor { \r\nbackground-color: #ffffff;\r\nborder: 1px solid #f55758;\r\npadding: 5px 10px !important;\r\nmargin-left: 100px;\r\n}\r\n.bypostauthor::before {\r\ncontent: \"Post author\";\r\nbackground-color: #f55758;\r\npadding: 3px 8px;\r\nfont-size: 14px;\r\nfont-weight: 600;\r\ncolor: #ffffff;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To clarify, we used the code to make the background of the author\u2019s comment white, added a border, padding, and a margin on the left. As for the comment label (which is created before the comment using the ::before selector), we specified its background color, padding, font-size, font-weight, color and set<strong> Post author<\/strong> as the label text. You can see the result in the screenshot below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"615\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Post-Author.jpg\" class=\"attachment-full size-full\" alt=\"Post Author\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Post-Author.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Post-Author-300x190.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Post-Author-768x487.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Post-Author-620x393.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;68px&#8221;][vc_column_text]<a id=\"theme-specific-custom-css-classes\"><\/a><strong>Highlight author comments using theme-specific custom CSS classes<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If your theme uses a custom comments template, then the CSS classes we mentioned previously might not be available. Instead, you will need to look for equivalent CSS classes that are added by your current theme and which are theme-specific. This is the only point in the process where using theme-specific custom CSS classes differs from using default WordPress CSS classes. Otherwise, the steps to highlight the post author comments are practically the same.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Nevertheless, we will describe the whole process again in detail. This time, we\u2019ll be using the <a href=\"https:\/\/lekker.qodeinteractive.com\/\" target=\"_blank\" rel=\"noopener\">Lekker theme<\/a> from <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\" target=\"_blank\" rel=\"noopener\">QodeInteractive<\/a> as an example. Make sure to follow the process carefully so you can understand all the key points and apply them to any other custom-made theme.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Similar to the process described earlier, the first step is to inspect a post author comment on one of your posts. Therefore, <strong>open a post that has an author\u2019s comment on your website\u2019s frontend, right-click on it,<\/strong> and <strong>select the <em>Inspect<\/em> option<\/strong> from the menu that appears.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"578\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Comments.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Lekker Comments\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Comments.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Comments-300x179.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Comments-768x458.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Comments-620x370.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, you will be placed within the Elements tab of your browser\u2019s developer tools, with a highlight over the element you inspected. <strong>Navigate through the HTML structure of your page until you find the HTML element that wraps the whole post author comment.<\/strong> When hovering over each HTML element, it will be highlighted on the front end. This will make the process of finding the exact HTML element that wraps the comment easier. Once you\u2019ve found the suitable HTML element, examine its ID and CSS classes to find the one that targets the post author. As you can see on the screenshot below, the suitable CSS class in our case is <strong>qodef-comment&#8211;author.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"564\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Lekker Elements\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Elements-300x175.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Elements-768x447.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Elements-620x361.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Keep in mind, creating CSS code should be done on a case-by-case basis. As such, you shouldn\u2019t simply copy-paste the CSS we left below, but use it for guidance when creating your own code. Ultimately, you should add the CSS rules that you find most fitting for your current website stylization. The ones we decided to use with the Lekker theme are shown below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qodef-comment--author { \r\nbackground-color: #FAEBD7;\r\nborder: 1px solid #f55758;\r\npadding: 5px 10px !important;\r\n}\r\n.qodef-comment--author::before {\r\ncontent: \"Post author\";\r\nbackground-color: #f55758;\r\npadding: 3px 8px;\r\nfont-size: 14px;\r\nfont-weight: 600;\r\ncolor: #ffffff;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The CSS code here is very similar to the one we put together to highlight the post author comments using default WordPress CSS classes. For the comment section, we specified the background color, border, and padding. And for the label, we specified its background color, padding, font-size, and font-weight. The label color is white and its text is <em>Post author.<\/em>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After inserting this CSS code, we got the following result.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"540\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Post-Author.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Lekker Post Author\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Post-Author.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Post-Author-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Post-Author-768x428.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Lekker-Post-Author-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"highlight-users-of-all-user-roles\"><\/a>Highlight users of all user roles<\/h3>\n<p>[\/vc_column_text][vc_column_text]Even though highlighting post author comments can be useful, additional features to help with structuring the comments section may be needed for bigger blog websites. This is especially the case if there are users with various roles creating the posts and responding to the comments. As such, it\u2019s extremely useful to highlight the comments from all those users, as well as from subscribers, to illustrate the level of engagement your articles have.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The easiest way to do this is by adding appropriate user role labels within the comments of any registered user on the website. But, this can be challenging to achieve in practice as there aren\u2019t any default WordPress options that can help you.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To label users with their particular roles, you would need to carefully construct a custom code snippet that displays user role labels. In this section of the article, we will show you an example of a code snippet you can use and explain it in detail. However, this snippet relies on some of the key points of object-oriented programming and WordPress in general, i.e. class objects and hooks, respectively. As such, this method is better suited for advanced WordPress users and we advise doing additional research if you need help to fully understand all the points we cover.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the snippet to work, you will need to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">use FTP<\/a> to place it either in the functions.php file of your theme or inside a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">site-specific plugin<\/a>. Since this method requires you to insert custom code, <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-manually-backup-wordpress-website\/\">making a backup of your website<\/a> beforehand is a highly recommended safety precaution. Once you\u2019ve done that, you can proceed to the steps below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For this article, we created the following code to display user role labels in the comment section.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if ( ! class_exists( 'CommentAuthorUserRoleLabel' ) ) {\r\nclass CommentAuthorUserRoleLabel {\r\npublic function __construct() {\r\nadd_filter( 'get_comment_author', array( $this, 'create_comment_author_role_html' ), 10, 3 );\r\nadd_filter( 'get_comment_author_link', array( $this, 'display_comment_author_role_html' ) );\r\n}\r\nfunction create_comment_author_role_html( $author, $comment_id, $comment ) {\r\n\/\/ Check if the commenter is a registered user\r\n$user = $comment-&gt;user_id ? get_userdata( $comment-&gt;user_id ) : false;\r\nif ( $user ) {\r\n$commenter_user_role = $user-&gt;roles[0];\r\n\/\/ HTML output added after the comment author name\r\n$this-&gt;user_role = ' &lt;span class=\"comment-author-label ' . $commenter_user_role . '-label\"&gt;' . ucfirst( $commenter_user_role ) . '&lt;\/span&gt;';\r\n} else {\r\n$this-&gt;user_role = '';\r\n}\r\nreturn $author;\r\n}\r\nfunction display_comment_author_role_html( $author ) {\r\nreturn $author .= $this-&gt;user_role;\r\n}\r\n}\r\nnew CommentAuthorUserRoleLabel;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s break it down.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First of all, to help you get a general grasp of what it represents, a slightly simplified version of the code is shown below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if ( ! class_exists( 'CommentAuthorUserRoleLabel' ) ) {\r\nclass CommentAuthorUserRoleLabel {\r\npublic function __construct() {\r\nadd_filter( 'get_comment_author', array( $this, 'create_comment_author_role_html' ), 10, 3 );\r\nadd_filter( 'get_comment_author_link', array( $this, 'display_comment_author_role_html' ) );\r\n}\r\nfunction create_comment_author_role_html( $author, $comment_id, $comment ) {\r\n\/\/ Some code here\r\n}\r\nfunction display_comment_author_role_html( $author ) {\r\n\/\/ Some code here \r\n}\r\n}\r\nnew CommentAuthorUserRoleLabel;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Looking at it now, it becomes clear that this code represents a class object we created called <strong>CommentAuthorUserRoleLabel<\/strong>. This class has three methods: <strong>__construct(), create_comment_author_role_html()<\/strong>, and <strong>display_comment_author_role_html()<\/strong>. Apart from that, we created an instance of this class using <a href=\"https:\/\/www.w3schools.com\/php\/keyword_new.asp\" target=\"_blank\" rel=\"noopener\">the keyword new<\/a> at the end and then wrapped all the code with an <a href=\"https:\/\/www.php.net\/manual\/en\/control-structures.if.php\" target=\"_blank\" rel=\"noopener\">if statement<\/a>. Finally, by using the negative version of the class_exists() conditional, we made it so that the code is executed only if a class object with the name <strong>CommentAuthorUserRoleLabel<\/strong> doesn\u2019t exist already. With that being said, let\u2019s take a look at all three class methods separately.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <a href=\"https:\/\/www.php.net\/manual\/en\/language.oop5.decon.php\" target=\"_blank\" rel=\"noopener\">__contruct()<\/a> method is the constructor method of our custom class object and it only contains two lines of code, both of which are uses of the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_filter\/\" target=\"_blank\" rel=\"noopener\">add_filter()<\/a> function. This is the most important part of the code. The first line of code hooks the <strong>create_comment_author_role_html()<\/strong> method of an instance of the <strong>CommentAuthorUserRoleLabel<\/strong> class object to the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/get_comment_author\/\" target=\"_blank\" rel=\"noopener\">get_comment_author<\/a> filter hook. The second line does the same, except for the <strong>display_comment_author_role_html()<\/strong> method and the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/get_comment_author_link\/\" target=\"_blank\" rel=\"noopener\">get_comment_author_link<\/a> filter hook, respectively.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">public function __construct() {\r\nadd_filter( 'get_comment_author', array( $this, 'create_comment_author_role_html' ), 10, 3 );\r\nadd_filter( 'get_comment_author_link', array( $this, 'display_comment_author_role_html' ) );\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the<strong> create_comment_author_role_html()<\/strong> and <strong>display_comment_author_role_html()<\/strong> methods, we purposefully picked names that would be easily understood. The former creates the user role associated with the comment author, if it exists, while the latter displays the user role, after the author\u2019s name.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function create_comment_author_role_html( $author, $comment_id, $comment ) {\r\n\/\/ Check if the commenter is a registered user\r\n$user = $comment-&gt;user_id ? get_userdata( $comment-&gt;user_id ) : false;\r\nif ( $user ) {\r\n$commenter_user_role = $user-&gt;roles[0];\r\n\/\/ HTML output added after the comment author name\r\n$this-&gt;user_role = ' &lt;span class=\"comment-author-label ' . $commenter_user_role . '-label\"&gt;' . ucfirst( $commenter_user_role ) . '&lt;\/span&gt;';\r\n} else {\r\n$this-&gt;user_role = '';\r\n}\r\nreturn $author;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function display_comment_author_role_html( $author ) {\r\nreturn $author .= $this-&gt;user_role;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now let\u2019s quickly go through the whole code of the <strong>create_comment_author_role_html()<\/strong> method, since the <strong>display_comment_author_role_html()<\/strong> should be quite clear on its own.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, using the ternary operator(? : ) we examined if the comment was made by someone with a known user ID, i.e. a registered user. If it was, then the <strong>$user<\/strong> variable stores all the user data of that registered user thanks to the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_userdata\/\" target=\"_blank\" rel=\"noopener\">get_userdata()<\/a> function. Otherwise, the $user variable is set to <a href=\"https:\/\/www.php.net\/manual\/en\/language.types.boolean.php\" target=\"_blank\" rel=\"noopener\">false<\/a> (boolean value).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The main part of the code is wrapped with an <a href=\"https:\/\/www.php.net\/manual\/en\/control-structures.if.php\" target=\"_blank\" rel=\"noopener\">if statement<\/a>. More precisely, if the <strong>$user<\/strong> has the user data of a registered user, then the user role HTML block is created. Otherwise, the same user role HTML is set as an empty string.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To create the user role HTML block, we first store the user role inside the <strong>$commenter_user_role<\/strong> variable. In case that s user has multiple user roles, only the first of them will be shown. With that being said, let\u2019s carry on with the explanation.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The label HTML is stored within the <strong>user_role<\/strong> property of our class object. It is a span that has the user role as the text, with the first letter capitalized thanks to the use of the <a href=\"https:\/\/www.php.net\/manual\/en\/function.ucfirst.php\" target=\"_blank\" rel=\"noopener\">ucfirst()<\/a> function.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It\u2019s important to also note, we added two CSS classes which we will use later for stylization. Those are <strong>comment-author-label<\/strong> and <strong>$commenter_user_role-label<\/strong>. The idea behind the two is that the former should be used for the CSS rules that are applicable for all user role labels we add this way, while the latter should be used for the CSS rules that are specific to a particular user role. This is done because the latter CSS class is created dynamically and is different for every user role. Meaning, for users with the author user role, the CSS class will be <strong>author-label<\/strong>; for editors, it will be <strong>editor-label<\/strong>; for administrators \u2013<strong> administrator-label<\/strong>, and so on.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that, we\u2019re wrapping up our explanation of the above-mentioned code.<strong> By adding this code, you made it so that each registered user who leaves a comment on any of your posts will have a user role label added after their username.<\/strong> Here\u2019s how it looked on our end.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"550\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Author-Roles-Comments.jpg\" class=\"attachment-full size-full\" alt=\"Author Roles Comments\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Author-Roles-Comments.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Author-Roles-Comments-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Author-Roles-Comments-768x436.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Author-Roles-Comments-620x352.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see from the screenshot, this label won\u2019t be sufficiently stylized, which means you need to create an additional CSS code to adjust its appearance. When creating that CSS, you should keep in mind the tip we shared earlier regarding the CSS classes you can use for the stylization. You can see the CSS code we used below. The same as with the previous CSS codes in this article, the code below is meant as an example. You should avoid copy-pasting it, and instead use it as a guideline for creating your styles.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.comment-author-label {\r\npadding: 4px 10px;\r\nfont-size: 14px;\r\nborder-radius: 8px;\r\n}\r\n.administrator-label { \r\nbackground-color:#edffa9;\r\n} \r\n.editor-label { \r\nbackground-color:#eca3f5;\r\n}\r\n.author-label {\r\nbackground-color:#fdbaf8;\r\n}\r\n.contributor-label {\r\nbackground-color:#b0efeb; \r\n}\r\n.subscriber-label {\r\nbackground-color:#eefafa; \r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To quickly break down this CSS\u2014we specified padding, font-size, and border-radius for any user role labels created with this method. Then, we specified a unique background color for each of the user role labels, with regards to their respective roles: administrator, editor, author, contributor, and subscriber, in that order. After applying this CSS, we got the following result.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"586\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-Label.jpg\" class=\"attachment-full size-full\" alt=\"Custom Label\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-Label.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-Label-300x181.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-Label-768x464.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-Label-620x375.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Before we conclude the article, we want to share one final piece of advice. As we mentioned several times already, you will need to create custom CSS code to stylize your comments properly. You can use either of the methods we mentioned, that\u2019s entirely up to you. But when you\u2019ve made the code you want to add, you need to decide where to place it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The most obvious location would be inside <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong>, and it is the one we suggest for most users. You can also use theme options for adding custom CSS if your theme has them, or install third-party plugins for adding custom CSS.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you choose to use a third-party plugin to add your CSS, you should only use plugins that don\u2019t cause compatibility issues with your website or your existing theme and plugins.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, you can also enqueue the CSS you created, which is another recommended way of adding CSS to your WordPress website, and we suggest it to our more advanced users. In this case, you would need to put the CSS code inside a .css file, upload it to your server, and enqueue it using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener\">wp_enqueue_style()<\/a> function. To learn more about this topic, you can take a look at our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-enque-scripts-wordpress\/\">enqueueing scripts and styles<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Replying to comments is a great way to engage with your audience and grow your community as a whole. However, when the number of replies and threads starts to grow, you need to start thinking about improving the structure of your comments section. By making your replies highlighted or labeling them by user role, you will make trustworthy comments easily noticeable to all readers. And by building trusted relationships, you can attract more readers, commenters, subscribers, and, even, customers.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we outlined two different approaches to highlighting author comments in WordPress using code. Even though both of those approaches rely on using CSS, it\u2019s up to you to decide which one you want to use. We covered all the key points in detail so you can take that knowledge and make your own CSS code, or adapt one of the examples we provided.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Ensure your visitors can take in important information at a glance by highlighting author comments and replies on your WordPress website.<\/p>\n","protected":false},"author":11229,"featured_media":25268,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,13],"class_list":["post-25122","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/25122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=25122"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/25122\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/25268"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=25122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=25122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=25122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}