How to mark up the author's comments in WordPress

Do you want to highlight the author's comments in WordPress posts on your website?

Highlighting the author's comments on your WordPress blog can help you build engagement. Users are more likely to leave a comment if they see the author actively participating in the discussion.

In this article, we're going to show you how to easily highlight the author's comments in WordPress to drive engagement.

Why Highlight Author Comments in WordPress?

Comments are a great way to increase user engagement on your website. If you want to get more comments on your articles, you can encourage it by actively participating in the discussions.

For a new WordPress blog, you can easily reply to comments during comment moderation. If you have a multi-author blog, you can encourage authors to join the discussion as well.

However, most WordPress themes don't distinguish between comments and list them with the same style.

Regular layout of the comments without highlighting the author

A casual reader may scroll through the comments without noticing the additional content that the author contributed to the discussion.

You can remedy this by highlighting the author's comments and making the author's comments stand out and more noticeable.

The ultimate goal here is to encourage new users to join the comments and ultimately subscribe to your newsletter or become a customer.

Let's look at how to easily highlight author comments in WordPress.

Highlighting the comment author in WordPress

The easiest way to highlight comments by post author is to add custom CSS to your WordPress theme. That way, you can just add the code you need and see a live preview of what it would look like on your website without saving it.

First you have to visit Appearance »Customize in the WordPress admin area. This will start the WordPress Theme Customizer interface. In a column on the left you will see a number of options and a live preview of your website.

Theme Customizer in WordPress

From here you need to click on the Additional CSS tab. This will open a text area where you will add the custom CSS.

Additional CSS tab

However, you want to see what the custom CSS will look like when applied. To do this, you need to navigate to a blog post that has comments from a post author.

View comments in the Theme Customizer

Scroll to the comments section, then paste the following custom CSS into the Custom CSS box on the left.

.bypostauthor {
Background color: # e7f8fb;
}}

You will immediately notice that the change to the author's comment matches the custom CSS you entered.

Author's comment highlighted with a different background color

How does it all work?

You can see WordPress adding some standard CSS classes to different areas of your website. These CSS classes are there no matter what WordPress theme you're using.

In this sample code, we used the .bypostauthor CSS class, which is added to any comments added by a post author.

Let's add more CSS styles to make them even more popular. Here is sample code that adds a small "Author" label to the post author's comments and a border around the author's avatar image.

.bypostauthor: before {
Content: "Author";
float right;
Background color: # FF1100;
Padding: 5px;
Font size: small;
Font thickness: bold;
Color: #FFFFFF;
}}
.bypostauthor .avatar {
Border: 1px dotted # FF1100;
}}

This is what it looked like on our test website.

Comment author highlighted with the author label

Highlighting comments by user role in WordPress

In many WordPress blogs, team members are responsible for replying to comments. On popular websites, the post writer, administrator, and moderator may respond to comments to encourage user interaction.

How can you highlight a comment that was added by a contributor other than the actual author of the post?

There is a simple hack to do that. However, you need to add custom code to your WordPress website. If you haven't already, check out our article on how to easily add custom code in WordPress.

First, you need to add the following code to the Code Snippets plugin or the functions.php file of your topic.

if (! class_exists (& # 39; WPB_Comment_Author_Role_Label & # 39;)):
Class WPB_Comment_Author_Role_Label {
public function __construct () {
add_filter (& # 39; get_comment_author & # 39 ;, Array ($ this, & # 39; wpb_get_comment_author_role & # 39;), 10, 3);
add_filter (& # 39; get_comment_author_link & # 39 ;, Array ($ this, & # 39; wpb_comment_author_role & # 39;));
}}

// Get comment author role
Function wpb_get_comment_author_role ($ author, $ comment_id, $ comment) {
$ authoremail = get_comment_author_email ($ comment);
// Check if the user is registered
if (email_exists ($ authoremail)) {
$ commet_user_role = get_user_by (& # 39; email & # 39 ;, $ authoremail);
$ comment_user_role = $ commet_user_role-> role (0);
// HTML output to be added next to the comment author's name
$ this-> comment_user_role = & # 39; & # 39 ;. ucfirst ($ comment_user_role). & # 39;& # 39 ;;
} else {
$ this-> comment_user_role = & # 39; & # 39 ;;
}}
return $ author;
}}

// Show the author of the comment
Function wpb_comment_author_role ($ author) {
return $ author. = $ this-> comment_user_role;
}}
}}
new WPB_Comment_Author_Role_Label;
endif;

This code simply adds the user role label next to the comment author's name. This is how it would look without individual styling.

Added user role labels to comments

Let's make it a little prettier by adding custom CSS. Go to Appearance »Customize Page and switch to the Additional CSS tab.

After that, you can use the following CSS to format the user role label in the comments.

.comment-author-label {
Padding: 5px;
Font size: 14px;
Edge 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;
}}

This is what it looked like on our test page. You can always customize the code to match the colors and style of your theme.

User role highlighted

For more information, see our article on adding user role labels to WordPress comments.

We hope this article has helped you learn how to highlight author comments in WordPress. Do you want to see how users interact with your website? Our tutorial will show you how to track user engagement in WordPress and how to add web push notifications on your WordPress site to increase your traffic.

If you enjoyed this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Comments are closed.