237 Custom loop • Full control, not as easy to implement • Standardized and/or custom CSS classes for just about anything • Plugin support for extra functionality like threading and pagination Which method you decide to use depends on many factors. In general, we advise you to use the wp_list_comments function to display your comments. In those cases where more control over structure, presentation, and functionality is desired, using a custom loop is certainly going to be easier than wrestling with wp_list_ comments. In addition to these two methods, there is also the “old-school” method of displaying comments: the “foreach” loop, which opens the door to more possibilities. In the next section of our “Optimizing Comments” chapter, we’ll explore all three of these comment-display methods and then dig into some juicy techniques for formatting and enhancing your WordPress Comments Area. 7.3.2 Using wp_list_comments() or a Custom Loop? Before WordPress version 2.7, the comments loop that was used to query the database and display your comments was a bit convoluted, but also well- established and well-understood. It basically consisted of the following code: <?php foreach ($comments as $comment) : ?> <?php comment_author_link(); ?> <?php comment_text() ?> <?php endforeach; ?> Then, in WordPress version 2.7, comments were enhanced with optional threading and paging features. These new features are activated via the WordPress Admin 238 and require the wp_list_comments() template tag to operate. Thus, in 2.7 and better, we replace the foreach method with, yep, you guessed it, wp_list_comments: <?php wp_list_comments(); ?> Yep, that’s all you need now to take advantage of WordPress’ default, out-of-the- box, comment functionality, which now includes optional comment paging and threading. The old foreach loop method still works, but you will need a plugin for threaded and/or paged comments. If you’re thinking that you need to use the old comments loop to fully customize your comments display, think again. You could use the old loop setup, but you would miss out on all of the cool new features. Instead, WordPress makes it possible to create your own customized comments function and call it via the new wp_list_comments() template tag. Let’s explore these different comment-display methods and check out the possibilities. The new comments loop The wp_list_comments function doesn’t actually look like a loop, but it does the same thing as the old foreach loop by cycling through your comments and generating the required markup. Looking at the HTML output of wp_list_comments, we get something like this: <ol class="commentlist"> <li class="comment even thread-even depth-1" id="comment-1"> <div id="div-comment-1" class="comment-body"> <div class="comment-author vcard"> <img alt='' src='http://www.gravatar.com/avatar/' class='avatar avatar-32 photo avatar-default' height='32' width='32' /> <cite class="fn"> <a href='http://wordpress.org/' rel='external nofollow' class='url'> 239 Mr WordPress</a></cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"> <a href="http://localhost/283/2009/08/hello-world/comment-page- 1/#comment-1">August 13, 2009 at 3:08 pm</a> </div> <p>Hi, this is a comment.<br />To delete a comment, just log in and view the post's comments. There you will have the option to edit or delete them.</p> <div class="reply"></div> </div> </li> </ol> As you can see, the default output for the new comments loop (via the wp_list_ comments tag), is an ordered list that contains a gravatar image, several divs, lots of variable classes, author links, and the comment itself. If this fits your theme’s design and functionality, then you are good to go. Nothing could be easier, and the host of included classes and markup elements should be sufficient to get things looking exactly how you want them. With the wp_list_comments method of displaying your comments, you have control over the following parameters: • avatar_size - an integer specifying the size, in pixels, of your gravatars. The default is 32. • style - a string specifying the type of markup used for your comments. May be either “div”, “ol”, or “ul”. The default is “ul”, an unordered list. Note that you will still need to wrap your comments list with your markup element of choice. So, for example, if you are using an ordered list instead of an unordered list, you would need to include the enclosing ”<ol>” tags like so: 240 <ol class="commentlist"> <?php wp_list_comments(array('style' => 'ol')); ?> </ol> • type - a string that specifies the type of comments to display. Either “all”, “comment”, “trackback”, “pingback”, or “pings”. “pings” is both “trackback” and “pingback” together. The default is “all”. • reply_text - text string specifying the text to display for the comment reply link. Default is “Reply”. • login_text - text to display when registration is required to comment. Default is “Log in to Reply”. • callback - a string specifying the name of a custom function for your comments display. Specifying your own function enables you to fashion your own comment-display loop. Defaults to null. • Additional parameters may be available, see the codex: http://digwp.com/u/35. That’s quite a bit of control, but more customization may be necessary. If you need more control over how your comments are displayed, you will need to tap into the comment loop itself, which may be included directly in the comments.php file or tucked away neatly into your functions.php file. In the next section, we’ll look at how to include a custom comments loop via the functions.php file, then we’ll remind you how to do it old-school with the classic foreach comments loop. Utilizing a custom comments loop via functions.php First, open your comments.php file and add the following code: <ul class="commentlist"> <?php wp_list_comments('type=comment&callback=mytheme_comment'); ?> </ul> 241 Then, open your functions.php file and add the custom comments function: <?php function mytheme_comment($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>"> <div id="comment-<?php comment_ID(); ?>"> <div class="comment-author vcard"> <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' );?> <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()); ?> </div> <?php if ($comment->comment_approved == '0') : ?> <em><?php _e('Your comment is awaiting moderation.'); ?></em> <?php endif; ?> <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></ a><?php edit_comment_link(__('(Edit)'),' ','') ?></div> <?php comment_text(); ?> <div class="reply"> <?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))); ?> </div> </div> <?php } 242 Notice that we are not closing the <li> element. WordPress automatically generates the closing </li> depending on the markup generated for any nested comments. Once in place, the code placed into your comments.php file will call your custom comments-loop from your functions.php file and output the contents to the page. This code may look like a lot, but it is easily chopped up and customized to suit your needs. The point here is that it is possible to get behind the scenes and legitimately customize your comments loop using the new wp_list_comments() template tag. Going “old-school” with the original comments loop This makes it even easier to customize your comments display, but threaded comments and pagination are not possible without a plugin. Simply replace the wp_ list_comments tag with the following foreach comments loop and customize with whatever markup and template tags you wish: <?php foreach ($comments as $comment) : ?> <?php comment_author_link(); ?> <?php comment_text() ?> <?php endforeach; ?> And that’s all there is to it. Now that we know how to customize our comment loop, let’s dig in, have some fun, and explore some super-awesome tips and tricks for our WordPress comment areas. Backwards-Compatible Comment Display If you want your theme to be backwards-compatible, just check for the presence of the wp_list_comments() function in your comments.php file: <?php if (function_exists('wp_list_comments')) : ?> <?php wp_list_comments(); ?> <?php else : ?> <?php foreach ($comments as $comment) : ?> <?php comment_author_link(); ?> <?php comment_text() ?> <?php endforeach; ?> <?php endif; ?> 243 7.3.3 Implementing Paged Comments You just never know when you have some content on your site that will explode and attract hundreds of comments. What am I talking about? You guys are stars, I’m sure that’s going to happen to you all the time! A Post with hundreds of comments can have pretty crazy vertical scroll going on. In general, we aren’t afraid of vertical scroll on the web (unlike that nasty horizontal scroll), but there are limits to anything. A recent post on CSS-Tricks with 62 comments netted 17,827 pixels in height! An excellent way to handle posts that receive millions of responses is to break the comment thread into sections and display it across multiple pages. This “Paged Comments” feature was introduced in WordPress 2.7 and is extremely easy to implement. Go to Settings > Discussion in the Admin area to enable it: And then in your comments.php file, insert these two template tags wherever you would like the “Next” and “Previous” pagination buttons to appear: <?php previous_comments_link(); ?> <?php next_comments_link(); ?> That set of tags will output the next/previous links for your comments area, automatically appearing only when there is more than one page of comments. If there is only one page of comments, no links are displayed. 244 HEADS UP: There are some potential duplicate-content issues (an SEO problem) with paged comments. This is because there are multiple unique URLs generated for each page of comments. Each of these URLs contains the exact same content as the original post. For example: http://yoursite.com/ghost-dad-rocked/ http://yoursite.com/ghost-dad-rocked/comments-page-1/ http://yoursite.com/ghost-dad-rocked/comments-page-2/ http://yoursite.com/ghost-dad-rocked/comments-page-3/ Content-wise, the only difference between these three pages is the comments. To make matters worse, each of the comments has a datestamp that is a permalink to that particular comment, which uses the paginated URL in the link. So when a search bot wanders through, they’ll see lots and lots of links to the “/comments- page-1/” version of your post – most likely many more links are pointing to the comment pages than the actual post URL. To prevent this duplicate content issue from happening, there are several possible solutions: • Don’t use paged comments and party like it’s 2007 • Use meta tags to specify the canonical URL for each post • Install the SEO for Paged Comments plugin – http://digwp.com/u/36 If your site is super-popular, or is getting to be that way, it is probably a good idea to set some upper-limit for the number of comments that appear on a page and use a plugin to set the canonical URL for the post. If the number of comments for each post on your site is minimal, the easiest thing to do is simply forego the paged comments and go “traditional” with each post including all of its comments on the same page. To actually change the way WordPress generates the comment pages, the SEO for Paged Comments plugin eliminates duplicate content by replacing your post Canonical URLs In 2009, the major search engines adopted support for canonical meta tags. These tags enable you to specify a single, denitive URL for your web pages, and thereby avoid any duplicate content issues. Here is an example of usage: <link rel="canonical" href="http://domain.tld/ canonical/url/" /> For more information on the use of canonical meta tags for WordPress, see Chapter 8.2.5. 245 content with excerpts on all comment pages other than the post page itself. I use this plugin on several of my sites and it works beautifully. 7.3.4 Implementing Threaded Comments Threaded comments enable people to write a comment that is a direct response to an already existing comment, creating a more conversational flow to a comment thread. This approach is almost always ideal, assuming the design of your site can support it. Implementing threaded comments begins by enabling the option in the WordPress Admin: Assuming your theme supports threaded comments, activating this option in the Admin will endow each of your comments with a “Reply” link that enables visitors to reply directly to any comment on your post. Before the implementation of threaded comments in WordPress 2.7, any direct replies to a comment required use of the infamous “@” symbol, as in “@comment- author: blah blah blah.” Although this method of replying has become quite common around the Web, it is no longer necessary on sites running WordPress version 2.7 or better. Now, instead of “@ing” someone to address a previous comment, you can simply click on the “Reply” link next to the comment itself. Once submitted, your comment will be displayed directly under the comment to which you were 246 responding. This functionality makes it possible for each comment to be the start of a new, tangential discussion, and greatly increases the usability of your comments area. If your theme does not provide threaded-comments functionality, here is an easy way to implement them within your comments.php file: 1. Backup your files, as usual (just in case you need to restore original files). 2. In the WordPress Admin, check the “Enable Threaded (nested) Comments” in the Settings > Discussion page. Also specify how many “levels deep” you would like to nest your comments. 3. Add the following code to your header.php file, directly above the wp_head() template tag: <?php if (is_singular() AND comments_open() AND (get_option('thread_ comments') == 1)) wp_enqueue_script('comment-reply'); ?> 4. Add the following parameter to just before the closing “</form>” tag of your theme’s comment form: <?php comment_id_elds(); ?> 5. Make sure that the <textarea> of your theme includes an attribute of id="comment". 6. Make sure that your entire comment form is enclosed within a <div> with an attribute of id="respond". 7. Add a “cancel-comment” link just above your comment form: <div><?php cancel_comment_reply_link(); ?></div> 8. In your comments.php file, replace the old loop with the new hotness: <?php if (have_comments()) : ?> <ol class="commentlist"> <?php wp_list_comments(); ?> Starter CSS There are a lot of classes in the HTML of threaded comments that you need to account for in CSS to make the comments actually look properly threaded. It's often easiest to start with a base set of styles and adjust as needed. http://digwp.com/u/468 . example: http://yoursite.com/ghost-dad-rocked/ http://yoursite.com/ghost-dad-rocked/comments-page-1/ http://yoursite.com/ghost-dad-rocked/comments-page-2/ http://yoursite.com/ghost-dad-rocked/comments-page-3/ Content-wise,. class="comment even thread-even depth-1" id="comment-1"> <div id="div-comment-1" class="comment-body"> <div class="comment-author vcard"> . class="comment-meta commentmetadata"> <a href="http://localhost/283/2009/08/hello-world/comment-page- 1/#comment-1">August 13, 2009 at 3:08 pm</a> </div> <p>Hi, this