In this tutorial, I will show you how to Highlight and Style Author’s Comments on WordPress Posts (or Pages) without a plugin. If your WordPress theme, does not already style the Author´s comments differently from your visitors comments, and you like to know how to do that, then this tutorial will show you the way, along with several examples and scenarios and all the details you need.
If you are the post´s author and you want to distinctively style your comments from the rest, this tutorial will show you the way. All what you need to is to add a snippet of CSS styling in your theme´s style.css file.
It is always satisfying when your post attracts a lot of comments. However, the problem is, it can be difficult to distinguish your comments, the post´s author, from the rest of the commenters. Visitors are generally more interested in what the author has to say, so a lot of readers will be scanning through the comment section in search of your comments.
There are probably plugins that add the Author´s Comment Highlighting to your blog, but you don´t need a plugin for such a simple task.
Many people, including myself, want to differentiate the author´s comments from the rest of commenters. This is where this tutorial helps.
Default Comments With No Difference in Author´s Styling | Image1 :: Image2
The images below show a small comment section for Threaded and Linear commenting Formats. As you can see the Author´s comments are NOT styled differently from the rest of the comments. Unfortunately, this is the case on many WordPress themes.
In a longer list of comments it would be difficult to pick out the author at first glance. This tutorial will show you how to Style Author´s comments regardless of the commenting format you use on your Blog.
Types of Commenting Formats in WordPress
There are 2 different types of commenting formats in WordPress: Linear Format where all comments are shown in a date order, regardless of who may have specifically replied to whom, and Threaded(Nested)Format which aids the user by visually grouping messages. In a Threaded or Nested mode, there can be a hierarchy of comments displayed where it is possible for users to comment on comments. For wordPress 2.7 and newer, Threaded Comments has to be activated in the dashboard as discussed in my previous tutorial, How To Change WordPress Comments From Linear to Threaded (Nested) Format, as shown in the image below.
How To Setup Threaded (Nested) Comments in WordPress
Login to your WordPress dashboard. In your Administration Screens, and on the Left Panel, go to Settings -> Discussion as shown in the image below. Select Enable threaded (nested) comments …, and choose the level of depth to allow.
In WordPress, Threaded comments are optional and default to OFF (Checkbox unchecked). By default, WordPress displays the Linear Commenting Format.
Requirements For the Author´s Comment Stying
This tutorial will show you how to automatically display comments made by a post´s author in a distinctive style. However, for this code to work, you need to be logged in to your WordPress dashboard. This is understandably a WordPress shortcoming and not my Code. What?
WordPress adds the CSS Class selector .bypostauthor only if you replied to comments, while logged in, from your WordPress dashboard or if you replied from another window than the dashboard but using the same Web browser that you are logged in from.
Even if you are the posts´s author and you replied to comments while you are logged Off from your WordPress dashboard, or you are Logged-in in browser X and you replied from browser Y, WordPress will not add the CSS Class selector .bypostauthor as part of the code, and thus the author´s comments will not be styled.
In short, WordPress does not know who you are unless you are Logged-in to the dashboard. This is the only way that WordPress can determine if you are the post´s author.
How To Separately Style Author´s Comments in WordPress | style.css
Go to your active theme´s folder and open style.css file with your preferred editor and add (copy and paste) any of the following code BLOCKS to your CSS file.
Once finished, don´t forget to save your modified style.css file and upload it to your server. This is always a given step that I usually don´t mention.
I am going to give you several code examples along with Screenshot results. Choose the Example (Code Block) you like for your theme.
Example1 :: Simple Author´s Background Comment Highlighting
If you just want to add a background highlighting for the post author´s comment, then use CODE-1 block.
CODE-1 :: Simple Author’s Background Comment Highlighting
Feel free to modify the code to fit your blog´s design.
CODE-1 is tested to work, regardless of what commenting format you use for your WordPress blog, be it Linear or Threaded.
The !important declaration provides a way to give the CSS value more weight. It tells the browser, when it is loading CSS that this particular declaration should override all other like declarations in the various CSS files, including embedded styles. The only one it will not override is an inline CSS declaration.
With all that said, I added the !important declaration to the rule on line 10 and line 16 for CODE-1, just in case to override any other defult rules in your theme. You could certainly try the code first without the !important declaration, and if works without it then that´s fine.
The CSS selector on Line 9 of the code, can be replaced with just .bypostauthor, which works fine for Linear comments format. However; it will not properly work for Threaded comments especially when there is a reply to an author´s comment. In this case, both the author and the replier, are highlighted. More on that later in (CODE-4). Also I like to be more CSS selector specific in case the .bypostauthor class is (or will be) used somewhere else in the code.
CODE-1 is CSS valid.
CODE-1 is tested to display properly with all major browsers. IE7/IE8/IE9, Safari 5 (for Windows), Google Chrome 15, Opera 11.5 and Mozilla Firefox 9. The code was NOT tested for IE6 (and I don´t care if it doesn´t work).
CODE-1 works on WordPress 2.7 and newer. But I hope that you will upgrade to the latest version.
Results of CODE-1 (Example1) | Image3 :: Image4
The following picture (Image1) shows the Author´s simple background highlighting for the threaded WordPress Commenting format:
The following picture (Image2) shows the Author´s simple background highlighting for the Linear WordPress Commenting format:
Example2 :: More Styling Options For the Author´s Comments | Case1
If you want to have more styling options for the Author´s comments, use CODE-2 block.
CODE-2 block works on WordPress themes that display the Comment´s Metadata (date and time) as a text only and NOT as a link.
CODE-2 :: More Styling Options for Author´s Comments | Case1
Note: To scroll within the code: You can also click on the code window and use your keyboard´s arrow keys.
You could remove the background: inherit; declaration but that would cause CSS validation warning. However, in some cases you might have to remove it or set your background color accordingly.
If you have good knowledge with CSS, feel free to modify CODE-2 to fit the design of your blog.
CODE-2 is tested to work properly regardless of what commenting format you use for your blog.
CODE-2 is CSS valid.
CODE-2 is tested to display properly with all major browsers. IE7/IE8/IE9, Safari 5 (for Windows), Google Chrome 15, Opera 11.5 and Mozilla Firefox 9. The code was NOT tested for IE6 (and I don´t care if it doesn´t work).
Other themes display the Comment metadata (date/time of the comment) as a link instead of text, in this case you need to style it differently. More on that in Example3. It is always best to check the source code and see what CSS class selector to target.
It is not possible to find common styling for the comment´s section on all wordPress themes, but at least you have an excellent starting point. CODE-2 might need more tweaking for your specific theme.
Results of CODE-2 (Example2) | Image5 :: Image6
The following picture (Image5) shows more Styling Options for the Author´s Comments using the threaded Comment format. This applies to WordPress themes that display the Comment metadata (date and time) as a text only and NOT as a link:
The following picture (Image6) shows More Styling Options for Author´s Comments using the Linear Comment format. This applies to WordPress themes that display the Comment metadata (date and time) as a text only and NOT as a link:
Example3 :: More Styling Options for the Author´s Comments | Case2
If your WordPress Theme display the Comments Metadata (date and time) as a link, then use CODE-3 block below to add more specific styling options for the Author´s comments.
CODE-3 :: More Styling Options for Author´s Comments | Case2
Note: To scroll within the code: You can also click on the code window and use your keyboard´s arrow keys.
Remember: Depending on your theme, you can use either CODE-2 OR CODE-3, but NOT both.
If you have good knowledge with CSS, feel free to modify CODE-3 to fit the design of your blog.
CODE-3 is tested to work properly regardless of what commenting format you use for your blog.
CODE-3 is CSS valid.
CODE-3 is tested to display properly with all major browsers. IE7/IE8/IE9, Safari 5 (for Windows), Google Chrome 15, Opera 11.5 and Mozilla Firefox 9. The code was NOT tested for IE6 (and I don´t care if it does not work).
CODE-3 might need more tweaking for your specific theme.
Results of CODE-3 (Example3) | Image7 :: Image8
The following picture (Image7) shows more styling Options for the Author´s Comments using the threaded Comment format. This applies to WordPress themes that display the Comment metadata (date and time) as a link:
The following picture (Image8) shows more Styling Options for Author´s Comments using Linear Comment format. This applies to WordPress themes that display the Comment metadata (date and time) as a link:
Example4 :: Simple BUT NOT Advisable Styling for Author´s Comments
CODE-4 block is a simple option for styling the Author´s comments that work fine for linear Commenting format, but it partially work/doesn’t work for Threaded commenting format.
CODE-4 :: Simple BUT NOT Advisable Styling for Author´s Comments
If you are using the Linear Commenting format on your blog and you intend to keep it this way, and you never want to switch to the Threaded Commenting format, then this simple code works fine for you.
However, for Threaded (Nested) comments, CODE-4 partially works. It works in most cases, except when a user decides to reply to the comments of the post´s author. In this case, both comments of the post´s author and the user who replied to the author, will be styled the same. To resolve this issue you need to be more CSS selector specific.
I personally will not use CODE-4 block on any WordPress theme, since it does not cover all available commenting formats. I like complete solutions and not partial ones.
Results of CODE-4 (Example4) | Image9 :: Image10
The following picture (Image9) shows the result of adding CODE-4 to the WordPress theme´s style.css file for the case of threaded Commenting format. Notice how the author´s comment and the comment of a user replying to the author´s are both styled the same.
The reason the user´s name “jerry” is red, since it is just a text and not associated with a link.
The following picture (Image10) shows the result of adding CODE-4 to WordPress theme´s style.css file. Notice that the code works fine for a Linear Comments format, since you can´t reply to the author´s comments.
In this tutorial, I showed you several examples on how to style the Author´s Comments differently from the rest, regardless of the commenting format you use, and without the need of a plugin. This would be very useful, especially if you get lots of comments on your blog.
Your Turn to Talk
How easy did you find this tutorial to implement? Do you have something to add or anything else to say? If so, please share your opinion or questions in the comments section. Your opinion matters, unless it is a Spam.