Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If a post has a lot of comments, it's normal for the post author to want to pipe in on the discussion. WordPress appends a special class, by post author, to any comment posted by the post author. We can use this class to apply styling to the author comments only. And here I'm going to add a gray background and some different spacing around just author comments. To see how this works, I first need to make myself the author of the template comments post. Then I'll leave some comments so I can see how they work in different scenarios.
So here, I'm going to go and click on the Edit button. So I can go to the editor, and I'll go to Screen Options, and find Author. And I'll scroll down and then set the author to myself. Now I'm going to go back and view the post, and then I'm going to scroll down and leave a couple of responses. So, I'll respond to this top level comment here. This is one of my responses. And I'll also respond to lower level comments. Maybe the third level comment here, and post a comment.
Because I want to make sure that my responses are styled properly and don't interfere with other elements. Now I can take a look at the markup for these responses I created. And you'll see right here at the top. The list item now has the class bypostauthor which means I can target just this item. If we look back at the style.css file and the comment section, it'll remember that the stylesheet that came with Underscores had two classes already defined. Comment-content a and also bypostauthor.
And now I'm going to use the bypostauthor rule, to target the post author. However, I'm going to make a change to this selector here. And I'll explain why. Because if you look at the markup, you'll see the bypostauthor class applies to the list item. And if I scroll up and select a different list item, for instance this one, you'll see that this list item. Wraps around all of the sub-items within my list, as well. So, if I just apply a style directly to bypostauthor, that style might be inherited by all the other sub-items within that list.
So, all the responses. What I want to do is target just bypostauthor, and nothing else. And, I'll do that, again, by using one of these arrows. So, this particular rule, in our code snippets, targets any class that says bypostauthor, and only the first comment body within it. So I'll copy out that rule, then replace this bypostauthor here. So now I'm grabbing only the comment body within the bypostauthor class. Setting the position to relative. Setting the padding to 1 em, so that we get padding around the content.
Setting the margin bottom to 2 ems. And then setting a background color and taking away the border at the bottom. All of this will result in a very nice design in my theme. So now I can reload. And you'll see each of the author comments now has a nice gray box around it so that it's clearly separated from rest of the content. Now this is a purely stylistic way of highlighting a post author. Some theme developers like to add wording in, to say this is the post author.
Or they may add an icon or something else, and you can do that too, using the exact same technique by simply targeting the bypostauthor class.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.