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:
- Upgrade WordPress is to 2.7 version, if not yet upgraded.
- Login to WordPress admin and go to Settings -> Discussion
- Check on “Enable threaded (nested) comments ‘n’ levels deep”.
- Click Save changes to enable Threaded Comments.
- 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
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
- Copy
comments.phpwith a new namelegacy.comments.php. Thislegacy.comments.phpwill be used, if your wordpress is older version andcomments.phpwill be used for WordPress 2.7. - Copy the below code and paste in Themes
functions.phpfile - 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 uselegacy.comments.phpwhich is originalcomments.phpcode that came with the theme.
<?php
add_filter( 'comments_template', 'legacy_comments' );
function legacy_comments( $file ) {
if ( !function_exists('wp_list_comments') )
$file = TEMPLATEPATH . '/legacy.comments.php';
return $file;
}
?>
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 “<?php the_title(); ?>”</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 »</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
Posted under: Blog Related, Blogging, How-To, Wordpress|
2003 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: |
Posted under: Blog Related, Blogging, How-To, Wordpress
Article by Nihar
Nihar has written 1358 articles .If you like this Post, you can follow NiharsWorld on Twitter.
Subscribe to NiharsWorld feed via RSS or EMAIL to receive instant updates.
NiharsWorld is a revenue sharing blog, Write for us and make money. Read here for more info
Subscribe
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
reddys last blog post..Funny video: Student with brilliant idea
Thanks for the appreciation. Keep visiting and hope you get good return for advertising on my blog.
Great tutorial, Nihar! Threaded comment rocks so hopefully all WordPress bloggers are able to modify their themes!
Michael Aulias last blog post..Fight Against Spam
@Mike, thanks. I hope others as well including me has to modify the theme to support Threaded Comments.
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 =-.
Will try and implement it soon on my blog! Thanks for the post.
Aruns last blog post..Free Open Source Software for Windows
@Arun, If you have any problems just mail me.
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!
Ben Tremblays last blog post..The business mindset
Let me know if you find any difficulty in implementing it. I can help you
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!
Dennis Edells last blog post..$100 First Prize! The *Best Blog Review Contest* Is In Full Effect!
@Dennis, yeah its better to discuss an get it done by the designer of the theme. As mine is a free theme. I did it
Nice one Nihar. Looks like you took lot of effort to put that up. Well done.
SEO blogs last blog post..Link Building Ideas: 3
@SEO blog, yeah it took lot of time to get this work done.
I havent yet upgraded and was unaware threaded comments were an option. Ill have to check it out. Thanks for the post.
Matt Helphreys last blog post..The Three Most Important Things You Need to Increase Traffic to Your Blog
@Matt, If you theme is not supported then why not modify you theme to support threaded comments.
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.
Lyndis last blog post..WordPress Short Codes
@Lyndi, Yeah, it took lot of time to get it working. lot of testing. I am now almost done and will apply Threaded Comments change to the blog’s theme!
The thread is easy way to see the discussion going.
@Atniz, yeah, i agree the discussions on the blog becomes easier.
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
Sires last blog post..Does Google Control Your Blog?
@Sire, do you mean that you followed the steps mentioned and it didn’t work?
This was HUGE help, thanks!
Houston Lawyerss last blog post..Do I still owe debt if the person I owe it to dies?
@Houston Lawyers, I hope you were able to implement it.
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
Wei Liang | Earn Money Onlines last blog post..Lesson 21: Blog Carnival
@Wei Liang, Let me know, if this post helped you in getting threaded comments working or not?
Nihar, you rock dude! People like you sharing their knowledge is one of the main reasons that makes the internet so great!
@Jacques Seoman, Thanks for using such nice words and your appreciation!
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
Blog Tips for Beginnerss last blog post..101 Blogging Tips I
@Yan, Thanks for the appreciation. Are you using plugin for threaded comments functionality?
Only as far as selecting it in the dashboard.
Sires last blog post..Finding The Right Blog To Comment On
@sire, Thanks for informing. Let me check and fix it.
@sire, I think i have almost fixed it. left with some more testing.
@Sire, I have fixed it and also updated the code in the post. Can you try it and let me know.
@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
Blog Tips for Beginnerss last blog post..101 Blogging Tips I
I am now trying to fix it. If i fail in this, then i will use the plugin you suggested.
I’ve been using Brian Threaded Comments for one of my blogs.
Decas last blog post..SteelSeries Special-Edition World of Warcraft Mouse
@Deca, now there is no need to use plugins to get Threaded comments working. Why don’t you try disabling the plugin and use the default one.
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!
Kim Woodbridges last blog post..How to Remove
@Kim, Yeah. it would have definitely saved your time. Thanks for the appreciation.
The plus side is that by struggling through it I really learned it rather than just using someone else’s code. But again, you did a great job.
Kim Woodbridges last blog post..2 Online Resume and Portfolio Builders
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.
@JoshLuke,
Yeah but make sure that you add that line of code like this just before wp_head
<?php line of code ?>
I think the CSS exam is must for premium jobs.In our country there is a great demand for this persons.
@Jobs in Pakistan, I am not sure about this. but yes CSS is a must for a webmaster.
think the CSS exam is must for premium jobs.In our country there is a great demand for this persons.
@Jobs In Pakistan, Didn’t know about this. good to know this.
Thanks Nihar,
This totally works for me.
Keep up the good work
HeriCs last blog post..Sandal Jepit Isteriku
@HeriC, I am glad that this post helped you to implemented threaded comments!
Shall implement your code in my website.
Regards.
This is the error I received.
Warning: Cannot modify header information – headers already sent by (output started at…
Although the system worked for me. However, what is the reason for these errors? Could you guide?
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
Well I have become a bit anxious out here. I can’t log in to my website through wordpress!
Thanks for this !
I was having a hard time figuring it out. You saved me hours !
S
@Sebastien Night, I am glad that it helped you.
Although the system worked for me. However, what is the reason for these errors? Could you guide?
@josh,
Can you give me some details. So, that i could help you.
[...] advanced themes already support this feature and many others will not. If yours doesn’t read How to Implement Threaded Comments in WordPress Themes for how to tell if your Theme supports it and what to do if it doesn’t. If you need more [...]
thanks a lot. I did it for nakjadimande.com. but there is no avatar for the author in reply.
[...] How to implement Threaded Comments in WordPress Themes [...]
[...] How to implement Threaded Comments in WordPress Themes [...]
[...] (3) Upgrade your theme to included threaded comments. If you’re running WordPress 2.7 and above you can change your theme to have that functionality. [...]
[...] (3) Upgrade your theme to included threaded comments. If you’re running WordPress 2.7 and above you can change your theme to have that functionality. [...]
[...] How to implement Threaded Comments in WordPress Themes and Stylizing Threaded/Nested Comments in WordPress 2.7, [...]
[...] But, i would’nt worry as i have already enabled Threaded Comments to my Previous Theme. I will use How to implement Threaded Comments in WordPress Themes post to make Imagination Theme a Threaded [...]
Gracias, habia intentado por muchos medios lograr implementar lo comentarios en 2.7 pero tu gu
@Cristian, thanks for the comments. but, i don’t understand it
Why is this line twice, on 37 and 97??
Its displaying the warning meaage twice.
Sorry, the comment form is closed at this time.’
@Satish Gandham, Thanks for spotting this. I will check it and correct it if it is wrong.
Nice codes.
[...] How to implement Threaded Comments in WordPress Themes | Nihar’s World :: [...]
I am a relative newbie to Woirdpress and found your article very helpful. Thanks for the heads up.
@PSP Go, Hope you implement it on your wordpress if your theme doesn’t support it.
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?
@Nicholas, Sorry, i don’t have an answer for this. Please search on search engine. You may get the answer to it.
Finally we can get rid of Brian’s Threaded Comments – thanks for this post!
@Wordpress Help, I am glad that this post helped you.
[...] Threaded Comments – If you don’t know what threaded comments are, it’s very simple to explain. When people comment on a blog the oldest comment usually appears at the top of the list and the newest at the bottom, or vice-versa. Threaded comments allow users to reply to a specific comment, so it appears just below it in the list. This facilitates multiple conversations taking place in response to an article, which is great for building a community and allowing commentators to branch off and start their own new, interesting discussions. If you use WordPress and your theme supports threaded comments, you can simply switch them on by going in to the ‘Settings’ menu and the ‘Discussion’ options. If your theme doesn’t support threaded comments, I found this excellent post explaining how to implement them. [...]
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 =-.
@Calpe, Thanks.
Are there any words of wisdom you?d like to pass along to me?
I dunno what im doing wrong but it does not work on any of my wp web pages. any idea?
@Bi, Can you elaborate, what is not working?
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
@Sahra63, Can you let me know what problem you are facing?
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);
solved
@Nikita, Gr8
Can you please highlight the lines of code you added in this supposed tutorial?
@Nelson, I have put the code and also the file in which you have to add. I didn’t’ get you.
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!
[...] on your theme, you may need to add different code. Someone else has a lot more style they added to their theme. If you’re trying to style the threaded comments list, this support [...]
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?
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 )
Great post, it will save me lot of time, thanks for sharing such informative post.
I’ve written a few articles about Thesis customization
[...] How to implement Threaded Comments in WordPress Themes [...]
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