257 Because global numbering would appear as shown in the left screenshot, and local numbering would appear as shown in the right screenshot: Ahh, yes. Much better. A good rule of thumb is to keep our comments numbered locally in the comment display area, and numbered globally in the source code. Indeed, implementing locally numbered comments is straightforward. If your theme does not include such functionality, open your comments.php file and follow one of the following tutorials, depending on your comment-loop configuration: For single comments loop (i.e., no separation of comments and ping/trackbacks) 1. In your comments.php file, add the following line above your comment loop: <?php $commentcount = 1; // number of rst comment ?> Global Comment Numbering is nice in that every single comment has a unique code and link, but doesn’t make much sense in this visual context. Local Comment Numbering makes more sense in the context of a conversation, and the links are still unique. 258 2. Then, within the comment loop, add the following line to the location where you would like to display each comment’s number: <p class="comment-count"><a href="#comment-<?php comment_ID(); ?>">#<?php echo $commentcount++; ?></a></p> For double comments loop (i.e., separation of comments and ping/trackbacks) 1. In your comments.php file, add the following line above your comment loop: <?php $commentcount = 1; // number of rst comment ?> <?php $pingbackcount = 1; // number of rst pingback ?> 2. Then, within the loop that displays comments, add the following line: <p class="comment-count"><a href="#comment-<?php comment_ID(); ?>">#<?php echo $commentcount++; ?></a></p> 3. Finally, within the loop that displays ping/trackbacks, add the following line: <p class="pingback-count"><a href="#comment-<?php comment_ID(); ?>">#<?php echo $pingbackcount++; ?></a></p> And that’s all there is to it. Notice that we have also implemented global comment numbers within this method. Thus, once in place, this code will display a link for each comment that shows local comment numbers on the web page and global comment numbers in the source code. Nice. Once your comments are numbered locally, you can enjoy the best of both worlds by including something like this along with the display of each comment: <a href="<?php the_permalink(); ?>#comment-<?php comment_ID(); ?>" id="comment-<?php comment_ID(); ?>" title="Permalink for comment #<?php echo $comment_count; ?>">Comment #<?php echo $comment_count; ?></a> 259 Once in place, this code will output the following information on the web page: …and the following markup in the source code: Count Comments Only To display the number of comments only, place the following code into your functions.php file: function countComments($count) { global $wp_query; return count($wp_query->comments_by_type['comment']); } add_lter('get_comments_number', 'countComments', 0); What we’re doing here is filtering WordPress’ comments_number function to output only the number of comments. Normally the function counts all comments, pingbacks, and trackbacks, but with this function in place, only comments will be counted. To display the total number of comments after implementing the countComments function, simply place the comments_number() template tag wherever you would like to display the number. 260 7.4.3 Alternating Comment Styles Another way to improve the usability and overall stylishness of your comments-display area is to alternate the appearance of every other comment, as seen in the left-hand screenshot of Stephen Cronin’s site, scratch99.com. Depending on your particular theme design, this method of distinguishing between odd and even comments may greatly facilitate comment readability on your site, thereby making it easier for readers to follow the conversation and perhaps feel motivated to participate. The process of styling alternating comments differently involves determining which comments are oddly numbered and which are evenly numbered. In WordPress 2.7 and better, comments automagically include “odd” and “even” classes for odd- and even-numbered comments, respectively. This makes it a snap to implement your own custom CSS styles for each of these classes. Perhaps something like this: .odd { background: white; color: black; } .even { background: black; color: white; } Well, maybe not that extreme, but you get the idea. :) Take it Easy… Just because you can pimp out some serious alternating comment styles doesn’t give you license to go crazy. In this screenshot (at left) from scratch99.com, Stephen Cronin alternates comment styles in subtle fashion, letting the content speak for itself. 261 7.4.4 Custom Styles for Authors and Members Similar to the technique of styling alternate comments is the fine art of styling unique author and member comments. As with alternating comment styles, unique author and registered-member styles is a great way to improve readability, usability, and all-around sleekness of your WordPress comments area. And the good news is that WordPress 2.7 automagically includes CSS classes for both types of comments. For the author of the blog post, WordPress includes a class named “bypostauthor”. For registered users who are logged in to your site, a class named “byuser” is included in that user’s comments. These classes enable you to easily apply custom CSS styles to these types of comments. For older versions of WordPress, some additional code is required to implement custom styles for authors. The following code will check the comment author to see if it is the same as the post author. If it is, a CSS class named “comment-author” will be source code output. Thus, place the following code into the HTML element of your choice: <?php if ($comment->user_id == $post->post_author) { echo ' class="comment-author"'; } ?> Using a basic comments loop, here is how we could use this code: <?php foreach ($comments as $comment) : ?> <div<?php if ($comment->user_id == $post->post_author) { echo ' class="comment-author"'; } ?>> <p><strong><?php comment_author_link(); ?></strong></p> <?php comment_text(); ?> </div> <?php endforeach; ?> 262 Once in place, this code will enable you to apply CSS styles such as the following: .comment-author { font-weight: bold; color: red; } The cool thing about this snippet is that it will output the “comment-author” class for any post author on your site. Unfortunately, because the CSS class is the same for all post authors, it is not possible to style author comments differently according to specific authors. Fortunately, there is always more than one way to get things done with WordPress. Here is an alternate “author-highlight” method that will enable you to target specific post authors directly: <?php if ($comment->comment_author_email == "chris@digwp.com") echo 'class="author-chris"'; ?> With that snippet in place, any comment left specifically by Chris may be styled by an echoed CSS class named “author-chris”. Likewise, to output unique class names for multiple authors, we can use something like this: <?php if ($comment->comment_author_email == "chris@digwp.com") echo 'class="author-chris"'; elseif ($comment->comment_author_email == "jeff@ digwp.com") echo 'class="author-jeff"'; ?> By adding additional “elseif()” statements, we may target as many specific authors as needed. 263 7.4.5 Styling Comments with Gravatars As many of you know, gravatars are globally recognized avatars that appear next to your comments and other content on supportive sites around the Web. So instead of just leaving your name and website, you can show a thumbnail-size image of yourself to help improve branding and site-promotion. To get your own Gravatar, simply go to the free signup page at the Gravatar website http://digwp.com/u/190 and provide the required information, which is basically just a valid email address. After signing up, you get to upload your own image and customize your profile. Within moments, your new gravatar will begin to appear on gravatar-enabled websites. To display gravatars on your WordPress site, log in to your Admin area and visit the Settings > Discussion page. There, you will be able to specify your preferences for the following: • Whether or not you want to display gravatars • Acceptable rating of your displayed gravatars • The default gravatar that will be displayed Once you have set these options, click save and open your theme’s comments.php file. In the location where you want the gravatars to display, add the following line to your comments loop: <?php if(function_exists('get_avatar')) { echo get_avatar($comment, $size = '50', $default = 'http://domain.tld/default.png'); } ?> Then, specify the size of the gravatar, which may be anything up to 96 pixels (square), and also the default image to use in case the user does not have a gravatar. This code will output an image element (<img>) that points to the commentator’s gravatar and includes the following attributes (based on our previous example): Twitter Avatars You can also display Twitter avatars with comments by grabbing the free script at: http://digwp.com/u/191 Add the script to your functions.php le and display the avatars in your theme like so: <?php twittar('50', 'http://digwp.com/path/ default.png', '#ffffff', 'twitavatars', 1, 'G'); ?> 264 <img alt="" src="http://domain.tld/default.png" class="avatar avatar-50 avatar-default" height="50" width="50" /> You may then customize the image with additional markup, CSS styles, or whatever you wish. It’s that easy – if you are using WordPress 2.5 or better. If you are using an older version of WordPress, you may use the same code as above, but you will need to either install a gravatar plugin or else include the required code manually. Here are a couple of the best gravatar plugins: • Gravatars2 - http://digwp.com/u/192 • WP-Gravatar - http://digwp.com/u/193 To get gravatars working on older versions of WordPress, you may also skip the plugin and code it yourself. Open your theme’s comments.php file and add the following to the location where you would like the gravatars to appear within the comments loop: <?php // gravatars for WordPress < 2.5 $gravatar_size = "50"; $gravatar_default = "http://domain.tld/default.png"; $gravatar_email = get_comment_author_email(); $gravatar_url = "http://www.gravatar.com/avatar.php?gravatar_ id=".md5($gravatar_email)."&default=".urlencode($gravatar_ default)."&size=".$gravatar_size; echo '<img alt="" src="'.$gravatar_url.'" class="gravatar" />'; ?> Before using this code, remember to edit the “$gravatar_size” and “$gravatar_ default” variables with the display size and default image, respectively. Once in place, this code will display a gravatar for each comment author who has a gravatar, or else it will display the specified default image. 265 Finally, if you are developing a theme that needs to ensure backwards- compatibility with older (pre-2.5) versions of WordPress, you may combine the default, built-in method with the backwards-compatible fallback. To do this, we employ a simple bit of PHP logic, like so: <?php // backwards-compatible gravatars if (function_exists('get_avatar')) { // gravatars for WordPress 2.5 + echo get_avatar($comment, $size = '50', $default = 'http://domain.tld/ default.png'); } else { // gravatars for WordPress < 2.5 $gravatar_size = "50"; $gravatar_default = "http://domain.tld/default.png"; $gravatar_email = get_comment_author_email(); $gravatar_url = "http://www.gravatar.com/avatar.php?gravatar_ id=".md5($gravatar_email)."&default=".urlencode($gravatar_ default)."&size=".$gravatar_size; echo '<img alt="" src="'.$gravatar_url.'" class="gravatar" />'; } ?> As with the previous two methods, place this code within the comments loop and you are good to go. You will want to edit the “$gravatar_size” and “$gravatar_ default” variables with the display size and default image, respectively. Gravatars in Posts! Gravatars aren’t only for comments – they also look great when used to display a thumbnail image of the post author. All you need to do is include the following code within the post loop of your single.php template le: <?php $author_email = get_ the_author_email(); echo get_avatar($author_email, '96'); ?> 266 7.4.6 Add a "Your comment is awaiting moderation" Message When moderating comments on your WordPress site, it is very helpful to commentators to let them know if their submitted comment is waiting in the moderation queue. By default, WordPress will display moderated comments to their authors but not to other visitors. Thus, it may be confusing for someone who leaves a comment and sees it appear in the comment thread, only to watch as it is completely ignored by everyone else. For this reason, including some sort of an “awaiting moderation” message is extremely important for improving the usability of your comments area. The good news is that, if you are using the wp_list_comments method to display your comments, you don’t need to do anything – a comment moderation message is already built-in. If you are using a custom loop via functions.php, simply add the following snippet of code to your function: <?php if ($comment->comment_approved == '0') : ?> <p class="moderation">Your comment is awaiting moderation.</p> <?php endif; ?> And, if you are using the old-school foreach comments loop, adding a comment- moderation message is just as simple: 1. Locate the comments loop, which should open and close with the following code: <?php foreach ($comments as $comment) : ?> <! this is the comments loop! > <?php endforeach; ?> 2. Within the comments loop, add the following code: <?php if ($comment->comment_approved == '0') : ?> <p class="moderation">Your comment is awaiting moderation.</p> <?php endif; ?> Forget? For more information on using either a custom loop or the wp_list_comments method of displaying comments, check out section 7.3.2 in this chapter. . theme that needs to ensure backwards- compatibility with older (pre-2.5) versions of WordPress, you may combine the default, built-in method with the backwards-compatible fallback. To do this,. the best gravatar plugins: • Gravatars2 - http://digwp.com/u/192 • WP-Gravatar - http://digwp.com/u/193 To get gravatars working on older versions of WordPress, you may also skip the plugin. author and registered-member styles is a great way to improve readability, usability, and all-around sleekness of your WordPress comments area. And the good news is that WordPress 2.7 automagically