Do you want to highlight author’s comments in WordPress? But WordPress doesn’t offer you any function to address this problem. Luckily, this blog will give you some useful ways by using simple CSS code.
Why should you highlight Author’s comments in WordPress?
In WordPress, the comments section allows your website’s visitors to have a discussion with you and each other. Therefore, you can fully take advantage of this section to make users more engaged with your content. While highlighting the author’s comment is one of the great ways to achieve this. In addition, when your website has a multi-author bog, highlighting the author’s comments also helps you separate the comments of normal visitors from authors and other staff members.
Unfortunately, by default, there is no feature to help handle this problem. Therefore, in today’s tutorial, we share some useful methods by using simple CSS code.
How to Highlight Author’s Comments in WordPress?
Method 1: Using the theme customizer
Adding custom CSS in the theme customizer is one of the easiest ways to highlight the author’s comments in WordPress. It enables you to easily add the code needed and even can see a live preview of how they will appear on your website but don’t need to save it.
First of all, you need to go to Appearance > Customize from your Menu dashboard. This takes you to the WordPress Theme customizer screen. Then, you will see a list of themes options in the left columns. Let’s scroll down the scroll bar, you will see the Customize CSS tab displayed at the bottom of the list.
Quickly click on it to open a text area where you can add the custom CSS.
If you want to see how your comments will change after applying the custom CSS, you need to navigate to a blog post that contains comments by a post author.
Now, you need to add the following CSS code to the given space.
.bypostauthor {
background-color: #e7f8fb;
}
Immediately, you will see the author’s comment highlighted with the color code that you added in the custom CSS box. You can replace the color code in our example with another color code.
In our example, we have used the .bypostauthor CSS class which is applied to all comments added by a post author.
Alternatively, you can add a small ” Author” label to all comments added by the post author and a border around the author’s avatar image.
You can add the following CSS code to make all comments of the post’s author more outstanding.
.bypostauthor:before {
content:"Author";
float:right;
background-color:#87cefa;
padding:5px;
font-size:small;
font-weight:bold;
color:#FFFFFF;
}
.bypostauthor .avatar {
border:2px dotted #87cefa;
}
Similarly, you will see the result directly in the preview area.
Method 2: Highlight author’s comment by user role in WordPress
Most WordPress blogs often assign team members who are responsible for answering comments. Usually, team members will include a lot of roles such as authors, admins, and moderators participating in the discussions.
Therefore, to highlight comments added by a staff member, you need to add the following code to the code snippets theme or plugin’s functions.php file.
if ( ! class_exists( 'WPB_Comment_Author_Role_Label' ) ) :
class WPB_Comment_Author_Role_Label {
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'wpb_get_comment_author_role' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'wpb_comment_author_role' ) );
}
// Get comment author role
function wpb_get_comment_author_role($author, $comment_id, $comment) {
$authoremail = get_comment_author_email( $comment);
// Check if user is registered
if (email_exists($authoremail)) {
$commet_user_role = get_user_by( 'email', $authoremail );
$comment_user_role = $commet_user_role->roles[0];
// HTML output to add next to comment author name
$this->comment_user_role = ' <span class="comment-author-label comment-author-label-'.$comment_user_role.'">' . ucfirst($comment_user_role) . '</span>';
} else {
$this->comment_user_role = '';
}
return $author;
}
// Display comment author
function wpb_comment_author_role($author) {
return $author .= $this->comment_user_role;
}
}
new WPB_Comment_Author_Role_Label;
endif;
It’s used to add the user role label right next to the comment author’s name.
If you want to make it more impressive, you can go to the Appearance > Customize page and keep choosing the Additional CSS tab and then add some custom CSS below.
.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;
}
Summary
Hopefully, this post was worthwhile in teaching you how to highlight the author’s comment in WordPress. If you have any questions, don’t hesitate to mention them in the comment section below. We are always willing to support you.
Moreover, our free WordPress Themes website has hundreds of professional, modern themes and templates that are suitable for various topics. You visit and try one for your website.
- What are joomla tags and how are the used? - November 3, 2024
- Why and how to create hidden menu items in Joomla? - October 31, 2024
- How to publish smartslider 3 to joomla 4? - October 31, 2024
Recent Comments