Styling individual comments for WordPress

by Soddengecko @ 3:02   Code   Permalink

I wanted a little script that would allow me to have specific styles for individual comments depending on the authour.

I had a look around for WordPress plugins and other info, but could not find anything that actually worked.

So I wrote my own little switch statment to sort it all out.

PHP:
  1. <?php
  2. switch (comment_author_email){
  3. case ($comment->comment_author_email == 'friend@friend.com'):
  4.        $style = '<div class="friendcomment">';
  5.   break;
  6.   case ($comment->comment_author_email == 'you@you.com'):
  7.        $style = '<div class="authorcomment">';
  8.   break;
  9.   default:
  10.       $style = '<div class="defaultcomment">';
  11.   break;}?>
  12.  
  13. <?php echo $style; ?>

This involves modifying the comments.php file in your theme folder.

Find:

PHP:
  1. <cite><?php comment_author_link() ?></cite>

And add this code above that line: Make sure you put the correct email addresses in.

PHP:
  1. <?php
  2. switch (comment_author_email){
  3. case ($comment->comment_author_email == 'friend@friend.com'):
  4.        $style = '<div class="friendcomment">';
  5.   break;
  6.   case ($comment->comment_author_email == 'you@you.com'):
  7.        $style = '<div class="authorcomment">';
  8.   break;
  9.   default:
  10.       $style = '<div class="defaultcomment">';
  11.   break;}?>
  12.  
  13. <?php echo $style; ?>

Now find:

PHP:
  1. <?php comment_text() ?>

Add the following on the line below:

CSS:
  1. </div>

That's it for the comments.php file. Now open your style sheet, usually called style.css and add the following rules to the end of your style sheet, modify to yoru own needs.

CSS:
  1. .authorcomment {
  2. background: #ffffcc;
  3. padding:10px;
  4. border:2px solid #000;
  5. color:#333;
  6. min-height:90px;
  7. }
  8. .friendcomment {
  9. background: #fff;
  10. padding:10px;
  11. border:2px solid #000;
  12. color:#333;
  13. min-height:90px;
  14. }
  15. .defaultcomment {
  16. background: #eee;
  17. padding:10px;
  18. border:2px solid #000;
  19. color:#333;
  20. min-height:90px;
  21. }

Thats everything. Save and upload your files and see for yourself.

Comment posted by:
DronCourrit

Posted on:
6-12-2007 @ 08:02:36

hey.. very nice

Do you want to leave a reply?


XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Contact