• Blogging
  • Freebies
  • Freeware
  • How-To
  • Make Money Online
  • Mobile
  • Home >> Blogging >> Blog Related >> How to implement Threaded Comments in WordPress Themes

    How to implement Threaded Comments in WordPress Themes


    In WordPress 2.7 Features, a new feature – Threaded Comments is introduced.

    The problem is that most of the wordpress bloggers are facing is that their theme doesn’t support Threaded or Nested Comments.

    To check whether Threaded Comments is supported by your current theme or not, Follow the below steps:

    1. Upgrade WordPress is to 2.7 version, if not yet upgraded.
    2. Login to WordPress admin and go to Settings -> Discussion
    3. Check on “Enable threaded (nested) comments ‘n’ levels deep”.
    4. Click Save changes to enable Threaded Comments.
    5. View any post of your blog that contains few comments.

    If you see a Reply link after each comment like shown below, then your WordPress Theme supports Threaded Comments otherwise it doesn’t support:

    You will see reply links for every individual comment

    You will see reply links for every individual comment

    My current theme doesn’t support it. I have made some changes to comments.php and style.css to support Threaded Comments. But, the changes are not yet live on my blog. I have done whole testing on my Local PC and the screenshot is taken from there. I need to do little bit of tinkering in CSS. By the way, if you are new to CSS then Learn CSS by reading this Book. Download It Free!

    Continue reading this post, To implement Threaded Comments feature in your WordPress theme


    Before you proceed further, please make a backup of comments.php, functions.php and style.css

    If you want your theme to be backward compatible (compatible with WordPress 2.7 and older versions), then do the following:

    You can skip the below steps, if you just want your theme to be compatible with WordPress 2.7

    1. Copy comments.php with a new name legacy.comments.php. This legacy.comments.php will be used, if your wordpress is older version and comments.php will be used for WordPress 2.7.
    2. Copy the below code and paste in Themes functions.php file
    3. <?php
      add_filter( 'comments_template', 'legacy_comments' );
      function legacy_comments( $file ) {
      	if ( !function_exists('wp_list_comments') )
      		$file = TEMPLATEPATH . '/legacy.comments.php';
      	return $file;
      }
      ?>
      
    4. Above code will check whether wp_list_comments function exists or not. If exists, it will cleverly use comments.php (which will contain Comment Threading feature) otherwise it will use legacy.comments.php which is original comments.php code that came with the theme.

    JavaScript Comment Functionality

    To allow full JavaScript functionality with the comment features in WordPress 2.7, the following changes must be made to header.php.

    To support the new JavaScript functionality with comment threading, add the following in the header.php immediately before the call to wp_head():

    if ( is_singular() ) wp_enqueue_script( 'comment-reply' );

    Now replace the below code in your comments.php file

    <div id="comments-wrap">
    <?php // 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.</p>
    	<?php
    		return;
    	}
    ?>
    
    
    <!-- You can start editing here. -->
    <?php // Begin Comments & Trackbacks ?>
    <?php if ( have_comments() ) : ?>
    <h6 id="comments-wrap"><?php comments_number('No Comments', 'One Comments', '% Comments' );?> to &#8220;<?php the_title(); ?>&#8221;</h6>
    	<div class="navigation">
    		<div class="alignleft"><?php previous_comments_link() ?></div>
    		<div class="alignright"><?php next_comments_link() ?></div>
    	</div>
    <ol class="commentlist">
    	<?php wp_list_comments(); ?>
    </ol>
    	<div class="navigation">
    		<div class="alignleft"><?php previous_comments_link() ?></div>
    		<div class="alignright"><?php next_comments_link() ?></div>
    </div>
    <?php // End Comments ?>
    
     <?php else : // this is displayed if there are no comments so far ?>
    
    	<?php if ('open' == $post->comment_status) : ?>
    		<!-- If comments are open, but there are no comments. -->
    
    	 <?php else : // comments are closed ?>
    		<!-- If comments are closed. -->
    		<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
    
    	<?php endif; ?>
    <?php endif; ?>
    
    <?php if ('open' == $post->comment_status) : ?>
    
    <div id="respond">
    
    <h4 class="postcomment"><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h4>
    
    <div class="cancel-comment-reply">
    	<small><?php cancel_comment_reply_link(); ?></small>
    </div>
    
    <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
    <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
    
    <?php else : ?>
    
    <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
    
    	<?php if ( $user_ID ) : ?>
    
    <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>
    
    	<?php else : ?>
    
    	<p>
    	<input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="28" tabindex="1" />
    	<label for="author"><?php _e('Name'); ?></label> <?php if ($req) _e('(required)'); ?>
    	</p>
    
    	<p>
    	<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="28" tabindex="2" class="textarea" />
    	<label for="email"><?php _e('E-mail'); ?></label> <?php if ($req) _e('(required)'); ?>
    	</p>
    
    	<p>
    	<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="28" tabindex="3" class="textarea" />
    	<label for="url"><?php _e('<acronym title="Uniform Resource Identifier">URI</acronym>'); ?></label>
    	</p>
    
    
    	<?php endif; ?>
    
    	<p>
    	<label for="comment"><?php _e('Your Comment'); ?></label>
    	<br />
    	<textarea name="comment" id="comment" cols="60" rows="10" tabindex="4" class="textarea"></textarea>
    	</p>
    
    	<p>
    	<input name="submit" id="submit" type="submit" tabindex="5" value="<?php _e('submit'); ?>" class="Cbutton" />
    	<?php comment_id_fields(); ?>
    	</p>
    	<?php do_action('comment_form', $post->ID); ?>
    </form>
    <?php endif; ?>
    </div>
    <?php else : // Comments are closed ?>
    <p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
    <?php endif; ?>
    </div>
    

    Most of the changes are done. If everything is done properly, you should be seeing Comment Threading appearing on the post. But, with the new code for comments in place, you need to style the comments area on the WordPress Theme with more design integration than previously.

    Below is the snippet of CSS Styling that i added to current Theme’s style.css, you can refer this for your understanding and style it according to your Themes look:

    .alt {margin: 0;padding: 10px;}
    #comments ol {list-style-type: none;line-height: 18px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 10px;padding-left: 5px;}
    #comments ul li {list-style-type: none;list-style-image: none;list-style-position: outside;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 5px;padding-top: 5px;padding-right: 0px;padding-bottom: 0px;padding-left: 0pt;}
    .commentlist {padding: 0;text-align: justify;}
    .commentlist li {margin: 15px 0 10px;padding: 5px 5px 10px 5px;list-style: none;}
    .commentlist li ul li { margin-right: -5px;margin-left: 10px;list-style: none;}
    .commentlist li li {background:none;border:none;list-style:none;margin:3px 0 3px 20px;padding:3px 0;}
    .commentlist li .avatar {border:1px solid #ccc;margin:15px 8px 6px 0;float: right;padding:2px;width:45px;height:45px;}
    .commentlist cite, .commentlist cite a {font-weight: bold;font-style: normal;font-size: 1.1em;}
    .commentlist p {font-weight: normal;line-height: 1.5em;text-transform: none; margin: 10px 5px 10px 0;}
    #commentform p {font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;}
    .commentmetadata {font-weight: normal; margin: 0;display: block; color: #ca5433;}
    .commentmetadata a, .commentmetadata a:visited {color: #fa7703;}
    .commentmetadata a:hover{ color: #333333;}
    .children { padding: 0; }
    .thread-alt {background-color: #f8f8f8;}
    .thread-even {background-color: white;}
    .depth-1 {border: 1px solid #ddd;}
    .even, .alt {border-left: 1px solid #ddd;}
    

    If you don’t follow any part of the above post or want any clarification. Please leave a comment. I would be happy to respond.

    Any suggestions to improve this post are also welcome. I will change this post to make it more clear.

    Hope you have implemented Comment Threading on your WordPress Theme!!

    IMPORTANT: This blog welcomes Guest Bloggers, Writers to also contribute by writing Guest Posts and also Make Money!. Check out our Revenue Sharing Program
    1924 readers are already subscribed to this blog! Why don't you be one of them? Subscribe to this blog via your favorite RSS feed reader or by entering your email address on the form below:





    87 Comments

    1. reddy says:

      Thanks for the info..I am a regular follower of your blog.I like your blog very much and even started advertising on your blog

    2. Nihar says:

      Thanks for the appreciation. Keep visiting and hope you get good return for advertising on my blog.

    3. Great tutorial, Nihar! Threaded comment rocks so hopefully all WordPress bloggers are able to modify their themes!

      • Nihar says:

        @Mike, thanks. I hope others as well including me has to modify the theme to support Threaded Comments.

        • Thomas says:

          Just a quick message to say thanks for the tips. Very useful indeed.

          I’ve had the same theme for a long time and have wanted to get threaded comments working on it for ages.

          I had to mess around with your CSS for a while (because I’m not especially skilled in that area) but it worked a treat in the end.

          Much appreciated and thanks.

          Thomas
          .-= Thomas´s last blog ..Catheter Time =-.

    4. Arun says:

      Will try and implement it soon on my blog! Thanks for the post.

    5. Ben Tremblay says:

      Very nice! I recently updated to WP 2.7 and wanted to enable threaded comments. Unfortunately my theme doesn’t support it yet and I didn’t have the time to look into it, but I just bookmarked your post for future reference! πŸ˜‰ THanks!

    6. Dennis Edell says:

      Hmm, since mine is custom made, I’m guessing I should discuss it with the designer first, before I start messin’ around; thanks for the info!

    7. SEO blog says:

      Nice one Nihar. Looks like you took lot of effort to put that up. Well done.

    8. I havent yet upgraded and was unaware threaded comments were an option. Ill have to check it out. Thanks for the post.

    9. Lyndi says:

      You went to a lot of trouble on this one. Well done. Threaded comments are not for everyone, it all depends on your own commenting policy. If you enjoy answering all the comments received on your blog, then threaded comments is the way to go. Some folks prefer answering a few comments all in one comment. In this scenario threaded comments could work against you.

    10. Atniz says:

      The thread is easy way to see the discussion going.

    11. Sire says:

      Nope, didn’t work so I suppose it doesn’t support my theme. No big deal, I’ll just continue to use my threaded comments plugin. You post did get me all excited though πŸ˜‰

    12. This might have just come in handy since my blog has problem supporting the in build threaded comment. Thanks for the share Nihar.

      Cheers
      Wei Liang

    13. Nihar, you rock dude! People like you sharing their knowledge is one of the main reasons that makes the internet so great!

    14. My goodness, I didn’t even realize that there is so much tinkering with CSS and php for threaded comments to work. I recall I had a hard time trying to get Brian’s Threaded Comments to work properly on my blog. It took me a good 2 hours to fix everything up. I’ll keep this article handy for future reference. Thanks, buddy!

      Yan

    15. Sire says:

      Only as far as selecting it in the dashboard.

    16. @Nihar:

      Yes, I’m using Brian Threaded Comments. I’m yet to upgrade to WP 2.7 as I don’t want to repeat the whole process of changing my comment.php. Maybe in the near future..

      Yan

    17. Deca says:

      I’ve been using Brian Threaded Comments for one of my blogs.

    18. I wish I had seen this when your first posted it – it would have saved me a lot of time πŸ™‚

      I like that you referred people to a free CSS book and set up the section for being backwards compatible. It was also really useful how you told people to enable threaded comments to determine if their theme was already set up for them or not.

      Great job!

    19. JoshLuke says:

      Great info but I’m a total newbie on this.
      Can you guide on the part where you said, “add the following in the header.php immediately before the call to wp_head(): ”

      is this command “if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ );” is on its own line just before the “”

      total newbie. Pls Advise. Thanks.

      Josh Luke.

    20. Jobs In Pakistan says:

      I think the CSS exam is must for premium jobs.In our country there is a great demand for this persons.

    21. think the CSS exam is must for premium jobs.In our country there is a great demand for this persons.

    22. HeriC says:

      Thanks Nihar,
      This totally works for me.

      Keep up the good work

    23. Kartikey says:

      Shall implement your code in my website.
      Regards.

    24. Kartikey says:

      This is the error I received.

      Warning: Cannot modify header information – headers already sent by (output started at…

    25. Kartikey says:

      Although the system worked for me. However, what is the reason for these errors? Could you guide?

    26. Kartikey says:

      I have undone everything to get my old settings back…
      even now I get the error message

      Warning: Cannot modify header information – headers already sent by (output started at…theyoungindia/html/wp-admin/theme-editor.php on line 70)

      I get this error message when I click on the Update File Button. Kindly advise

    27. Kartikey says:

      Well I have become a bit anxious out here. I can’t log in to my website through wordpress!

    28. S says:

      Thanks for this !
      I was having a hard time figuring it out. You saved me hours !

      S

    29. Nihar says:

      @Sebastien Night, I am glad that it helped you.

    30. josh says:

      Although the system worked for me. However, what is the reason for these errors? Could you guide?

    31. YNa says:

      thanks a lot. I did it for nakjadimande.com. but there is no avatar for the author in reply.

    32. Cristi says:

      Gracias, habia intentado por muchos medios lograr implementar lo comentarios en 2.7 pero tu gu

    33. Why is this line twice, on 37 and 97??
      Its displaying the warning meaage twice.
      Sorry, the comment form is closed at this time.’

    34. PSP Go says:

      I am a relative newbie to Woirdpress and found your article very helpful. Thanks for the heads up.

    35. Nicholas D. says:

      How can one implement this using the Thesis framework?
      Would we still have to edit the comments.php file? Or is there a way to do it by simply editing just the custom_functions.php and custom.css files of thesis?

    36. Finally we can get rid of Brian’s Threaded Comments – thanks for this post!

    37. Calpe says:

      I will be using this on my blogs, will do a test page first.
      .-= Calpe´s last undefined ..If you register your site for free at =-.

    38. Perkins says:

      Are there any words of wisdom you?d like to pass along to me?

    39. Bi says:

      I dunno what im doing wrong but it does not work on any of my wp web pages. any idea?

    40. Sahra63 says:

      Hi all, would a person if possible help me out? I come here the other day by way of yahoo but now can’t find once more the post I was reading that day . And before somebody asks, no I’m not blond simply not that great with computers hehe.
      Kiss

    41. Nikita says:

      Hi! I have got a problem. When I post a comment, I`m sent to page where is written:

      Warning: Cannot modify header information – headers already sent by (output started at /home/victoryi/public_html/wp-content/themes/arthemia/functions.php:59) in /home/victoryi/public_html/wp-includes/pluggable.php on line 868

      in pluggable.php on line 868 i found: header(“Location: $location”, true, $status);

    42. Nelson says:

      Can you please highlight the lines of code you added in this supposed tutorial?

    43. Wow, this is a great post! I saved lots of time browsing the net, just to add threading to my wordpress blog. Most of the plug in is not working well, so I need to tweak it.

      But, your step by step is so clear and easy to follow.

      Thanks a lot Nihar! πŸ™‚

    44. ZebaSz says:

      I want to implement this with my current theme (Chris Pirillo’s WicketPixie), but I don’t know how to implement it without losing the theme’s look. Could you help me out?

    45. Worm says:

      You know.. this was easy to setup and works great, but then i ran into a wall.

      I tweaked the css to the style of my theme only to realise that i cant find any php lines that would help me modify the actual composition of the comppents..

      For an example. I cant change the date and time of the comment to above the “unkown says:” because i cant simply find the php line anywhere…? And yes i did replace all code you had about comments.php to my old comments.php file.

      I just dont understand how those things even show up if i cant seem to find the php lines to fetch them…

      Could someone shed some light into this? ..and dont tell me im just blind and i cant find them.. cause i searched that file up and down for hours. ( seriously though if that is so.. tell me )

    46. Great post, it will save me lot of time, thanks for sharing such informative post.

    47. Johno says:

      Thanks for the info. Shame you site is so cluttered with ads. It took a bit of focusing to find the info I needed. You have some very good information here and I can imagine a fair few visitors will get put off by the shear number of ads they see. If I had come hear from google I would have clicked Back rather than keeping browsing

    Leave a Reply

    page counter
    NiharsWorld on Twitter NiharsWorld on Facebook NiharsWorld RSS Feed