Posted on 11 February, 2009 By Kim Woodbridge 55 Comments

Adding WordPress 2.7 Threaded Comments to your Theme

Threads (by Buttersweet)

Probably one of the most talked about features of 2.7 is that threaded comments are built in. A plugin is no longer required for this functionality.

The problem is that it takes more that simply upgrading to 2.7 for this feature to be available. If you’ve got a brand new 2.7 ready theme then, yes, threaded comments will work. If not, you will need to make the theme “2.7 ready”.

So, you’re in luck because I’m going to walk you through the steps. I’m not sure if I like the way they look but I do like the functionality. I have saved my original files in case I decide to revert back.

Ok – here we go

  1. Backup or copy the following theme files: header.php, style.css and comments.php We are going to be editing these three files so we want to have the originals in case something goes wrong. And believe me – I was glad I had mine when I made the threaded comments for this site.
  2. Make a copy of the comments.php file in the default theme that comes with 2.7. Actually, I never upgrade the themes either so here’s a copy of it to download.
  3. Go to Settings > Discussion and check the box that says “Enable Threaded (nested) Comments”. You can also set how my levels of threading you allow. It defaults to 5.

    threaded

  4. Go to Appearance > Editor and open header.php. Add the following code.
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

    Add it directly above this

    <?php wp_head(); ?>

    And save the file.

  5. Got to Appearance > Editor> Comments.php. How you handle the next part is up to you and in how comfortable you are in editing your theme files. I replaced my comments.php code with the code from the comments.php file in the 2.7 default template. If your comments page is standard and not heavily customized, this may be all you need to do. Or, if your comments form is very customized, you may need to add code to the template that you just replaced. For example, my comment form was misaligned because the default comment form doesn’t use the same css classes that I do. My submit button uses a class called Cbutton so I needed to add that to the comments.php template. If you are more comfortable editing the theme files you can compare yours to the new 2.7 comments files and make the necessary changes. Personally I found it easier to replace the file and then adjust as needed. Some of the components in the new code are absolutely necessary and threaded comments won’t work without it.
  6. But let’s take a look at some of the primary differences. The previous pre 2.7 comments file started with
    <?php // Do not delete these lines
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');

if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {
// and it doesn't match the cookie
			?>

<p class="nocomments">This post is password protected. Enter the
password to view comments.

<?php
			return;
		}
	}
?>

    The beginning of the new comments files looks like this.

    <?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */

// Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename
($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');

if ( post_password_required() ) { ?>
<p class="nocomments">This post is password protected.
Enter the password to view comments.

<?php
		return;
	}
?>

    Now, I am the first to admit that I don’t completely understand that code. I’m content knowing that I need the second one and using it. It is a password protection check and WordPress now has a function for it rather than accessing the cookie directly.

  7. The primary change is the comments loop. The old method used a foreach statement and went through all of the comments one by one and output them manually. It could also be difficult to manage with a lot of theme customization. Believe me on that one – that is what took me so long to include threaded comments on my site. The new comments look also includes the have comments function rather than doing a check on the global comments variable. So, the comment look used to look like this.
    <?php if ($comments) : ?>
	<h3 id="comments"><?php comments_number
('No Responses', 'One Response', '% Responses' );?> to “
<?php the_title(); ?>”

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

    And now it looks similar to this. 

    <?php if ( have_comments() ) : ?>
	<h6 class="postcomment clear"><?php comments_number
('No Responses', 'One Response', '% Responses' );?> to “
<?php the_title(); ?>”</h6>


	<ul class="commentlist">
	<?php wp_list_comments( ); ?>
<br />
	</ul>
<?php endif; ?>

	<div class="navigation">
		<div class="alignleft"></div>
		<div class="alignright"></div>
	</div>
 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ('open' == $post->comment_status) : ?>
		

	 <?php else : // comments are closed ?>
		
		<p class="nocomments">Comments are closed.

	<?php endif; ?>
  8. The heart of this, of course is the wp_list_comments() function. This outputs the comments, the html and provides the classes to assist with styling. It is wrapped in 
    <ol> </ol>

    I changed mine to 

    <ul></ul>

    because I did not want a numbered list. So, speaking of styling … what classes are gifted to us with this function?

  9. This list is from Stylizing Threaded/Nested Comments in Wordpress 2.7 by Chris Harrison. You certainly don’t need to use all of them but you will want to use some of them. It is also very likely that your style sheet code will already be dealing with commentlist and you won’t need to change a thing. At the end of this list, I’m going to mention one that I have found especially useful.

    ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment  {}
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback  {}
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}
  10. Keep in mind that I wrapped my function in an unordered list so I changed all the ol in the above styles to ul.
  11. ul.commentlist li.bypostauthor {} This is very cool. I can set the color of my comment replies to be different than the rest of the comments. I’m not sure if it’s me but I couldn’t get assigning a background color to work so I did it with a very small repeating image. My full code looks like
    ul.commentlist li.bypostauthor {background: url(http://pathtomyimages/
comment-bg.gif) repeat-x !important;}

    To insure that all other comments are white I set ul.commentlist li.comment {} to white

    ul.commentlist li.comment { background-color:#fff;}

    This is so much easier than the way I had my comment colors set before.

I’m guessing that most of you are napping by now or have moved on. Over the weekend I struggled with the word ‘Says’ that the wp_list_comments() function adds in it’s html output after the name of the commentor. I didn’t want that word there and found that it wasn’t that easy to remove. Carla, from Green & Chic, mentioned this too so tomorrow I am going to discuss three possible ways to remove this from your threaded comments.

Also, you can leave a comment, use the threading, and marvel at my brilliance ;-)

photo credit: Buttersweet


Related Posts:
  • How to Remove “Says” From WordPress 2.7 Threaded Comments
  • How to Style a Sticky Post in WordPress 2.7
  • How to Style the Read More Link in WordPress
  • How to Embed Flickr Photos in Your WordPress Posts
  • How to Make a Post Sticky in WordPress 2.7
    • Posted In : Blogging Comments | WordPress Tips
    If you enjoyed this post, please subscribe to my RSS Feed

    Post to Twitter   Post to Delicious   Post to StumbleUpon

    55 Responses to “Adding WordPress 2.7 Threaded Comments to your Theme”

    Trackbacks/Pingbacks
    1. Twitted by kwbridge
    2. Nu med trådade kommentarer
    3. What I Like About My New Theme
    Leave a Comment
    You may use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> .


    Tags

    2.7 Backup Blog Blogging Comments Blogging Tips Bookmarks Code del.icio.us Email Environment Facebook Free Freelance Freelancing Funny Google Green Howto Images Kim Woodbridge Information Lifestream Lists Online Philadelphia Photos Plugin Plugins Posts RSS Recommendations Search Security Social Media Theme Themes Tips Tricks tutorial Tutorials Twitter Upgrade Video Videos WordPress Themes WordPress Tips YouTube



    Recent WordPress Bookmarks:

    Recent Comments

      • Kim Woodbridge: Hi Dennis - I could never park a car like that - even lining it up with the door in order to get into the house :-)...
      • Kim Woodbridge: Hi Carla - I didn't mean to sound snippy - I am a little irresponsible about it. I could get ok insurance if I tried h...
      • Kim Woodbridge: Hi Jamie - Thank you so much! And I'm really glad this helped you get the video on your fan page :-)...
      • Kim Woodbridge: Hi Vered - I found a lot of funny photos when searching on the keyword short but most of them weren't appropriate to use...
      • Dennis Edell: Can we say claustrophobia?? Damn that parking vid really creeps me out; being a big guy and all. LOL .-= Dennis Edell´s ...
      • shirley carr: How do I get all my apps displayed and edited on your new screens. Also I would like to comment that whenever you switc...
      • Juncai: Hi there, I was trying to add an image when i share to facebook. The code above for the link rel="image_src" href=”u...
      • Carla: Kim - I'm sorry for implying that anyone choosing (not because they cant pay or not eligible) to forgo insurance is irre...

    Popular Posts