Blog

Styling Your Wordpress Comments

A fun part of customizing Wordpress themes is designing a comments format which complements the rest of the site. Here are three examples from recent projects, including code samples and downloads to the original .PSDs:

  1. Green Gravatars

    This comment style was part of a very green-and-beige environmental blog which since received a makeover. It requires the gravatar plugin and three different images: the scanlines, the clock and the gradient, which can be exported from your .PSD.

    First, we’ll need to first edit the ordered-list section of the “comments.php” template:

    <ol class="commentlist">
    <?php foreach ($comments as $comment) : ?>
    <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
    <cite>
    <img src="<?php gravatar("R", 32); ?>" alt="" />
    <span class="author"><?php comment_author_link() ?></span><br /><span class="time"><?php comment_time() ?></span> on <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?></a> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?>
    </cite>
    <div class="commenttext"><?php comment_text() ?></div>
    <?php if ($comment->comment_approved == '0') : ?>
    <em>Your comment is awaiting moderation.</em>
    <?php endif; ?>
    </li>
    <?php
    /* Changes every other comment to a different class */
    $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
    ?>
    <?php endforeach; /* end for each comment */ ?>
    </ol>
    

    Aside from a few images, the rest of the styling is accomplished with CSS:

    ol.commentlist {
    	margin:0;
    	padding:0;
    	}
    
    .commentlist li {
    	list-style:none;
    	margin-bottom:14px;
    	}
    
    .commentlist cite {
    	padding: 7px;
    	display:block;
    	font-style:normal;
    	background:url(http://www.yoursite.com/images/bg_comments2_cite.gif);
    	border-top:1px solid #d6e4c1;
    	border-bottom:1px solid #779d42;
    	color:#596e3b;
    	}	
    
    .commentlist a:link, .commentlist a:visited {
    	color:#596e3b;
    	}
    
    .commentlist a:hover, .commentlist a:active {
    	color:#8ec343;
    	}
    
    .commentlist cite img {
    	padding:1px;
    	border:1px solid #aab59a;
    	float:left;
    	margin-right:9px;
    	}
    
    .commentlist .author {
    	font: small-caps bold 1.2em Georgia, "Times New Roman", Times, serif;
    	text-decoration:underline;
    	}
    
    .commentlist .time {
    	background: url(http://www.yoursite.com/images/bg_clock.gif) no-repeat 1px;
    	padding-left:13px;
    	}
    
    .commenttext {
    	background: #9bc561 url(http://www.yoursite.com/images/bg_comments2_text.jpg) repeat-x bottom;
    	border-top:1px solid #c5f386;
    	padding: 0 20px 10px 20px;
    	color:#fafcf6;
    	}
    

    Keep in mind, each of these examples uses ems for font sizing, so your existing CSS may need to be tinkered with to match the screenshot above.

    Download

  2. The Speech Bubble

    I designed this comment style for my company’s website. It requires two images, the quote marks and the little curl. The relevant template code looks like this:

    <ol class="commentlist">
    <?php foreach ($comments as $comment) : ?>
    <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
    <div class="quote"><?php comment_text() ?></div>
    <?php if ($comment->comment_approved == '0') : ?>
    <em>Your comment is awaiting moderation.</em>
    <?php endif; ?>
    </li>
    <cite><?php comment_author_link() ?> on <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?></a></cite>
    <?php
    /* Changes every other comment to a different class */
    $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
    ?>
    <?php endforeach; /* end for each comment */ ?>
    </ol>
    

    And here is the CSS:

    .commentlist .quote {
    	background:url(http://www.yoursite.com/images/bg_quote.gif) no-repeat top right;
    	}
    
    .commentlist li {
     	padding: 5px 18px 22px 18px;
    	margin-top:15px;
    	background:#454545 url(http://www.yoursite.com/images/bg_commentlist.gif) bottom no-repeat;
    	color:#e4edee;
    	}
    
    .commentlist cite {
    	display:block;
    	font-style:normal
    	}
    
    .commentlist cite a:link, .commentlist cite a:visited {
    	color:#88e5f0;
    	text-decoration:none;
    	}
    
    .commentlist cite a:hover, .commentlist cite a:active {
    	color:#FFF;
    	text-decoration:underline;
    	}
    

    Download

  3. Alternating Arrows

    This comment styling originated from a music magazine I mocked up but never quite launched (so feel free to use it). I don’t always make use of the “.alt” class for comments, but it’s handy here for making the arrow and colors alternate. The images used are two different “paint” effects, the diagonal pattern, the chainlink and two kinds of arrows.

    Here is the template code:

    <ol class="commentlist">
    <?php foreach ($comments as $comment) : ?>
    <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
    <div class="commenttext">
    <cite><?php comment_author_link() ?></cite>
    <?php comment_text() ?>
    <span class="date"><img src="/images/commentlink.gif" alt="" /> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_time() ?> on <?php comment_date('n/j/y') ?></a></span> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?>
    </div>
    <?php if ($comment->comment_approved == '0') : ?>
    <em>Your comment is awaiting moderation.</em>
    <?php endif; ?>
    </li>
    <?php
    /* Changes every other comment to a different class */
    $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';?>
    <?php endforeach; /* end for each comment */ ?>
    </ol>
    

    And here is the CSS:

    ol.commentlist {
    	margin:0;
    	padding:0;
    	}
    
    .commentlist li {
    	margin-bottom:8px;
    	background: #60360b url(http://www.yoursite.com/images/comment_arrows.gif) bottom no-repeat;
    	color:#FFF;
    	list-style:none;
    	width:413px;
    	}
    
    .commentlist .commenttext {
    	background:url(http://www.yoursite.com/images/bg_paint.gif) no-repeat;
    	padding:22px 22px 50px 22px;
    	}
    
    .commentlist cite {
    	display:block;
    	color:#FFF;
    	font-weight:bold;
    	text-transform:uppercase;
    	font-style:normal;
    	background:url(http://www.yoursite.com/images/bg_cite_arrows.gif) bottom repeat-x;
    	padding-bottom:12px;
    	font-size:1.1em;
    	}
    
    .commentlist a:link, .commentlist a:visited {
    	color:#fff9b9;
    	}
    
    .commentlist a:hover, .commentlist a:active {
    	color:#FFF;
    	}
    
    .commentlist .date {
    	background:#930e27;
    	padding:3px;
    	}
    
    li.alt {
    	background:#836241 url(http://www.yoursite.com/images/comment_arrows_alt.gif) bottom no-repeat;
    	}
    
    li.alt .commenttext {
    	background:url(http://www.yoursite.com/images/bg_paint_alt.gif) no-repeat;
    	}	
    
    li.alt .date {
    	background:#67421c;
    	padding:3px;
    	}
    

    Download

Popularity: 4% [?]

24 Responses »

  1. Sudar said:

    Thanks for sharing your work.

    --August 30, 2007 @ 6:17 am
  2. Fred said:

    Thanks ! It will help a lot :)

    --September 7, 2007 @ 8:47 am
  3. indojepang said:

    thank u for sharing !! :D

    --October 10, 2007 @ 2:28 pm
  4. manfred said:

    Thx mate for the tutorial. But please check your code. There are some typos in it.

    Ex: id=”comment-”
    should be
    ” id=”comment-”

    --October 17, 2007 @ 9:16 am
  5. Martha said:

    Beautiful styling! I’m determined to make this work, though I must admit I’ve spent quite a while trying to identify the errors. I keep getting Parse Error codes and the only changes I made was add this code. *sigh*

    --January 3, 2008 @ 9:21 pm
  6. Craig Knott said:

    I just wanted to send you a quick hello and a thank you for this very useful article. I found myself searching through the web looking for some kind of tutorial, or at least a website, that covered the structure of the comments.php.

    Feel welcome to take a peek (and more than welcome to have a bash at making author comments stand out; my style.css has a worrying mish-mash of your code and the original that causes headaches).

    I digress. Thanks once again for the useful guide. Credit where credit’s due.

    --January 13, 2008 @ 3:00 pm
  7. g said:

    qtwtwqtqw

    --February 2, 2008 @ 6:17 pm
  8. Wallace said:

    Using white-space in comments?
      Test 2 “nbsp”

    --February 18, 2008 @ 3:18 am
  9. mpmpz said:

    Excessive iron birth control pills

    --February 25, 2008 @ 8:01 am
  10. xmqnb said:

    Iud birth control christian

    --February 25, 2008 @ 8:31 am
  11. Jenny said:

    how would you do the comments so that the comments and trackbacks are seperate?

    --March 15, 2008 @ 2:39 pm
  12. darkbloom said:

    how do you do italics

    --March 20, 2008 @ 12:34 pm
  13. Merci said:

    Darren, you rock! Thank you very much for the tutorials. More power to you!

    --March 26, 2008 @ 1:34 am
  14. Posicionamiento Valencia said:

    This post is a great help to me. Thanks for all.

    --April 7, 2008 @ 4:40 am
  15. Kris said:

    Hi, I have a typepad account and I was wondering if anyone new of a tutorial that went step by step to show how to style the comment section. The above is great but I’m a complete novice and need a bit more explaining. Thanks so much !

    --April 8, 2008 @ 5:25 am
  16. Jesse Petersen said:

    Darren, this is a huge help to get on the way understanding the inner working of comments. I have trashed dozens of themes in my time because I didn’t like how the comments and input boxes were styled.

    One question: How can you distinguish between the author/blog representative and other commenters to allow a visitor to see that particular comments are the blog’s stance? I think that would be a terrific modification to the gravatar style (i.e., change the background color for the blog owner).

    Thanks!

    --April 14, 2008 @ 9:18 am
  17. Sofija said:

    Very nice blog design and layout!

    --April 19, 2008 @ 10:30 am



Trackbacks & Pingbacks

  1. 3 habillages pour les commentaires de votre blog à télécharger:

    […] customiser les commentaires de votre blog. Ce week-end, en consultant mes flux RSS, je suis tombé sur cet article du très bon Darren Hoyt, qui présente 3 solutions très différentes pour habiller de manière […]

    --August 20, 2007 @ 9:10 am
  2. Rapidinhas 06-09-2007 | BrPoint:

    […] Styling Your Wordpress Comments […]

    --September 6, 2007 @ 6:43 pm
  3. Mastering Your WordPress Theme Hacks and Techniques:

    […] 3) Styling Your WordPress Comments- Here are three examples to design the guest comments which complements the rest of the site using: Gravatars, Speech Bubble and Alternating Arrows. […]

    --March 16, 2008 @ 9:42 pm
  4. Schweizer Wordpress Magazin » Tipp des Tages » Kommentare verschönern:

    […] Wie Sie diese Bilder sinnvoll einbauen und zu einem optischen Höhepunkt werden lassen, können Sie bei Darren Hoyt nachlesen: http://www.darrenhoyt.com/2007/08/18/styling-your-wordpress-comments/ […]

    --March 18, 2008 @ 1:46 pm
  5. paidnetpedia.com:

    […] code to check if the commenter’s email is the same as the email address of the blog’s author. 3) Styling Your WordPress Comments- Here are three examples to design the guest comments which complements the rest of the site using: […]

    --April 12, 2008 @ 3:13 pm
  6. SEO & Web Design » Blog Archive » Mastering Your WordPress Theme Hacks and Techniques:

    […] 3) Styling Your WordPress Comments- Here are three examples to design the guest comments which complements the rest of the site using: Gravatars, Speech Bubble and Alternating Arrows. […]

    --May 6, 2008 @ 3:30 am
  7. SEO & Web Design » Blog Archive » Mastering Your WordPress Theme Hacks and Techniques:

    […] 3) Styling Your WordPress Comments- Here are three examples to design the guest comments which complements the rest of the site using: Gravatars, Speech Bubble and Alternating Arrows. […]

    --May 6, 2008 @ 3:30 am


Leave a comment

(required)

(required)



  • rssRSS feed for comments on this post.