Are you looking for a way to style author comments in WordPress? Communicating with your community is extremely important and the comments section allows you to do just that. However, by default, there are no distinguishable features to highlight author comments in WordPress. This poses a serious issue for authors who want to make their presence known.
Like most things design related, you will need to style them with custom CSS in WordPress. Adding CSS of any kind is very easy to do in WordPress and will not require any previous coding knowledge, but having some does help. Today, I will demonstrate how to style author comments in WordPress using simple CSS code.
Why Should Author Comments Stand Out
Having author comments stand out is extremely popular because it showcases direct communication between the content creator and the visitor. This makes your website seem more trustworthy and open to feedback that visitors are giving. Websites that do not communicate with their fanbases usually do not last long.
Unfortunately, with no distinguishable feature to separate normal visitors from authors and other staff members, there is no way to let people see you. For example, it is very easy for someone to create an account with the author’s name and pretend to be him in the comments section.
While sometimes this is comical, it can be pretty bad if people start thinking these authors are the real deal. Thus, you realize how important making staff member comments stand out in your comments section.
How to Style Author Comments in WordPress
Today, I will demonstrate how to style author comments in WordPress using simple CSS code. When adding any form of CSS to WordPress, you have a lot of design options. I always recommend looking online for CSS templates that you can edit and use for your own website when you are not comfortable coding from scratch. There are tons of them out there and this tutorial will cover how to add any of them to your website.
Keep in mind if you do not want to change the comments section significantly another alternative is to just add a user role label next to the name. This will make it slightly more noticeable without changing anything else.
Adding Custom CSS to WordPress
The first step is actually locating where you can add custom CSS in WordPress. It’s quite easy and is the same every time, so you may already know where it is if you have styled anything previously.
On the left-hand admin panel, click on Appearance and select the Customize option.
Here you can directly edit the various design aspects of your website. Click on the Additional CSS option.
Here you will see a text box where you can add additional CSS. You can view the changes on your website. In this case, we will be editing the comments section, so find a post that has a comment by an author so you can see the changes.
Don’t worry, no one will see you making changes on your website. The changes will only appear when you click on the “Publish” button.
Styling Your Author Comments
Now all that’s left to do is to actually style the author comments. Any code I show you has a chance of not working if your theme uses different naming conventions. In most cases, this will work for most themes. The issue may be with premium themes that try to be a little too unique.
Take some time and surf the web for different styling option you can use on your website. I will demonstrate one of the most simple but effective ways of showcasing comments, a highlight effect. Having your comments background color be highlighted or displaying a different color is a surefire way to stand out.
Copy and paste the following code into the additional CSS text box:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ].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;
}[/ht_message]
This has a a good amount of room for change. For starters you will want to change both the background color and border color. You can use HTMLcolorcodes.com to help you do that. It allows you to sample all of the possible colors and provides the HTML color code.
You can also change or remove how thick the borders are. Just remember they should only be a few pixels at most.
Any code you find online can be edited in a similar fashion. Even if your not sure what you are doing, changing a color code will help you identify what part you are editing. Just make sure that any color you choose matches your website’s color scheme.
Once you are done editing the code, click on the “Publish” button to save the changes.
Congratulations, you have successfully learned how to style author comments in WordPress.
Make Your Comments Stand Out
Communication with your community is essential for a growing website. Your visitors will give plenty of useful feedback that you can use to improve your website. This is critical for growing your website and community. Making your comments stand out can really help you alert your visitors that you are reading their feedback and comments. Generally, when visitors know that their comments are being read by content creators, they are more likely to leave them.
What design have you chosen for your author comments? How easy have you found adding custom CSS in WordPress?