Currently set to No Index
Currently set to No Follow

Get the Official WPSaviour App Now!

Blog

How to Highlight Author Comments in WordPress

It becomes difficult for users to notice author’s comments on posts with many comments. This sometimes results into users asking same question in comments, even though the author has already answered in an earlier comment. This is why most popular blogs highlight author comments in WordPress. It is really simple, and in this article I am going to show you how to highlight author comments in WordPress.

Author comment highlighted

WordPress adds CSS classes to many elements in the HTML output it generates. These default CSS classes can be used or by themes or plugins. WordPress also adds a CSS class to comments added by a post’s author. This CSS class is .bypostauthor and you can see it by right clicking on your own comments for posts you have written.

bypostauthor class added to comments written by post's author in WordPress

Now all you have to do is to use this class to highlight author comments differently. Lets change the background color of author comments in WordPress. Add this CSS to your theme or child theme’s stylesheet.

1
2
3
.bypostauthor {
background: #eee;
}

Here is another example, this one just adds a border to highlight author’s comment:

1
2
.commentlist .bypostauthor {border-top: 10px solid #e18728;}
.commentlist li ul.children li.bypostauthor {border-top: 10px solid #e18728;}

The easiest and quickest way to learn how to modify themes is by studying other themes. Lets see how the default Twenty Twelve theme adds ‘Post Author’ label to highlight author comments in WordPress.

Twenty Twelve uses a function called twentytwelve_comment. Defined in the theme’s functions.php file, this function acts as the callback function for wp_list_comments() function. Adding a callback function to wp_list_comments allows themes to control the display of comments.

In Twenty Twelve’s functions file you find these lines which add the Post Author label to comments added by the post’s author:

1
2
3
4
5
printf( '<cite><b class="fn">%1$s</b> %2$s</cite>',
    get_comment_author_link(),
    // If current post author is also comment author, make it known visually.
    ( $comment->user_id === $post->post_author ) ? '<span>' . __( 'Post author', 'twentytwelve' ) . '</span>' : ''
);

After adding the Post Author label, it styles the label using this CSS:

1
2
3
4
5
6
7
8
9
.bypostauthor cite span {
color: #fff;
background-color: #21759b;
background-image: none;
border: 1px solid #1f6f93;
border-radius: 2px;
box-shadow: none;
padding: 0;

Download The WPSaviour App Now

Related posts
Beginner’s GuideBlogTips

Top 5 free payment gateway plugins for WordPress in India (2020)

Beginner’s GuideBlogTips

Best WooCommerce International Payment Gateways for WordPress in 2020

Best WordPress PluginsBlog

WordPress 5.4 Will Add Lazy-Loading to All Images

Beginner’s GuideBlog

How to Add a Preloader Animation to WordPress (Step by Step)

Sign up for our Newsletter and
stay informed

Leave a Reply

Your email address will not be published.