How to highlight author comments and add author badge in WordPress

highlight author comments and add author badge

Highlighting the author comments are fairly easy and its also important to highlight the article author image. It is always important to highlight the article author comments in a WordPress post. Sometimes it is very essential to find the author comment from the list of comments in a WordPress article. Especially if an article has lots of comments it gets harder to find which comment is written by the post author. And therefore most popular WordPress blogs highlight their post author comments by giving a green or blue border or add an author badge to the author post. And for the most part, it looks good too.

It’s actually very simple to highlight the author comment or even adding a badge with the author comment. In this tutorial, I will show you how do you do that and even better how do you do that without a plugin.

Highlight author’s comment

WordPress adds some custom CSS classes with the article comments. And among them one class called ‘bypostauthor’ is only added to the comment of the article writer. This makes the post author comment unique to the other comments. And this is the class we will be using to style the author comment.

 Here is a simple example that adds a blue border around the author image.

.bypostauthor {
    border: 2px solid #5093d7;
}

Simply go to Appearance -> Customize and under additional CSS tab and paste the code and see it in action.

And here is a screenshot of how it looks like.

WordPress Hightlight Author Image

If that code does not work, this means that your theme is not coded properly and the class ‘bypostauthor’ is not available. You need to contact your theme developer.

Note that ‘#5093d7’ is a hexadecimal code for blue color. You can find your hexadecimal color code by simply searching ‘hex color picker’ on Google.

You can also change the background of the author post by adding ‘background-color’ attribute to the class. Example:

.bypostauthor {
    border: 2px solid #5093d7;
    background-color: #e7f8fb;
}

Note: if your theme already has a style for author comment and you like to override that, make sure you use ‘!important’ after css value. Like this background-color: #e7f8fb !important;


ALSO READ: Top 5 must have plugins for your WordPress site.


Add author badge

Now that we know that there is a class ‘bypostauthor’ that is uniquely added to the post author, we can use the same class to add a badge to the author post. To do that, paste the following code under additional CSS and this will do the trick.

.bypostauthor {
	position: relative;
}

.bypostauthor::before {
    content: 'Author';
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #5093d7;
    color: #fff;
    line-height: 1;
    padding: 6px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 2px;
}

And here is how it looks like.

highlight author comments and add author badge

Here what I did is, I have added the pseudo class ‘before’ to the class ‘bypostauthor’ and applied the styles there. You can change the property values for example ‘content’, background-color as you like or add properties like ‘border’, ‘box-shadow’ etc and make it unique for you.

I hope you found this article helpful. If so I would really appreciate if you can share this article on your social media and friends. Also, it will really boost me to create new articles. If you have any issues or questions about highlighting your author comment or adding author badge, feel free to write a comment down below and I’ll be happy to help you.


RECOMENDED: Add custom Social share icons with popup without plugin in WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *