7.1.1 Optimizing the WordPress Comments Area One of the most exciting things about WordPress is its highly flexible commenting system. There is so much that you can do to improve and optimize your site’s comments area that the subject is worthy of an entire chapter of its own. Out of the box, WordPress provides a robust commenting and response system that enables any site to effectively integrate and expediently handle even large volumes of comments, pingbacks, and trackbacks. As good as the default comment system is, however, there is a great deal more that may be done to sharpen the appearance, functionality, and security of your WordPress-powered comment area. 7.1.2 Welcome to the WordPress Comments Area The heart of the blogosphere is driven by its interactivity. Publishing content with dynamic technologies like WordPress make it easy for millions of people to express themselves, share news, and produce many other types of content. But the interactivity enabled by WordPress’ powerful commenting and response system connects users, authors, and machines to similar stories, related posts, and associated information around the web. The WordPress comments area is powerful, and with the help of some custom techniques, a few plugins, and a bit of knowledge, is easily transformed into a highly interactive content response system. This is fun, exciting stuff that will do wonders for the usability, likability, and popularity of your site. 7 Working with Comments 227 228 7.1.3 About the WordPress Comment System Whenever you post an article on your site, WordPress makes it possible and even easy for readers to respond to your content in various ways. Essentially, there are three different ways for your readers to respond to your post. They may either leave a comment directly, set a trackback from an article on their site, or else simply write about your post on their blog. As the response process unfolds on your site, there are many different aspects involved. Here are the different parts of a typical response area: 7.1.4 Comments, Pingbacks, and Trackbacks In WordPress, three different comment types are possible. The most familiar type of comment goes like this: a visitor arrives at your site, reads your post, and has something to say about it. They find a form, usually located after the article. They type in their name, email address, website URL, and then submit their comment. That’s just called a “comment,” and it will show up along with any other comments in your site’s comment area. The second type of comment is called a “pingback,” and is actually more of a response than a comment. Let’s say that you write a post about bacon and the Food Network decides to tell their readers about your sizzling article. They publish a post on their site that includes a link to your article so their readers can go there and read about bacon. In this scenario, WordPress would detect that incoming link from the Food Network and reciprocate by automatically posting a link back to the Food Network site. This return link usually displays the title of the linking post as its anchor text. The third type of response that WordPress enables is called a “trackback,” which is also much more of a response than an actual comment. To illustrate, let’s say that the Food Network mentions your bacon article but does not actually include a link to your site. If they create a trackback to your post (via the Post Edit screen in the WordPress Admin), your post will link back to the Food Network article. Aside from the differing underlying technology, pingbacks and trackbacks function nearly identically. The main difference is that an actual link is not required for trackbacks. Overly Confusing The end result of a pingback or trackback is the same thing, a comment on your site linking to another site that referenced you. The difference is in the technology of how it works. Pingbacks Pingbacks require an actual link to your post that comes from some other site. They link to you, and if your theme is set up for it, your site automatically links back to them. Trackbacks Trackbacks are very similar to pingbacks, but don’t require that the other site actually link to your post. All they need to do is tell WordPress to send a trackback to your post via the Post Edit screen. If trackbacks are enabled on your site, your post will then link back to the other site. 229 There is a great deal of fancy technology behind the functionality of pingbacks and trackbacks, the scope of which is beyond this book. What is most important to know for now is the different types of responses and how they are made: • Comments - left directly on your site by your visitors • Pingbacks - a link from one blog post that is returned by another • Trackbacks - a response (not necessarily a link) from one blog post that is linked back from another 7.1.5 Anatomy of the WordPress Comment Area There are four fields and a button that make up your garden-variety WordPress comment form: Name, Email, Website, Comment, and Submit. Seems easy enough, but the HTML markup for such forms is some of the most verbose and strange HTML imaginable. Throw in a host of special WordPress functions to enhance the comment form’s functionality, and you have yourself a fairly complex little chunk of code. The WordPress gods were aware of this complexity, and have taken steps to make things as easy as possible. For example, all of the code required for the WordPress comment system is contained within a single theme template file named “comments.php.” Thus, to enable comments, we need simply to include this file using the following template tag: <?php comments_template(); ?> That tag will most commonly be found in the “single.php” file, but could also Comment or Response? Technically, pingbacks and trackbacks are not comments. Yet many sites still lump together all types of responses as “comments,” as in, “This post has 15 comments.” More accurately, we would say, “This post has 15 responses.” 230 be included in other types of template files. For example, at the CSS-Tricks site, each video screencast is displayed with a custom Page template. The regular Page template is used for things like the Contact page and thus doesn’t include comments, but the video screencast template does, because each screencast is open and welcome to viewer feedback. Now that we know where comments are used and how they are included, let’s go through the anatomy of a typical WordPress Comment Area: A typical comments area should display older comments rst. Comments left on a post are essentially a discussion, and discussion only makes sense if displayed in chronological order. Flipping the order and displaying newer comments rst has potential uses, however, just make sure the purpose of the comment area isn’t discussion. For example, you can fairly easily create a community news section with a comment area. Just turn the label 'name' into 'title', and 'comment' into 'description' and ip the order to display most recent comments rst. Presto- chango – a user contributed links area, with it’s own RSS feed, since every Page or Post has its own unique comment feed (see Chapter 6.2.4). • The comment display area, or comment thread, may be configured to display comments in chronological order (oldest comment displayed first) or in reverse chronological order (newest comment displayed first) via a setting in the Admin Area (Settings > Discussion). • Nested comments were integrated into WordPress version 2.7 and enable your readers to respond directly to specific comments. Such comments are then “nested” within the area beneath the original comment. This is the best way to enable true back-and-forth discussions in comment threads. Fortunately, as discussed later in the chapter, WordPress makes it fairly easy. 231 Smashing Magazine uses tabs to toggle between comments and trackbacks/pingbacks. If you use the standard wp_list_comments function to display comments, eliminating comment metadata may come down to using display: none; in your CSS le. Otherwise, a custom loop is in order. Gravatars are connected to the author of the comment by their otherwise-hidden email address. In this screenshot, the bottom user does not have a Gravatar, either because they did not enter an email (wasn’t required), or because that email didn’t have an associated Gravatar. To avoid a missing icon, a default graphic is shown instead Screenshot: sixrevisions.com. • The comments display area displays three types of responses: comments, trackbacks, and pingbacks. These may appear together or else segregated into distinct areas. • Gravatars! These are small icons that are associated with each comment author. By default, WordPress can be configured to display Gravatars, and can even assign a random Gravatar for commentators that do not have them. • Comment metadata includes things such as the date and time the comment was left, the name and URL of the commentator, and even the sitewide and/ or local comment number. 232 • The comment form is the where the action happens. To leave a comment on your post, readers must fill out admin-specified fields (such as the name and email-address fields) of your comment form. • The “Name” field of your comment form is where a commentator may specify their name. This field is usually “required,” meaning that the comment will not be processed unless this field contains a value. • The “Email” field of your comment form is where a commentator may specify their email address. This field is usually “required,” meaning that the comment will not be processed unless this field contains a value. • The “URL” field of your comment form is where a commentator may specify their website address. This field is usually “optional” because not everyone has the luxury of having their own website. • The “Comment” field of your comment form is where the commentator writes the comment. This text field is obviously required because there would be nothing to post without it. • The “Submit” button is what the commentator must click in order for the comment to be processed by the server and ultimately displayed (or not, depending on your comments policy) in the comment thread. The comment form on CSS-Tricks offers some reminders about what people can and can’t do in the comment area. 233 Now that we have reviewed the basics, let’s dive into some great ways to improve the functionality, usefulness and user-friendliness of your response area. 7.2.1 Syndicating WordPress Comments So you posted something that really has your readers buzzing – you are getting tons of comments and even a good number of trackbacks and pingbacks. As the conversation evolves, make it easy for your readers and commentators to stay current with the response thread by syndicating the discussion in feed format. By default, WordPress does this automatically by way of variously formatted comment feeds. Many themes provide links to these built-in feeds for every post on the site. If your theme is not equipped with such links, you may add them quite easily by using one (or more) of the URL formats as described in the next couple of sections. 7.2.2 WordPress Main Comments Feed By default, WordPress creates an RSS feed of all the comments on your site automatically. This feed is available at any of the following three URLs: http://domain.tld/comments/feed/ - Permalink format http://domain.tld/wp-commentsrss2.php - Default format http://domain.tld/?feed=commentsrss2 - Query-string format Why have a feed for all of your comments? That’s a bit like asking why the sky is blue. It’s not obvious, but it’s mostly because WordPress is just trying to be cool and syndicate the information for anyone who wants to consume it. Perhaps you, as the Feed Formats For a more in-depth look at the different types of feeds and feed formats provided by WordPress, check out Chapter 6.3.1. 234 site admin, prefer to read new comments on your site via your RSS reader rather than have them come to you via email. Perhaps your super-fans want to make sure they keep up on every last comment posted on your site. The feed is simply there to serve any need that may arise. Most likely, however, your readers would rather tune in to conversations on specific posts. That’s where post-specific comment feeds come into play. 7.2.3 Post-Specific Comment Feeds Sucking on a firehose of every comment a site generates is usually counterproductive. Fortunately WordPress also produces RSS feeds specifically for each Post. The URL structure is simple and easy to remember. Just append “/feed/” onto the end of any Post’s permalink. Here is an example: • The Post - http://domain.tld/alligator-tacos/ • Post Comment Feed - http://domain.tld/alligator-tacos/feed/ Deliciously simple. Such comment feeds make it easy for savvy visitors to subscribe to the post to stay current with the conversation. In fact, many themes include prominent links to their Post Comment Feed for easy access. The nice thing about individual post feeds is that they are available to anyone at anytime, even if the subscriber has not commented on the post. Likewise, when using default (non-permalink) URLs, the post-specific comment feeds are available for each post via the following format: http://domain.tld/?feed=rss2&p=123 …where “p=” references the post ID. A good place to display a feed button or link for your Post Comment Feeds is immediately before or after the comment form of each post. By making the comment feed readily available next to the comment form, commentators will be reminded to grab the feed for future updates. 235 In addition to providing users a comments feed, you may also want to enable them to subscribe to comments via email. Often, receiving email notification of new comments is way easier than the process of subscribing (and eventually unsubscribing) to a new feed. Currently, WordPress does not provide this functionality by default, but until it does you can use Mark Jaquith’s Subscribe to Comments plugin, which is readily available at http://digwp.com/u/34. The Subscribe to Comments plugin is easily configurable via the WordPress Admin, and provides a complete set of configurational options. After the plugin is installed, a common place to display the subscription option is directly beneath each post’s comment form (see screenshot on this page). 7.3.1 Formatting the Comments Area To code or not to code? Remember we said earlier how the Comments area can be a bit complex and the WordPress gods have taken some steps to make it easier for us? One of the big things we were talking about was a very specific WordPress function. That function is this: <?php wp_list_comments(); ?> As a visitor leaving a comment, you have a checkbox giving you the ability to subscribe to subsequent comments on a post via email. As an author, you are notied that you are already the author of the post (hence automatically receive new comment notications) and are also given a link to manage subscriptions for the site. 236 It looks so simple and innocent right there on the page, doesn’t it? The fact is, wp_list_ comments is a powerhouse of functionality, able to drastically simplify comment display in your theme. This simplicity, however, comes at the cost of flexibility. The wp_list_comments function literally creates and spits out all of the required HTML for all of the comments on any Post. Because this function generates all of the HTML automatically, you need to work with what it gives you. This can be a problem. For a theme designer, having HTML that you can’t get your hands on can be frustrating. Don’t like the particular class names that are used? Too bad. Don’t want Gravatars? Too bad, you’ll have to hide them with CSS. So at this point you’ll have to decide which route you want to take: wp_list_comments • Easy to use out of the box • Built-in threaded comments • Built-in comment pagination • Default CSS classes for many comment properties . URLs: http://domain.tld/comments/feed/ - Permalink format http://domain.tld/wp-commentsrss2.php - Default format http://domain.tld/?feed=commentsrss2 - Query-string format Why have a feed for all. your WordPress- powered comment area. 7.1.2 Welcome to the WordPress Comments Area The heart of the blogosphere is driven by its interactivity. Publishing content with dynamic technologies like WordPress. any Post’s permalink. Here is an example: • The Post - http://domain.tld/alligator-tacos/ • Post Comment Feed - http://domain.tld/alligator-tacos/feed/ Deliciously simple. Such comment feeds make