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!!
|
|
1897 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: |
You Should Also Check Out These Posts:
- How to add Comment Link in Single Post – Wordpress
- Wordpress 2.6 Final Version is out! Grab it
- How to Remove Wordpress Meta Generator tag
- Wordpress 2.7 “Coltrane” is released!
- Moderate blog comments from your Desktop!!
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 – Round II
@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 – Compelling Link back content
@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’ve Learned in 2008
@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’ve Learned in 2008
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 “Says” From WordPress 2.7 Threaded Comments
@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ébastien Nights last blog post..Comment embrasser une femme en 45 min chrono
@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ía fue fundamental para lograrlo. Saludos desde Chile.
Cristián Raveau´s last blog ..De diarios y cucharas: el país que no sale en la prensa.
@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. [...]