BLOG

Collapse Long Comments In WordPress

Free WordPress Themes

If you have a WordPress blog, you want to encourage users to comment and read the comments of others as much as possible. Unfortunately, it sometimes works a little too well. How often have you seen an argument go on and on on your blog to the detriment of everyone else? Two people might get into a long discussion on some tangential topic with reply after reply following.
 

Collapse Long Comments In WordPress

This creates a long wall of text that is intimidating to readers who may not have the patience to scroll through all of it and read the subsequent threads. At the same time, you don’t want to behave in a dictatorial manner and simply shut them down (and you may be participating in the discussion yourself!)
 
Basically, it’ll be nice to have a way to automatically collapse long comment threads as and when you want and display a “Show more” link to users who can click through if they want. This way, only those who are interested in pursuing the argument further will see it.Collapse long comments in WordPress is an important thing to learn as your blog grows.
 
I have long struggled to implement such a system on my own blog, but without success. Recently however I finally managed to make a breakthrough by modifying some existing plug-ins and rewriting just a little bit of the theme code. I have to admit I’m rather pleased with myself! Here’s how you go about How to Collapse Long Comments In WordPress -Thread Replies in WordPress.
 

Installing Hikari Featured Comments

 
The first step is to install a little-known plug-in known as “Hikari Featured Comments”. It hasn’t been updated for a long time, but it gets the job done. Basically, it allows you to “Feature”, or “Bury” certain comments to which you can apply a separate CSS style. But there are other plug-ins that do this as well.
 
What makes Hikari Featured Comments standout is that it exposes certain PHP functions that allow you to extract a comment’s status as the page is being rendered. We’re going to make use of this feature while combining it with a previous version of another plug-in.
 

Downloading the Older Version of Jquery Comment Replies

 
There is a WordPress plug-in known as jQuery Comment Replies that collapses and expands all WordPress comment replies. Not exactly what we’re looking for. Unfortunately, as of now this plug-in is missing some JavaScript files that render it unworkable even in its intended form. So what we’re going to do is download an older version that does work and seems to be a bit simpler as well.
 
Navigate to the plug-in website on WordPress and click the “Developer” tab.
 
Collapse Long Comments In WordPress
 
From here, click the “Browse in Trac” link.
 
browse trac
 
This will open up a browser allowing you to download previous versions of the plug-in. The one that we are looking for is version 0.3 consisting of a PHP file. Click the “Revision Log” link at the top right as shown in the screenshot below.
 
Revision log
 
Now search for revision number 580441 with the revision comments saying “Updating plugin to version 0.3”.
 
Revision 580441
 
Expand the “trunk” folder and download the two files called jQuery-comments.php and readme.txt.
 
Download two files
 
Put them both in a folder called jQuery-comments and archive them in “zip” format. We have to upload the plug-in manually by clicking the “Add New” link in our WordPress plug-in screen, choosing “Upload”, in selecting the zip file we just created. Install and activate the plug-in, and we’ve just completed step two.
 

Modifying our wp_list_comments Function

 
In order for jQuery comments to work, we have to dig into our theme files and search for the wp_list_comments function. This will normally be present in the comments.php file, but depending on your theme set up it may be somewhere else. For example, I use the Genesis framework on my blog and I have to manually “unhook” the genesis_default_list_comments function and call it myself manually.
 
Once you find wp_list_comments or have worked around your theme to call it yourself, simply rename wp_list_comments to bb_list_comments instead as shown below.
 
Renaming wp_list_comments
 
In my example, I had to use a callback function with the default code from the WordPress documentation for my comments to render correctly. If you’re able to get by with just renaming wp_list_comments to bb_list_comments, good for you. Otherwise, use the following code below in your functions.php.
 
First replace wp_list_comments with:

/* Replace wp_list_comments() with this */
$args = array(
        'callback'      => 'child_comment_callback',
    );

    bb_list_comments( $args );

Now add this new function in functions.php

// This is where you customize the HTML output
function child_comment_callback( $comment, $args, $depth ) {
 
$GLOBALS['comment'] = $comment;
		extract($args, EXTR_SKIP);

		if ( 'div' == $args['style'] ) {
			$tag = 'div';
			$add_below = 'comment';
		} else {
			$tag = 'li';
			$add_below = 'div-comment';
		}
?>
		<  id="comment-">
		
		
%s says:'), get_comment_author_link()) ?>
comment_approved == '0') : ?>
$add_below, 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>

In this example, I’ve merely added a separate callback function for rendering each comment and used the default boilerplate WordPress code. Like I said, you may not need to do this if your comments already render properly.

Another possible problem is if you don’t have the correct version of jQuery installed. Add this to your functions.php file so that you load the one from Google’s libraries instead:

function modify_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'modify_jquery');

 

Modifying the JQuery Comment Replies Plugin

 
The final step is to make a small modification to the jQuery Comment Replies plugin. In the plug-in screen, locate the plugin entry and click “Edit” underneath it. This will open up the editor for the jQuery-comments.php file.
Edit plugin
 
Over here, we’re going to use the function from the first plug-in hkFC_is_comment_buried to test and see whether or not a certain comment is “buried”. If it is, we let the jQuery Comment Replies plug-in do its job, otherwise we prevent it from working. Search for the following code and replace it with the one below it:
 

switch ( $args['style'] ) {
			case 'div':
				echo "\n";
				echo "
\n"; break; case 'ol': echo "Show/Hide Replies\n"; echo "
    \n"; break; default: case 'ul': echo "Show/Hide Replies\n"; echo "
      \n"; break; }

 
Replace with:
 

switch ( $args['style'] ) {
			case 'div':
/* If the comment is not buried, change the class and make the text empty to that the expand/collapse link doesn't show */
			if (!hkFC_is_comment_buried()) {
				echo "
\n"; echo "\n"; break; } else { echo "\n"; echo "
\n"; break;} case 'ol': /* If the comment is not buried, change the class and make the text empty to that the expand/collapse link doesn't show */ if (!hkFC_is_comment_buried()) { echo "\n"; echo "
    \n"; break; } else { echo "Show/Hide Replies\n"; echo "
      \n"; break; default: } case 'ul': /* If the comment is not buried, change the class and make the text empty to that the expand/collapse link doesn't show */ if (!hkFC_is_comment_buried()) { echo "\n"; echo "
        \n"; break; } else { echo "Show/Hide Replies\n"; echo "
          \n"; break;} }

 
Save the plugin file and Let’s test it out!
 

Testing Buried Comments

 
Navigate to the top of any comment thread that you want to bury. Click the “Edit” link and as shown in the screenshot below, there are three checkboxes at the end of the edit screen. Click the “Buried” checkbox and save the comment.
 
Bury a comment
 
Now when you take a look at the comment thread, you should see a “Show/Hide Replies” text displayed in the entire comment section has been collapsed. Those who wish to explore further can expand it and read it, while everyone else can just skip it over.
 
Show Hide Replies
 
This is a great way to encourage long detailed discussions on your blog while at the same time thinking of your other users who might want to read more top-level comments instead. Using the “Hikari Featured Comments” and an older version of jQuery Comment Replies, you can achieve this goal in an elegant manner. So this is how you Collapse Long Comments In WordPress, do you love it?

Leave a Reply

Your email address will not be published. Required fields are marked *

  • business
  • blogger
  • lifehack
Unlimited Disk Space
Unlimited Bandwidth
Free Domain Name