WordPress 2.7 Theme Enhancements III
This is the final installment of how to update your theme to make use of the new WordPress 2.7 comment features.
Comment threading has been added to 2.7, which means that rather than your list of comments going in a straight order of date added, people can reply to a specific comment and their comment will appear below and indented from the comment they’ve replied to. There are pros and cons of using this method in my opinion. It means it’s easier to see mini conversations happening in the comments, but they also have to be styled well to make it obvious what’s what else it can get confusing!
However, the option is there so this is how to add it in.
Header Change
First of all we need to include a JavaScript file. This makes the comment box appear where the ‘reply to this comment’ link is, so that when someone replies to a specific comment they can still see the comment they’re replying to, rather than jumping to the bottom of the page.
The php code we need is
if ( is_single() ) wp_enqueue_script( 'comment-reply' );
This needs to be placed right before the tag wp_head(); in your header.php file. Save that and close it again.
Comment Code
Now open up your comments.php template and look for the submit button. Possibly below or just before it you’ll already have a hidden input for a field ‘comment_post_ID’. If it has, then delete this whole hidden input, as it’s no longer needed as HTML. Then add in the following code
<?php comment_id_fields(); ?>
This will add in two hidden inputs, one for comment_post_ID and the second is comment_parent.
For your comment textarea, it will have the name attribute value of comment. You also need to ensure that it has an id attribute with a value of comment as well. Some themes may have this, some won’t. I’ve explained in the past about how to have a well marked up comment form.
Next you need to surround your comment form with a div, with an id attribute value of ‘respond’. Double check that this id value hasn’t already been used in your theme, and if it has either remove it or rename it.
We can also change your form title from ‘Leave a Comment’ to use the following code
<?php comment_form_title( 'Leave a Comment', 'Leave a Reply to %s' ); ?>
The first parameter is what the comment form will be titled, however if the user clicks to reply to a specific commentator, then the second parameter is used, and the %s will be replaced with the commentator’s name.
Finally we just need to add in a cancel link, to allow the user to cancel their reply if they change their mind. This will hide the form out of the way then. Add this code in somewhere within your respond div.
<div id="cancel-comment-reply"><?php cancel_comment_reply_link() ?></div>
All of this code is available to be seen and tried out in the default theme’s comment.php file, which comes with the latest release of WP 2.7 (currently Release Candidate 1), or you can download this directly – default comment.php file.
Separating Comments and Pingbacks
If you’re like me, and prefer to have your Pingbacks separated from your comments, then a little additional code will be needed. Last week we had the new comment loop code starting with
< ?php if ( have_comments() ) : ?>
<h3 id="comments">< ?php comments_number('No Responses', 'One Response', '% Responses' );?> to “< ?php the_title(); ?>”</h3>
<ol class="commentlist">
< ?php wp_list_comments(); ?>
</ol>
First of all I would recommend to put the h3 first, else ‘No Responses’ will never be seen because the if statement says ‘if we have comments/pingbacks’. Then after the if statement we need to add in another if statement to check to see if we have actual comments (as opposed to pingbacks), using the code
if (!empty($comments_by_type['comment']) ) :
We then change the wp_list_comments() tag to check for comments only:
<?php wp_list_comments('type'=>'comment'); ?>
Then after the closing ordered list (ol) tag, we add in an endif to close the if statement we opened.
Then we can duplicate some of this code for our pingbacks, so right after the new closing endif, add in the following:
< ?php if (!empty($comments_by_type['pings']) ) : ?>
<h3>Trackbacks/Pingbacks</h3>
<ol class="pinglist">
< ?php wp_list_comments('type=pings'); ?>
</ol>
< ?php endif; ?>
So here we check that there are pingbacks, and if there are we create a list of them.
Example Source Code
As mentioned last week, I said I would post up an example comments.php template file, so here is my own file (minus the code for extra plugins and my content!). You may want to run through it and change the classes where necessary to suit your existing theme styles.
Download Comments Template File.
With this file you will also need to alter your single.php file (and your page template files if you have comments on any of them), and change the comments_templates() tag to contain two parameters as follows
<?php comments_template('', true); ?>
Conclusion
As explained already (a couple of times!). These are not required changes!! Your existing theme will continue to work on WordPress 2.7, just as your WordPress 1.5 theme worked fine on Wordpress 2.5! These changes are merely enhancements and are there to either give you a little more flexibility, or to allow you to make use of the new comment features. So don’t think you have to make these changes before you upgrade to 2.7! 
Previous posts in this series
Written by Sarah from Stuff By SarahPosted on December 7th, 2008 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates
17 Responses to “WordPress 2.7 Theme Enhancements III”
Author comments are in a darker gray color for you to easily identify the posts author in the comments
Comments are closed.
Comments are closed since this post is older than 30 days. However, you can continue this discussion in our popular Blogging Forums
Blogging Tips Sponsors
Blogging Tips Newsletter
Sign up to the Blogging Tips Newsletter for Free! What have you got to lose?
This is going to be really helpful, because the one part of making a WordPress theme I hate is writing the comments code. Thanks for this.
Thank you. All these are extremely helpful stuff, specially the commenting feature. Thanks for sharing this.
You’re welcome both
Here’s a handy topic on the WordPress forum listing out the CSS classes available from the new threaded comments feature
http://wordpress.org/support/topic/221693
Thanks Sarah,
Now all we need is a service where we can submit out favourite themes to get these code enhancements. Some themes are rather more complex than others and the testing process can blow out the time table.
Perhaps for a later review you may want to discuss the pros and cons of using a service like the IntenseDebate comments WP plugin.
I have been trying it for the past 3 weeks or so because it is so new and because of its complexity with JavaScript everywhere my view is that editing the Theme to add the comment capabilities is quicker and easier.
OTH I work with quite a few themes and so I’m hoping the authors will think about these comment enhancements as I think it brings more focus to the comments section.
The changes described by you are very easy and their effects are really great. After reading your post I have tried this and have done it successfully in a very short time. Thank you Sarah for helping me to update this commenting feature.
Hi Jason. A service is an interesting idea, although most popular themes will be upgraded by the theme developer themselves, so maybe ask them first.
As for reviews, that’s not really my ‘job’ here on Blogging Tips, as I write about WordPress theme coding, however Kevin may take a look
Found this site, downloaded the code, made some modifications and then lost this page
May I suggest doing a follow up post with just the theme changes and adding some title changes like: “Wordpress 2.7 Separate Comments and Trackbacks/Pings”
This would have saved me 2 hours
But excellent article. I have now bookmarked.
Hi Baz, sorry to hear of your lost time! Obviously, the page was named as such as it was part 3 of a series. The main focus of the post is the comment threading and the separation bit was more a case of ‘here’s the code, run with it’.
Anyhow, at least you’ve bookmarked it now
I tend to agree with Baz above. The first post in your series had naming convention that was different to the two follow-up pieces
It also took me quite a while before I was able to identify the 3 posts you mentioned were a series – (I have now bookmarked all of them on delicious.)
For example if I go to your latest post there is zero chance of getting to the one immediately previous.
I can try navigating a category but unless it you make an separate category for each author that won’t work either.
The related posts is vaguely useful but not in sequence. Ideally from each author I’d like to go to the previous post by that author without trying to guess.
Finally isn’t it an extreme irony that this blog theme doesn’t appear to support threaded comments (or it is not switched on under Settings, Discussion etc.)
No doubt it is coming (at least the site appears to be on 2.7) so that is great.
Well, not that I can change the titles and subsequent URLs on already written posts… I started writing the first post and then realised how much there was so split it into what I thought would be 2, then realised, 3 parts. The most I can do is link to the other two posts at the end of each post, however they are there under related posts which is why I didn’t in the first place
All posts from a specific author on Blogging Tips can be found on their author page. Click on the name for the ‘Our Writing Team’ box at the bottom of the screen. My own can be found here.
The design of Blogging Tips isn’t down to me. I would suggest comments about the site should go in the contact form and not in the comments of a post
And just to point out, in regards to the ‘irony that the blog doesn’t support threaded comments’. Besides the fact that the final version of 2.7 has been out for less than a week, so give people a chance to update, as I stated in my post. I personally wouldn’t use them as I find them more confusing to read through. So no, there’s no irony there at all.
I’ve configured everything properly but shouldn’t there be a “Reply” button next to each comment? How else does a user reply a specific comment? This blog doesn’t talk about adding a reply button next to each post, does that happen automatically?
I mean, somebody needs to call the moveForm() function in comment-reply.js and right now that’s not happening?
Ideas?