How To Style Author Comments Differently
September 13th 2007
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.
Twitter
September 13th at 12:38 pm GMT
Comment #1
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
September 13th at 1:13 pm GMT
Comment #2
Hello Michael,
Do you have any idea how can i achieve this on a Blogger blog?
September 13th at 5:27 pm GMT
Comment #3
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
September 13th at 5:59 pm GMT
Comment #4
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.
September 13th at 6:42 pm GMT
Comment #5
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.
September 13th at 6:45 pm GMT
Comment #6
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.
September 13th at 7:01 pm GMT
Comment #7
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
September 13th at 7:43 pm GMT
Comment #8
Nice speed Michael!
I'll be saving this one for later. Cheers!
September 13th at 7:44 pm GMT
Comment #9
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.
September 13th at 7:52 pm GMT
Comment #10
David - No problem. Seems like quite a few people had been wondering the same thing you had.
September 13th at 9:01 pm GMT
Comment #11
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
September 13th at 9:23 pm GMT
Comment #12
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.
September 13th at 9:36 pm GMT
Comment #13
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
September 13th at 9:56 pm GMT
Comment #14
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!)
September 13th at 10:10 pm GMT
Comment #15
Thanks for the helpful info!
September 13th at 10:11 pm GMT
Comment #16
No problem Floyd - Hope it was helpful.
September 13th at 11:04 pm GMT
Comment #17
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.
September 13th at 11:18 pm GMT
Comment #18
lol Steven - I guess that's the one drawback to using such a popular free image site.
September 14th at 1:52 am GMT
Comment #19
That's another way to do it. I think I'll try this way on my new template that I am working on.
September 14th at 2:40 am GMT
Comment #20
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.
September 14th at 4:03 am GMT
Comment #21
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?
September 14th at 4:39 am GMT
Comment #22
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)?
September 14th at 9:54 am GMT
Comment #23
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
September 14th at 3:21 pm GMT
Comment #24
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).
September 16th at 7:53 am GMT
Comment #25
Can you include some tips on Blogger blogs.
September 16th at 12:42 pm GMT
Comment #26
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.
September 20th at 8:17 am GMT
Comment #27
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.
September 20th at 9:46 pm GMT
Comment #28
Glad it was of help Jermayn!
September 23rd at 6:39 pm GMT
Comment #29
Nice article buddy .
September 24th at 5:40 pm GMT
Comment #30
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.
September 24th at 5:46 pm GMT
Comment #31
Glad you liked it Madhur.
Hope it helps Jonathan, and thanks!
September 24th at 7:44 pm GMT
Comment #32
Thank you. I did this on my blog and I think it looks great.
September 24th at 7:49 pm GMT
Comment #33
No problem Pinyo. Glad it worked out for you.
September 30th at 3:26 pm GMT
Comment #34
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!
September 30th at 3:54 pm GMT
Comment #35
No problem. Best of luck with the new design!
October 1st at 10:32 pm GMT
Comment #36
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
October 1st at 10:57 pm GMT
Comment #37
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?
November 1st at 7:59 pm GMT
Comment #38
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
November 1st at 9:18 pm GMT
Comment #39
No problem Anna. I'll have to thank David again for that link now.
November 2nd at 10:11 pm GMT
Comment #40
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
November 2nd at 10:24 pm GMT
Comment #41
Glad to hear it's working Ian.
November 18th at 11:52 am GMT
Comment #42
So why don't you implement this on your own blog?
November 18th at 9:29 pm GMT
Comment #43
I have. Check out the blue lines inside my comments.
January 14th at 8:58 pm GMT
Comment #44
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/
March 7th at 4:40 am GMT
Comment #45
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.
May 10th at 2:48 pm GMT
Comment #46
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?