How To Style Author’s Comments in WordPress Without a Plugin
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
/**************************************************************
* @Author: Boutros AbiChedid
* @Date: December 20, 2011
* @Websites: blueoliveonline.com ; bacsoftwareconsulting.com
* @Desc: Simple Background Highlighting for Author's Comments.
***************************************************************/
/* Author Background Highlighting For Linear Comments */
.commentlist > li.bypostauthor {
background: #f1f1ea !important;
color: inherit;
}
/* Author Background Highlighting For Threaded Comments */
.commentlist .children > li.bypostauthor > div {
background: #f1f1ea !important;
color: inherit;
}
CODE-1 Notes:
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.
/************************************************************
* @Author: Boutros AbiChedid
* @Date: December 20, 2011
* @Websites: blueoliveonline.com ; bacsoftwareconsulting.com
* @Description: More Styling Options for Author's Comments.
* Case1: Works on WordPress Themes that display the comment's
* metadata (date/time) as a text only and NOT as a link.
*************************************************************/
/*********** For LINEAR Commenting Format ***********/
/* Style the Author's Comment text*/
.commentlist > li.bypostauthor {
background: inherit;
color: #98293d;
}
/* Style the Author's Comment Metadata link (if defined in WP dashboard) */
.commentlist > li.bypostauthor .comment-meta a {
color:#B97540;
background-color:inherit;
}
.commentlist > li.bypostauthor .comment-meta a:hover {
color:#000;
background-color:inherit;
}
/* Style the Author's Comment Metadata unlinked text */
.commentlist .children > li.bypostauthor > div .comment-meta span {
color:#999;
background-color:inherit;
}
/******* For THREADED (NESTED) Commenting Format *******/
/* Style the Author's Comment text */
.commentlist .children > li.bypostauthor > div {
background: inherit;
color: #98293d;
}
/* Style the Author's Comment Metadata link (if defined in WP dashboard) */
.commentlist .children > li.bypostauthor > div .comment-meta a {
color:#B97540;
background-color:inherit;
}
.commentlist .children > li.bypostauthor > div .comment-meta a:hover {
color:#000;
background-color:inherit;
}
/* Style the Author's Comment Metadata unlinked text */
.commentlist .children > li.bypostauthor > div .comment-meta span {
color:#999;
background-color:inherit;
}
CODE-2 Notes:
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.
/****************************************************************
* @Author: Boutros AbiChedid
* @Date: December 20, 2011
* @Websites: blueoliveonline.com ; bacsoftwareconsulting.com
* @Description: More Styling Options for the Author's Comments.
* Case2: For WordPress Themes that display the comment's metadata
* (date/time) as a link.
*****************************************************************/
/*********** For LINEAR Commenting Format ***********/
/* Style the Author's Comment text*/
.commentlist > li.bypostauthor {
background: inherit;
color: #98293d;
}
/* Style the Author's Comment Metadata link (date/time of comment)*/
.commentlist > li.bypostauthor .comment-meta a {
color:#B97540;
background-color:inherit;
}
.commentlist > li.bypostauthor .comment-meta a:hover {
color:#000;
background-color:inherit;
}
/* Style the Author's Name hyperlink (if defined in WordPress dashboard) */
.commentlist > li.bypostauthor .comment-author a {
font-weight: bold;
color: #444;
background-color:inherit;
}
.commentlist > li.bypostauthor .comment-author a:hover {
background-color: inherit;
color: #C40;
text-decoration: underline;
}
/******* For THREADED (NESTED) Commenting Format *******/
/* Style the Author's Comment text */
.commentlist .children > li.bypostauthor > div {
background: inherit;
color: #98293d;
}
/* Style the Author's Comment Metadata link (date/time of comment)*/
.commentlist .children > li.bypostauthor > div .comment-meta a {
color:#B97540;
background-color:inherit;
}
.commentlist .children > li.bypostauthor > div .comment-meta a:hover {
color:#000;
background-color:inherit;
}
/* Style the Author's Name link (if defined in the WordPress dashboard) */
.commentlist .children > li.bypostauthor > div .comment-author a {
font-weight: bold;
color: #444;
background-color:inherit;
}
.commentlist .children > li.bypostauthor > div .comment-author a:hover {
background-color: inherit;
color: #C40;
text-decoration: underline;
}
CODE-3 Notes:
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
/************************************************************
* @Author: Boutros AbiChedid
* @Date: December 20, 2011
* @Websites: blueoliveonline.com ; bacsoftwareconsulting.com
* @Description: Simple BUT NOT Advisable Styling Option for
* Author's Comments.
* Works For Linear Commenting Format.
* Partially Works/Doesn't work for Threaded Commenting Format.
*************************************************************/
.bypostauthor{
background-color:#f6f6f2;
color:#98293d;
}
CODE-4 Notes:
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.
Conclusion
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.
hi, i need a beautiful, eye-catching style for the comments on my forum,
just the style, not any programming code, any suggestion??
The correct css to style only the comments by the author, with threaded comments, without highlinght also the children comments of author’s comment:
.commentlist li.bypostauthor > div.comment-content div.comment-entry { background: #FFB; }Hi! I was wondering on how to change the style of the comment author’s name on the comment. If you check any comment on my site, you’ll see that the names are in blue color and Italics style …how can I change this? I want to change it for all authors.
Thanks
Hi Raaj;
For example, If you want to change the color of all author links in your comments, then add the below code to your theme’s “style.css” file.
Choose whatever color you want.
div.comment-info cite.fn a.url { color:#B97540; background-color:inherit; }I am not sure what theme you are using, as in some themes you can change the settings in your dashboard.
let me know if you have any questions. Thanks.
Thanks for the reply! But that doesn’t seem to work! The current style is ‘Blue Color & Italics Font’ (have a look at http://raajtram.com/the-real-secret-behind-ctrl-alt-delete/#comment-361). I want to change it normal (unlike Italics) & Black Color for the Name…and any other style for the ‘Keywordluv’ Keyword. Is that something you can help me with? I’ll really appreciate your help! Thanks :)
Hi Raaj;
Try this (it applies to linked and unlinked authors + KeywordLuv link). If it does not work, you have other styles that are overwriting it. Plus the KeywordLuv plugin might have its own styles:
div.comment-info cite.fn { color:#000 !important; background-color:inherit; font-style:normal !important; }If you need more help, then I need the link to your theme (so that I can install it and try it out (but in this case you need to donate for this blog first.)
Thanks.
Boutros.
Thanks Boutros! It worked! You can check out the comments style now! Thanks so much!
thanks for the usefull information.
Many thanks for this – I was wondering how it could be done. My previous attempt highlighted all the replies to a comment by the author as well, now I know why!
One small point – I had to use .comments instead of .commentlist – I’m using WordPress 3.3.2, I don’t know if that makes any difference.
Thanks Big Dave.
I haven’t tested the code on WP 3.3.2. Also sometimes your theme plays a role.
Thanks for your tip, hopefully it will help others along the way.
Boutros.
I’m using Sandbox 1.6.2 and it doesn’t add a class to the list (<ol>) for the main comment list – I’ve just tried it in another theme (Twenty Eleven) and it does.
I know what you mean, it is theme related. When I wrote the code, I had a hard time finding common ground between all themes.
I have been looking for a solution everywhere which you mentioned in CODE -4.
whenever anyone replies to my comment then his comment is also highlighted with authors background.
I used CODE 1 but that is also having problems. If I reply to anyone’s comment then my comment is shown without admin background. It is not shown as you have shown in the image.
Pls help.
see my page as an example :
http://techeverytime.com/2012/02/password-protect-folders-without-installing-any-software/
Regards
Hi Ankur,
That could be due to how your theme is coded, or you missed something when implementing my code. CODE-4 IS NOT THE RIGHT one to use.
What WordPress theme are you using? If it’s free, share the link so that I can test your theme on my blog.
If I have to test your theme and make it work, then a small donation to my Paypal account (button at the top) would be very much appreciated.
“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.”
Requirements For the Author´s Comment Stying
WordPress adds the CSS Class selector .bypostauthor only if you replied to comments, while logged in to 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.
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.
Boutros.