Comments are the backbone of a blog. For a blogger, there are few things better than a nice, long stream of comments. As a reader, flicking through such streams can be as enlightening as reading the post itself. It can also be useful to easily spot the author’s comments, to read what they in particular had to say.
As an example, here on Pro Blog Design, each of my own comments looks slightly different to the adjacent comments. Achieving the same effect on your blog is easily done.
The method described here is specifically for WordPress users. Movable Type users should refer to this article, and TypePad users to this one.
Editing Your Comments Template
The code you’re looking to edit will be in comments.php. Search for the following line,
<?php foreach ($comments as $comment) : ?>
After it, paste the following (Remember to edit in your own email address!):
<?php
$PostAuthor = false;
if($comment->comment_author_email == get_the_author_email()) {
$PostAuthor = true;}
elseif($comment->comment_author_email == 'your@email.com') {
$PostAuthor = true;}
?>
Now we can use PHP to add extra code to comments written by the blog author. Depending on the theme you are using, the comments area coding will look very different.
To demonstrate how the code may be used, I have taken the comments loop from the default theme, and added the necessary line to it. Have a look at it, and once you understand the principle, you can apply it to your own theme in whatever way you like.
<li <?php if($PostAuthor) {echo "class='authorcomment' ";} ?><?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />
<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit',' ',''); ?></small>
<?php comment_text() ?>
</li>
The above will add the class=’authorcomment’ to any comments written by the post author. You can then use CSS to style this class differently.
It will work on all comments using your email address. This means that you don’t have to be logged in to to leave a comment with the correct design.
Furthermore, when some bloggers allow others to guest post on their blog, they create an account for them in the blog itself. The above code will style those guest bloggers comments differently on the post they wrote.
Custom Search
Mason from SmallFuel Marketing (4 comments)13 September 07
Hi Michael,
Great article – a different style for author comments is an excellent thing for a blog. Unfortunately, I still haven’t had the time to code it in to mine (I’m using a different platform, ExpressionEngine).
Now, I’m curious, what do you think of nested comments?
– Mason
Nuts & Milk (12 comments)13 September 07
Hello Michael,
Do you have any idea how can i achieve this on a Blogger blog?
doug m (3 comments)13 September 07
hey Michael, i was just looking into how to accomplish this and i glanced at my feeds and here you are, with exactly what i wanted to know. great post
Adnan (6 comments)13 September 07
Great article Michael. I requested author styling in my redesign, and now each of my comments has a light blue background, so readers can distinguish and pick out my comments if need be.
Michael Martin (1319 comments)13 September 07
Mason – I’m not really bothered about nested comments one way or the other. I think they work well if the blogger is replying to every comment, but even then, it may get excessive (For instance, instead of getting all my replies here into one comment, I’d end up with 4 comments!). Plus, some novice/lazy users just click the first “reply to this comment” button they see and end up confusing it all.
Nuts & Milk – A bit of a search turned up this guide but I’m afraid I can’t vouch for it. It may or may not work?
doug – Glad you found it useful!
Adnan – I noticed the effect on your blog. With the red numbered box as well, they’re very easy to spot.
Tay (2 comments)13 September 07
Fantastic, helpful article. This is something I’ve been meaning to look into doing for my blog and then I saw your post in my Google Reader. I’ll definitely give it a shot after reading this article.
Marco Ruelicke.net (43 comments)13 September 07
Thanks for sharing this
I just added it to my blog, but I tweaked your code a bit. I’m using a switch instead of the “if(…){…}elseif(…){…}” because as far as I know the switch works a little bit faster in this case
David Airey (55 comments)13 September 07
Nice speed Michael!
I’ll be saving this one for later. Cheers!
Michael Martin (1319 comments)13 September 07
Tay – Glad it helped. Let me know how you get on!
Marco – The difference in speed either way in just a few lines of code like that would be minute. if statements are good in code examples like this because they are easy to understand. If an interested reader takes a look at how the code is written, they will quickly get to grips with what is going on. Little things like that are a good way of building up enough confidence to make basic tweaks to PHP.
Michael Martin (1319 comments)13 September 07
David – No problem. Seems like quite a few people had been wondering the same thing you had.
ses5909 (8 comments)13 September 07
Michael, that is brilliant! I have seen it done before, but I just never really thought about doing it. I’ll add it to my TaDa List
Michael Martin (1319 comments)13 September 07
Glad it helped Sara! And if it’s in the TaDa list, you’ve no excuse not to have it done when I remember to go have a wee look next week.
sarahG (15 comments)13 September 07
There’s a plugin called author-highlight that can do this for WordPress too. Although I do vaguely remember having to edit the comments template to add the stylesheet class, but nothing too hardcode I don’t think.
Nice post though. I used to have my comments highlighted but I’ve not bothered since switching themes. Something I should add back in I guess
Michael Martin (1319 comments)13 September 07
Sarah – For something which can be done as easily as above, I think a plugin might be overkill.
And hehe – It is a nice feature to have, but definitely not essential (And your use of avatars lessens the need for it even further!)
Floyd Craig (2 comments)13 September 07
Thanks for the helpful info!
Michael Martin (1319 comments)13 September 07
No problem Floyd – Hope it was helpful.
Steven Snell (24 comments)13 September 07
Michael,
I almost used that picture for one of my posts 2 days ago. I even downloaded and saved it and then I wound up using a different one. Just thought it was funny to see that picture here.
Michael Martin (1319 comments)13 September 07
lol Steven – I guess that’s the one drawback to using such a popular free image site.
Jenny (5 comments)14 September 07
That’s another way to do it. I think I’ll try this way on my new template that I am working on.
Karen Zara (4 comments)14 September 07
Thank you for the tip. I still couldn’t decide whether I really should apply this to my privately hosted WordPress blogs or not. But if I decide to go ahead, now I know where to find the needed codes.
On a sidenote, I was also undecided about using nested comments or not, but after reading your reply to Mason’s question I’ve made my mind.
Laarni (4 comments)14 September 07
Thanks for the tip but I have a question, what if my blog is a group blog where I have co-authors. Is this okay to use it?
Dave S. (15 comments)14 September 07
I’m a little confused. First, you set $PostAuthor to either true or false. Then later, you test with if($isByAuthor).
Shouldn’t that be if($PostAuthor)?
Michael Martin (1319 comments)14 September 07
Jenny – Cool.
Karen – Glad you found the comments useful.
Laarni – Yep, you just need to adjust it to include the other authors. You could do that by repeating the bottom 2 lines, or by changing the original line about the author to something like this:
Dave – Yes, thanks! Fixed that now. That’s what you get for copying and pasting that line from your own theme. Woops. xD
Deron Sizemore (34 comments)14 September 07
I can’t comment on the wordpress part of it in your example, as I don’t use wordpress, but I agree very much so with the authors comments being a different style. Makes it much easier to pick out when the author replies to comments (if they do at all that is).
Uzair (3 comments)16 September 07
Can you include some tips on Blogger blogs.
Michael Martin (1319 comments)16 September 07
Uzair – Sure. Blogger is a little more difficult to work with usually (At least, for a WP-addict it might be! xD ). For styling author comments, I did find this link, but I’ve never tried it before so no guarantees.
Jermayn Parker (2 comments)20 September 07
Thanks for that, it does help a lot to see a comment by the author and it also looks nice.
Will have to bookmark this so I can reference it when I redesign my current blog and for future reference, thanks again.
Michael Martin (1319 comments)20 September 07
Glad it was of help Jermayn!
Madhur Kapoor (12 comments)23 September 07
Nice article buddy .
Jonathan Kok (1 comments)24 September 07
I’ll take some time out to see if I can implement it in the next few days.
This post definitely goes in my top few for the DailyBlogTips Contest.
Michael Martin (1319 comments)24 September 07
Glad you liked it Madhur.
Hope it helps Jonathan, and thanks!
Pinyo (5 comments)24 September 07
Thank you. I did this on my blog and I think it looks great.
Michael Martin (1319 comments)24 September 07
No problem Pinyo. Glad it worked out for you.
Brian Purkiss (24 comments)30 September 07
THANK YOU SO MUCH!!!!
I am currently working on a custom design for my blog (as we as a totall re-vamp), and this is something that I have been wanting to work into the new site.
Now I know how! Thanks so much!
Michael Martin (1319 comments)30 September 07
No problem. Best of luck with the new design!
michael mckenna (1 comments)1 October 07
hi,
how do I work my side bar. I am new at this blogging. I have been trying to figure out how to put banners,photo’s and other info on my sidebar.
thanks,
mickmck707
Michael Martin (1319 comments)1 October 07
Hey Michael – Sorry that I can’t answer that all in this comment. Each thing you want to do will be slightly different, and on top of that, I haven’t tried it all out on WordPress.com before.
They have an FAQ section on their web site. Have you tried looking there for help?
Anna Vester (2 comments)1 November 07
Hey Michael, thanks for your excellent explanations. I have been thinking about implementing this on my blog someday, and today fortunately I have stumbled over the link to this post on David Airey’s blog.
So today is the day!
Thanks again,
Anna
Michael Martin (1319 comments)1 November 07
No problem Anna. I’ll have to thank David again for that link now.
Ian (2 comments)2 November 07
Thanks for the great post and examples. I also found it through David Airey’s blog and have just added the code.
All working fine
Regards,
Ian
Michael Martin (1319 comments)2 November 07
Glad to hear it’s working Ian.
bakkouz (1 comments)18 November 07
So why don’t you implement this on your own blog?
Michael Martin (1319 comments)18 November 07
I have. Check out the blue lines inside my comments.
DoZ (1 comments)14 January 08
If someone will appreciate it, I’ve found my own way, using 2 lines of Jquery’s code:http://www.dozarte.com/wordpress/en/2008/01/14/come-evidenziare-i-commenti-dellautore/
lilyruth (2 comments)7 March 08
IN another post I left a comment letting you know I like your new sidebar and I asked you for the code to change my comment layout but then I continue reading and read this article and saw the code is posted here so you no longer need to send it to me and Im sorry for not reading the rest of the article till afer I sent the other comment. Thanks for the code. I really enjoyed visiting your site its great.
Omition (2 comments)10 May 08
This is a great article, but it brings up the question of how much should you separate your comments from everybody else’s. You chose to only a border, which lets you recognize it, but I notice your comments by the avatar rather than the styling differences. On other blogs, people completely style the author comments differently, using a different background color and font color.
Is that just a personal style choice, or should there be a limit to how much you style your comments differently?
Michael Martin (1319 comments)24 June 08
Omition,
That’s a great question, and I really wish I’d seen it at the time to answer it.
Avatars are the best way of recognizing a person I think, because once you recognize the avatar on the blogger’s blog, you’re going to start recognizing them everywhere you see it!
However, not everyone has a distinctive avatar. You and I are using our blog logos (At least, I take it that was your logo at the time? Sorry!), so it’s fairly easy for someone to recognize that avatar on the blogger’s blog. But if my avatar was face, it wouldn’t have any real link to the blog here, so first-time visitors wouldn’t recognize it as me.
Personally, I like a subtle difference in the design. The comment only needs to be “different.” It doesn’t need to stand out at all. Just so long as someone reading it realizes that it’s the author commenting, not a reader, then that’s the job done.
Pranai (1 comments)26 February 09
Thank you very much for this post i searched many site for this and i got it in your site.Thank you once again.
TomsTricks (4 comments)5 March 09
Thanks for this great article.
This is very helpful to blog administrators ,who reply to commentators.
zsfdfsfsd (1 comments)23 June 09
asdadsad
Kishan Bagaria (4 comments)18 September 09
Nice trick.
lynnscott (20 comments)30 September 09
Hi I will have to work at this one….Good tip….Thanks….
Caity |ZA Cartridges (4 comments)2 October 09
That i s a really great tip I will have to keep it in mind for further designs, thanks for sharing, keep up the great work.
Cathy @ 3 at 1 Copying (9 comments)5 October 09
That is a awesome trick thanks for sharing going to keep it in mind
Coder49 (1 comments)22 October 09
American leaders are making a mistake attempting to sustain the present economy. ,
Free traffic (1 comments)6 February 10
This is very helpful to blog administrators
Structured Settlements (1 comments)22 February 10
Thank you for sharing