Highlight Your Comments
Once you start to receive comments on your blog you’re going to want to have your comments stand out above the crowd, after all, it is your site! You’ll notice here on Blogging Tips that if the author of the post leaves a comment on their post then it stands out with white text on a red background compared to all the other comments with black text on a white background. Whilst there are a couple of plugins out there that can do this job for you, they’re not really worth it (unless you really don’t want to delve into a bit of code!) as it only takes 1 line of code to do the job yourself.
The theory behind this is to identify whether the comment author matches the post author, and if they do then add an additional class to the comment wrap (usually a list item or div). Then you can style this class in addition to your standard comment styles.
You can identify the author using their name, email address or ID. Name is obviously not the most secure way to do it, as you will most likely have someone else with the same name as you comment on your site. Using the email address is a popular method too, but what happens when you change your email address? Your older comments will no longer be highlighted. You could do a search through the database to update these but why bother? Using the ID is the most accurate and secure method. To do this you need to open your comments.php template file. Locate the line which wraps the comment. In the Classic theme for example this is a list item as follows:
<?php foreach ($comments as $comment) : ?>
<li id="comment-<?php comment_ID() ?>">
This is at line 14/15 in the Classic comments.php theme file. So here we need to add an additional class to the list item to identify the Author’s post. So change the second line above to:
<li id="comment-<?php comment_ID() ?>"<?php if ($comment->user_id == get_the_author_ID()) echo ' class="mycomment"'; ?>>
This will now add a class of ‘mycomment’ to any list item that is your comment. You can then style the mycomment class in your CSS file to distinguish it. Don’t forget to put the mycomment class styles after the comment class styles, as you need the mycomment class to override the comment class.
MrCooker | May 25th, 2008 at 11:10 am #
You can also download a plugin for this called Highlight Author Comments
And yea, your comments should definitely stand out from the rest. Good point you made here Sarah.
Sarah (Post Author) | May 25th, 2008 at 12:36 pm #
Why use a plugin when all you need is one line of code? The plugin you’ve linked to, for example, has a quite a few lines of code in it (maybe 50?), when all you need is one line of PHP in your comments.php file and then one line of CSS code to define the class. Also that plugin compares the Author’s email, again not really a future proof method if you ever want to change your email address. Still, cheers for the link, as I should have linked to a couple myself.
Floral Rug | May 25th, 2008 at 1:56 pm #
Useful tips given here..I am sure to follow the tips..
David Cheong | May 26th, 2008 at 12:33 am #
Thanks for the advice, and tips. I agreed, but for some reason, my best guess is, some webmaster(new) i think they want to have the plugin and save time on coding part, that is another reason why they would use plugin.
Lastly, i still think this post is useful.
Thanks
David Cheong
http://www.twitter.com/davcheong
David Anderson | May 26th, 2008 at 4:07 am #
@ David Cheong
This is a series of articles on coding, so it’s not going to be of interest to your theoretical new webmaster that doesn’t want to do the coding themselves. And whether or not using a plugin that you need to install and configure is quicker is highly debatable anyway.
Jack | May 26th, 2008 at 12:46 pm #
Thanks for the useful tip. I am not too sure how hard it would be to code myself, but the plugin sure makes things easier.
Sarah (Post Author) | May 26th, 2008 at 1:09 pm #
Jack, it’s honestly not that hard to do. The list item with the comment ID as the id should only appear once in your comments.php file (unless it’s not coded correctly), so there is only one place where my code can go. One line of code to add in honestly isn’t that hard.
Take a backup of your comments.php file and give it a try. If in doubt, post up an excerpt of your code of where you think it should roughly go and I can tell you what to change
Remember, running a plugin adds more processing time to your site. Whilst it may be very slight, imagine suddenly getting a major influx of visitors in a short period of time. What would be better then? 50 lines of code to do the same job as 1 line of code? I know I’d rather go for the 1 line of code route
caTcode | May 27th, 2008 at 4:27 am #
So far i use plugin just for make my job easy
. I will try your tips, it sounds great play with my themes code..
Aaron at FullTiltBlogging.com | May 27th, 2008 at 11:18 am #
This post is featured in today in FullTiltBlogging.com’s Daily Blog Summary, a summary of the top 50 Make Money Online blogs. Get caught up in just 5 minutes a day.
Great Post.
Sarah (Post Author) | May 27th, 2008 at 12:26 pm #
Cheers for the link back Aaron
Aaron at FullTiltBlogging.com | May 27th, 2008 at 12:40 pm #
Glad you’re not “sore” (get it, that was a call back joke to my site…see I said you stick out like…oh, nevermind…if I have to explain it it’s not that funny…)
Nick | May 27th, 2008 at 6:10 pm #
I’ve noticed a few sites doing things like this but never really considered doing it myself. Now that the information is staring me in the face I guess I have no excuse not to!
Sarah (Post Author) | May 28th, 2008 at 1:57 am #
@Aaron - I got it
@Nick - Go for it! And if you get stuck leave a comment here or sign up to the Blogging Tips forum and ask away in there (where you’ll find me to)
gedet basumatary | May 28th, 2008 at 1:35 pm #
Hi Sarah, thanks for sharing this trick. Currently I use plugin to highlight the author comment.
I tried your method, put the code you mention in the 15th line but nothing happen.
and what does the last statement “You can then style the mycomment class in your CSS file to distinguish it.” means???
I really need to put this trick in my blog, would appreciate if you can help thoroughly.
Thanks
gedet basumatary
http://gedetbasumatary.com
Sarah (Post Author) | May 28th, 2008 at 3:41 pm #
Hi Gedet, can you post up the code you’ve used plus a bit of the surrounding code then I can see what you’ve done and spot any mistakes if there are any. Although, looking at your site code, it doesn’t look good to start with. You’ve got images in between list item tags, and your author highlight uses a surrounding div by the looks of things, and not a simple class.
As for my last statement. The code adds a class of ‘mycomment’ to the list item, so in your CSS you would then target your comments as the post author by styling li.mycomment in your stylesheet.
Behrad | May 29th, 2008 at 1:34 pm #
Hello Sara,
Nice article! I just tried to do what you told, but nothing happened.
I put the code you mention in my comment.php instead of the “old” code.
Then I put li.mycomment in my css and styled it, but then again nothing happend.
So what am I doing wrong? Can you help me please?
Sarah (Post Author) | May 29th, 2008 at 4:08 pm #
Hi Behrad, without seeing your comment PHP code (or the bit where you’ve put the code I posted above) I can’t say for certain why it’s not working however my guess would be that it’s because your comments are not structured using a list but divs. Looking at the source code of one of your posts, each comment is surrounded by a div eg
<div class="comment">This is what you would need to find in your comments.php file and then add
<?php if ($comment->user_id == get_the_author_ID()) echo ' mycomment'; ?>Before the second double quote. Then in your CSS stylesheet you would style div.mycomment.
If that doesn’t make sense then you’ll need to post up the relevant code from your comments.php file so that I can see it and then explain where to put the code.
Behrad | May 29th, 2008 at 4:30 pm #
Sarah,
I have tried what you wrote, but I can’t get it working..
I’ve added the code like this:
<div class=”comment”user_id == get_the_author_ID()) echo ‘ class=”mycomment”‘; ?>>
and then styled the div.mycomment (I copied my div.comment elements and only changed the background colour) like this:
div.mycomment {
clear: both;
width: 98%;
background: #73BE1E;
padding: 4px;
margin-bottom: 8px;
}
So, again, what am I doing wrong?
Here’s the relevant code of my comments.php:
–
<a name=”comment-” id=”comment-” >
comment_approved == ‘0′) : ?>
Thank you for your comment. Your comment is now awaiting moderation.
<a href=”" target=”_blank”> wrote on -
–
I hope this will help…
Behrad | May 29th, 2008 at 4:33 pm #
Hmmm..Sorry!
I see that I can’t insert the relevant code in my comment so I’ve put the relevant code here:
http://www.bioteck.net/comments.txt
Sarah (Post Author) | May 30th, 2008 at 2:10 am #
Behrad,
You need to change the second line of the code you posted in that text file from
<div class="comment">to
<div class="comment<?php if ($comment->user_id == get_the_author_ID()) echo ' mycomment'; ?>">Which should then give you the output for your own comments as
<div class="comment mycomment">As you’ve already got a class attribute in the div my original code has been altered slightly as you don’t need to output a second class attribute, just put the two classes in the same attribute.
Let me know if that works
Behrad | May 30th, 2008 at 4:38 am #
Sarah,
This doesn’t seem to work.. I’ve changed the second line to what you suggested but I don’t understand the second part….
Do I have to insert this line => ?
If so, where do I have to insert it..
And in my Stylesheet I still have this:
–
div.mycomment {
clear: both;
width: 98%;
background: #73BE1E;
padding: 4px;
margin-bottom: 8px;
}
–
Do I need to change this or what?
Thnx for your time and answers btw!
Sarah (Post Author) | May 30th, 2008 at 5:31 am #
Seems like we’ve fixed Behrad’s issue in that the new mycomment CSS class was being specified before the comment class CSS, which would mean the second class would override the first. I’ve updated the post to point this out too.
Got there in the end
Behrad | May 30th, 2008 at 5:46 am #
Yes, and a big thanx to Sarah for helping me out!!
gpcfzuomy rkqd | June 26th, 2008 at 1:20 pm #
kcsobalhn crzg ecsbznmv iumfst bamh refqxwjd tvndraz