How to create author comment styles in WordPress


How to create author comment styles in WordPress - Are you looking to create styles with author comments at WordPress? Communicating with the community is extremely important, the comment section helps you do that. However, by default, there is no distinguishing feature to highlight comments from authors at WordPress. This poses a serious problem for authors who want their presence to be known.

Like most design-related things, you'll need to style with custom CSS at WordPress. Adding CSS of any kind is easy to do at WordPress, won't require any coding knowledge before, but there are some benefits. Today, I will show you how to style author comments at WordPress with simple CSS code.

Why should authors comment?

Having a prominent author opinion is extremely popular because it displays direct communication between content creators and visitors. This makes the website seem more reliable, opening up the feedback that visitors are giving. Websites that don't communicate with fans often don't last very long.

Unfortunately, there's no distinguishing feature to separate ordinary visitors from other authors or employees, there's no way for people to see you. For example, it's easy for someone to create an account with the author's name and then pretend to be him in the comments.

Sometimes this is funny, it is quite bad if people start thinking that this author is the real deal. So you realize the importance by displaying comments from prominent employees in the comments section.

How to create author comment styles in WordPress


Today, I will show you how to style author comments at WordPress with simple CSS code. When adding any form of CSS to WordPress, you have a lot of design options. I always recommend that you search the CSS template you edit online and then use it on your own website when you're not comfortable writing code from scratch. There are tons of them, this tutorial will cover how to add any of them to your website.

Please keep in mind if you do not want to change the comment section another significant way is to just add the user role label next to the name. This will make it more noticeable without changing anything else.

See more: How to make money from the website

Add custom CSS to WordPress

The first step is to locate where you add custom CSS at WordPress. It's pretty easy, the same all the time, so you already know where it is if you've styled anything before.

In the admin panel on the left, click on the interface and then select custom options.


Here you can directly edit various design aspects at the website. Click additional CSS options.


Here you will see the text box where you added additional CSS. You can see the changes at the website. In this case, I will edit the comment section, so look for posts with author comments so you can see the changes.

Don't worry, no one will see you making changes on the website. Changes will only appear when you click the "Publish" button.

Now all that's left to do is actually create the type of author comment. Any code I show you the opportunity does not work if the interface uses different naming conventions. In most cases, this will work with most interfaces. The problem is that with the premium interface try to become too unique.

Spend time and surf the web with the various styling options you use at the website. I will present the most simple but effective way to express comments, striking effects. A commentary background that is highlighted or displays a different color is a sure way to stand out.

Copy and paste the following code into the additional CSS text box:

.comment-list .comment.bypostauthor,

.comment-list .children .comment.bypostauthor {

background: # 00FAAE;

border: 1px solid # bce8f1;

border-left: 5px solid # 088E3D;

box-shadow: inset 0 0 0 1px #fff;


This has a good amount of room to change. To get started, you'll want to change both the background color and the border color. You are using to help you do that. It helps you to sample all colors and then provide HTML color code.

You can also change or remove the border thickness. Just remember they should only have a few pixels.

Any code you find online is edited in the same way. Even if you are not sure what you are doing, changing the color code will help you identify the part you are editing. Just make sure any color you choose matches the website color palette.

After editing the code, press the "Publish" button to save the changes.


You have successfully learned how to style author comments at WordPress.

Make your comments stand out

Communicating with the community is essential to the growing website. Visitors will provide many helpful feedbacks you use to improve your website. This is very important for website development with the community. Making your comments stand out really helps you warn visitors that you are reading feedback and comments from them.

Nguyen Diep

My name is Nguyen Manh Cuong. I was born in a poor village in Ba Vi district, HA NOI province - windy and sunny land. Currently

Post a Comment

Previous Post Next Post

Đọc nhiều trong tuần

10 Grands Sites de modèles PowerPoint gratuit
10 Grands Sites de modèles PowerPoint gratuit

PowerPoint est toujours le roi quand il vient à un logiciel de présentation. Il a été autour depuis des siècles et chaque nouvelle version ajoute plus de fonctionnalités et rend …

17 best home jobs in 2020
17 best home jobs in 2020

Earning Money blog access_time April 13, 2020 hourglass_empty 28 least Read Finding work from home is easier thanks to high technology. Not only suitable for tho…

How much RAM is the iPhone 12 Pro?
How much RAM is the iPhone 12 Pro?

The RAM of the iPhone 12 Pro is up to 6GB.
Based on information in the latest Xcode beta from Hiraku, it can be said that both of Apple's new iPhone 12 Pro models have 6GB of R…


JavaScript is a programming language of HTML and WEB. It is lightweight and most commonly used as part of web pages, but their implementation allows Client-Side scripts to interac…