Collapse Long Comments In WordPress

By: | Updated: July 22, 2021

Our website is supported by our users. We sometimes earn affiliate links when you click through the affiliate links on our website.

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.

From here, click the “Browse in Trac” link.

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.

Now search for revision number 580441 with the revision comments saying “Updating plugin to version 0.3”.

Expand the “trunk” folder and download the two files called jQuery-comments.php and readme.txt.

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.

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.

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 ”
    1. \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 "<div='whateva'>\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 ”
    1. \n”; break; } else { echo “

Show/Hide Replies

    1. \n”; echo ”
      1. \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;} }
</div='whateva'>

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.

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.

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?

by Brett Helling
Brett has been starting, growing, and monetizing websites since 2014. While in college, he began to learn about digital marketing. After graduating, he continued to build a diverse portfolio of websites while working a full time job. After years of building the portfolio on the side, he made the jump to run his websites full time.

Leave a Comment