Adding a label to a comment made by the post author

Label next to post author comment

The comments section on your posts is probably the most important place where you interact with your site’s visitors. Sure, you might talk to them over email or even a forum if you have one but in most cases it’s the comments area you’ll first get in touch with them.

What this article aims to do is show you an easy way that you, the post author, can stand out in the comments section. To achieve this I’m going to show you how you can add a label next to your name when you post a comment. That label can say anything you like, like Author, Editor etc.

How can you add a label next to your name in the comments form?

We’re just going to use a bit of CSS. After that you can adjust that piece of CSS so you can style the label next to your author name anyway you’d like. It is important to remember that the following code will only work with themes that make use of the fn class, though it can be adapted to any theme.

We’re going to start with a comment that looks like this (from the Twentyseventeen demo content):

Adding a label next to the comment author's name

And add a label next to the post author’s name to make it look like this:

Adding a label next to the comment author's name

Here is the code we’re using for this:

.bypostauthor > [class*="comment"] .fn::after {
  content: 'Editor';
  font-size: 11px;
  margin-left: 10px;
  text-transform: uppercase;
  background-color: #333;
  color: #fff;
  font-weight: 400;
  padding: 2px 5px;
}

Where it says Editor, you can replace with any other words you want, just make sure you keep the ticks. After that it’s just styling that you can adjust as needed to make your label show up as nicely as possible next to your comment author’s name.

Some more examples of styling the post author label

This one just wraps the word Editor in a border:

.bypostauthor > [class*="comment"] .fn::after {
  content: 'Editor';
  font-size: 11px;
  margin-left: 10px;
  padding: 2px 5px;
  border: 2px solid;
}

And with this piece of CSS you can make the post author label more colorful and with a slight 3D effect:

.bypostauthor > [class*="comment"] .fn::after {
  content: 'Author';
  font-size: 11px;
  margin-left: 10px;
  text-transform: uppercase;
  background-color: #e85382;
  color: #fff;
  font-weight: 400;
  padding: 2px 5px;
  letter-spacing: 2px;
  box-shadow: 0 2px 10px -2px #6b1a34;
  border-radius: 3px;
}

If you need help adapting these codes to your theme, feel free to ask.

Subscribe for helpful tips and release info.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.