scriptygoddessUpdate by Jennifer: In the interest of making things easier – please also see this post for a version of wp comments you can use. Upload it and be done.)
The cool thing about WordPress being a PHP-based dynamic system is that a certain part of your site, such as the wp-comments.php file, can take on a different form or function depending on its use. Here's how to make expandable/retractable comments.
This tutorial assumes that you are using Jenn's Show hide "More" plugin, which places the necessary JavaScript into the head of your WordPress pages. Although it uses that JavaScript, no modification of the plugin is needed, we can handle all of this by modifying our index.php and wp-comments.php files.
It also requires my Get Comments Count plugin.
Now, open up your wp-comments.php file. If you look near the top, you'll see this line:
if (($withcomments) or ($single)) {
What this means is that this comments page will only show its output if we are on a page where $single is true (a single entry permalink page), or where $withcomments is true. I looked, and couldn't find a single place in WordPress where $comments is set at all, so I imagine this was put there so you could specify http://www.website.com/2004/02/03/?withcomments=1 and have that day's posts shown with the comments sections attached. But expandable comments is a much better use of this variable, so we're going to use it.
The basic concept here is that you are going to modify your wp-comments page's "if" conditionals or adding some of your own such that all content that should only be shown on an individual entry page, such as the entire "add a comment" section, is wrapped in this:
<?php if ($single) { ?>
STUFF
<?php } // end "if ($single)" ?>
And all stuff that should only be shown on pages with dropdown comments should be wrapped like this:
<?php if ($withcomments) { ?>
STUFF
<?php } // end "if ($withcomments)" ?>
All things that will be displayed on both pages where $single is true and on pages where $withcomments is true, don't wrap them in an "if" conditional… remember, the whole page is wrapped in that.
So, for example, if you have a header with "Comments" at the top of your comment section, you'll want to wrap that like so, if you don't want that to appear in expandable comments:
<?php if ($single) { ?>
<h2>Comments</h2>
<?php } // end "if ($single)" ?>
And then do the same with any other elements you want to hide, such as the thing that shows the trackback URI.
Now, find the line that says:
<?php } // end for each comment ?>
</ol>
And put something like this in right below it:
<?php if($withcomments) {?>
<span style="comments-end">
<?php if ('open' == $post->comment_status) { ?>
<a href="<?php the_permalink(); ?>#post">Add a comment</a><br>
<?php } ?>
<a href="#comments-<?php the_ID(); ?>" onclick="showHide(<?php the_ID(); ?>,0,this,'comments');return true;">« Hide comments</a></span><br /></div>
<?php } // end the part that displays the end of the expandable comments ?>
Then change this line:
<?php } else { // this is displayed if there are no comments so far ?>
to this:
<?php } elseif($single) { // this is displayed if there are no comments so far ?>
And again, change this line:
<?php if ('open' == $post->comment_status) { ?>
to this:
<?php if ('open' == $post->comment_status && $single) { ?>
And finally, change this:
<?php } else { // comments are closed ?>
to this:
<?php } elseif($single) { // comments are closed ?>
Now that you've separated everything into "stuff that should appear on dropdown comments," "stuff that should appear in permalink comments," and "stuff that should appear on both," all you need to do is make the adjustments to your index.php file.
First, near the top of your index.php page, but after the "required line," you'll have to define the cases where $withcomments should be true. The default I am going to give you is all pages that are NOT permalink pages, but feel free to use the $year, $monthnum, $day, $name, $posts, $page, $single, $s, and $submit='search' to go crazy with configuring exactly which types of pages will have dropdown comments. I'll give you a few examples, so you see what I mean.
Default:
<?php if (!$single){ // $single is FALSE
$withcomments = TRUE;
}
?>
Dropdown comments ONLY on the main index page:
<?php if (!$_GET['submit'] && !$year && !$monthnum && !$day && !$name && $posts){
$withcomments = TRUE;
}
?>
Now, scroll down to the part in index.php where you want the "show comments here" link to appear.
And here's the code for it:
<?php if(get_comments_count() > 0 && $withcomments == TRUE) { ?>
<span id="comLink<?php the_ID(); ?>"> ( <a href="<?php the_permalink(); ?>#postcomment" name="com<?php the_ID(); ?>" onclick="showHide(<?php the_ID(); ?>,'<?php the_permalink(); ?>#postcomment',this,'comments');return false;">Show comments here »</a> )
</span>
<?php } ?>
This is the part that requires my plugin. This ensures that the "show comments here" link only appears if there actually ARE comments.
Finally, right above the code you just pasted, put this:
<a name="comments-<?php the_ID(); ?>"></a>
This is the anchor that the user will be scrolled to after re-hiding the comments. You can play around with its placement until you get it right.
And now, after saving index.php and assuming you did everything correctly, you should have dropdown comments!
I would like to point out that while this was one way of doing it, you also could have made a copy of wp-comments.php and changed it to output dropdown comments and then used a conditional statement in index.php to call the correct one, but in that case, any changes you made as to the display of one type of comments would not be reflected in the other type of comments, so I thought this approach was better.
