nyssabrowndesign

Welcome to my redesign - okay, I'm kidding. This is a temporary "interval" theme. It didn't take too long. I am still redesigning but mean while, I'm putting this up. Why? I have some other projects I need to get stuck into, which reduces my time a little. I'd also like to contemplate my redesign a bit as I'm currently unsure about its direction. To understand more and the reasons behind my interval theme, read I haven't redesigned, but stay tuned!

WordPress Tips & Tricks: Author Comment Highlighting

When creating WordPress themes, I love it when it comes to styling the comments. I always find it a challenge to do something different. But my favourite part of comment styling is the author highlighting. It’s probably one of the most obvious things to add to a theme when developing one (or using someone elses) and it’s fairly straight forward too, but for those that are new to WordPress and themes, may not know how to build it into the theme without resorting to (yet another) plugin.

First of all, let’s take a look at different styles of author highlighting. The positibilities are almost endless. You can just use a different colour for your own comment or a completely different style and font, font-size or colour. It’s really up to you and how your theme looks. Check out some examples below:

nyssajbrown.net Simple In Pink Theme

The first example is from my own blog (the one you’re reading). I’m using 3 separate images in my comment styling. Two for alternating (the greys) and one for author highlighting (the blue). Example two is from the Simple In Pink theme. You can clearly see the difference. Author comments have a yellow background rather than white.

Unintentionally Blank zetabrigden.com

The third example is taken from Unintentionally Blank. I like what Phil has done with his comments, using gradients. When it comes to his own comments, the gradient itself is in reverse, and there is no flower in the top right-hand corner. The last example is from Zeta Brigden’s theme (not yet online) and the author highlighting is much more simple compared to the rest, using blue text instead of green.

So really, the possibilities of author highlighting are endless. Now onto implementing it for your next WordPress theme or for yourself.

1. The first thing you will want to do is open comments.php, which should come with any good WordPress theme. Dive into the template and find the following line (or anything similar):

<li class=”<?php echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>

This is the line we will be adjusting to add author highlighting. Change this line to:

<li class=”<?php if ($comment->comment_author_email == “email@yoursite.com”) echo ‘author’; else echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>

That’s it. Obviously, you will want to change the email@yoursite.com to your own email address so it highlights your comment (or leave it blank if putting it into a theme for others). echo ‘author’ can remain or it can be changed to reflect your name. For example, for my theme, I’ve used echo ‘nyssa’. This is what controls the style of the author highlighting, which then leads us onto point 2.

2. Open style.css. You’ll now want to add the style for your comment. You could use something like the following:

.author {
background:#FFFFFF url(images/someimage.gif) top repeat-x;
color:#000000;
}

One problem you may run into is that the rest of the comment styling is overiding your author styling. This is easily fixed by using !important to override the general comment styling:

.author {
background:#FFFFFF url(images/someimage.gif) top repeat-x !important;
color:#000000 !important;
}

Now you should have author highlighing. The one downfall to using this method, is that you’ll need to dive into comments.php if you ever need to change your address, or your theme users will need to, and not everyone is in-the-know enough not to get lost or just don’t know what they’re doing. One way around this is by using theme options within the theme, but that’s a whole other story (coming soon…).

3. If for some reason you want to highlight two or three authors (good if you’re a part of a multiple authored blog environment), it’s as simple as “adding on”:

<li class=”<?php if ($comment->comment_author_email == “author1@yoursite.com”) echo ‘author1′; else if ($comment->comment_author_email == “author2@yoursite.com”) echo ‘author2′; else if ($comment->comment_author_email == “author3@yoursite.com”) echo ‘author3′; else echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>

Each author can have his or her own styling. Just follow point 2 and add more classes to your stylesheet (style.css).

Tuesday, June 19th, 2007 at 2:02 pm in WordPress, WordPress Tips & Tricks
You can follow any responses to this entry through the RSS 2.0 feed.

You can leave a comment or trackback from your own site.

26 Responses to “WordPress Tips & Tricks: Author Comment Highlighting”

  1. } Arpit Jacob wrote }

    hey a good tutorial I have bookmarked :) it

    # June 19th, 2007 at 3:42 pm
  2. } Phil wrote }

    Nice one Nyssa, and thanks for using me as an example!

    # June 19th, 2007 at 5:39 pm
  3. } Mike wrote }

    I never thought about making my comments highlighted when designing akamike, maybe I should do a little tweaking this weekend.

    Thanks for the tips :)

    # June 19th, 2007 at 10:43 pm
  4. } Nyssa wrote }

    Arpit: Thanks :)

    Phil: No problem. I love your gradients ;)

    Mike: I’ll stop by and see if you do anything :P

    # June 20th, 2007 at 10:00 am
  5. } Vario Creative Blog » Wordpress Tricks wrote }

    [...] WordPress Tips & Tricks: Author Comment Highlighting - nyssajbrown.net    [...]

    # June 21st, 2007 at 2:26 pm
  6. } nyssajbrown.net | WordPress Tips & Tricks wrote }

    [...] my post, WordPress Tips & Tricks: Author Comment Highlighting, I mentioned the downfalls to using that particular method: having to manually change the email [...]

    # June 29th, 2007 at 9:49 am
  7. } Wordpress Plugins & Tutorials: Your Pick | Smashing Magazine wrote }

    [...] comment highlighting. Author Comment Highlighting and Author Highlighting Through Theme Options provide information about styling author’s [...]

    # June 30th, 2007 at 9:38 am
  8. } lost node » Blog Archive » Wordpress Plugins & Tutorials: Your Pick wrote }

    [...] comment highlighting. Author Comment Highlighting and Author Highlighting Through Theme Options provide information about styling author’s [...]

    # July 3rd, 2007 at 1:26 pm
  9. } Jared Schwager wrote }

    The only problem I see with how you’re doing this is that anyone who enters the blog author’s email address would appear as the author himself. If there were some way to use an if statement with the user id of the commenter posting, that would be much more desirable. Unfortunately, this sounds a little easier than it actually is.

    # July 9th, 2007 at 8:07 pm
  10. } Nyssa wrote }

    @Jared: Not sure that is really a problem as it wouldn’t happen often. And if it did, you’d have to be asking why someone would be using the blog authors email address and not their own when leaving a comment.

    If you’re talking about a blog with multiple authors, I could see it possibly happening more often, but I’d still think that they should probably be using their own email address in their profile so if they’re logged in leaving a comment, it uses their own email address.

    # July 9th, 2007 at 8:33 pm
  11. } Updates @ akamike | akamike wrote }

    [...] Also, my own comments are highlighted with a darker colour, with thanks to Nyssa’s post on Author Comment Highlighting (a recommended read for those developing wordpress themes. I like what I have done with them, [...]

    # July 12th, 2007 at 10:42 pm
  12. } Nanda wrote }

    In the snippet you need to copy and paste into comments.php it says you need to replace email@yoursite.com with your own e-mail address, but I get an error because you use an @ in an e-mail address and I guess you can’t ‘cos I get a syntax errors. Do you know of any ways to fix this? Thanks in advance. :)

    # July 13th, 2007 at 2:58 pm
  13. } Nyssa wrote }

    @Nanda: Sorry, no I don’t. It works fine for myself and with every other theme I’ve used it for, so it can’t be the @.

    The only thing I could possibly think of is that it’s the quotation marks (copy/paste sometimes doesn’t read it correctly) or something has messed up the code slightly.

    Have a look at this image to see the code in it’s php form with syntax highlighting to see it clearly.

    If you still can’t figure it out, feel free to send me an email via my contact form and I’ll have a look at your code to help you out. :)

    # July 13th, 2007 at 3:55 pm
  14. } tmthai.com All you need for the Website!!!!.. wrote }

    [...] comment highlighting. Author Comment Highlighting and Author Highlighting Through Theme Options provide information about styling author’s [...]

    # July 18th, 2007 at 9:53 am
  15. } Obez Blog » Wordpress Plugins & Tutorials: Your Pick wrote }

    [...] comment highlighting. Author Comment Highlighting and Author Highlighting Through Theme Options provide information about styling author’s [...]

    # September 24th, 2007 at 9:09 pm
  16. } Makadco Blog » Blog Archive » Wordpress Plugins & Tutorials wrote }

    [...] comment highlighting. Author Comment Highlighting and Author Highlighting Through Theme Options provide information about styling author’s [...]

    # October 11th, 2007 at 6:27 am
  17. } Wordpress Plugins & Tutorials: Your Pick | Ayiva wrote }

    [...] comment highlighting. Author Comment Highlighting and Author Highlighting Through Theme Options provide information about styling author’s [...]

    # October 19th, 2007 at 5:25 pm
  18. } Sally, design guru wrote }

    I like the last one. Probably, I will use it for my blog if it is ok to you.

    # October 22nd, 2007 at 3:24 am
  19. } Wordpress Plugins | Lifehacker wrote }

    [...] Author Comment Highlighting and Author Highlighting Through Theme Options  gives detailed information on styling author’s comments. [...]

    # October 25th, 2007 at 8:08 am
  20. } Jenny wrote }

    This is so cool. I was wondering how that was done. Now I can do it to my blog. :) BTW: I’m totally jealous of your design. ;D

    # November 6th, 2007 at 4:09 pm
  21. } Nyssa wrote }

    Glad it helped, Jenny. :)

    And I guess that means you like the design then. ;) Glad you do, though it’s going bye-byes soon!

    # November 7th, 2007 at 10:56 am
  22. } Design manager wrote }

    I’m not a fan of pink. But your blog looks stylish. Congratulations!

    # November 13th, 2007 at 1:27 am
  23. } WordPress: The best of and most useful WP plugins wrote }

    [...] Author Comment Highlighting and Author Highlighting Through Theme Options provide information about styling author’s comments [...]

    # January 7th, 2008 at 9:12 am
  24. } Wordpress Plugins & Tutorials at Site Kreation wrote }

    [...] comment highlighting. Author Comment Highlighting and Author Highlighting Through Theme Options provide information about styling author’s [...]

    # May 1st, 2008 at 3:08 am
  25. } Jan Olsen wrote }

    If I may advertise a little, then I have made a plugin called “Comment Highlighter”, which can handle such modifications without starting to “hack” you comments.php file.

    You can set up rules based on emails, ID’s, names, etc. and then assign a class name to that rule. All that’s left after that is the style.css file, where you define the style as you also mention.

    If interested then the plugin can be found here: http://wordpress.org/extend/plugins/comment-highlighter/

    # June 19th, 2008 at 5:01 pm
  26. } Nyssa wrote }

    Hi Jan. I’m more than aware there are plugins for this type of thing. This is for people that would rather not use a plugin (like myself). :)

    # June 19th, 2008 at 5:48 pm

Leave a Reply