How to Show/Hide Comment Replies in WordPress

How to Show/Hide Comment Replies in WordPress

The other day I wrote a blog post that got quite a lot of comments. Under normal circumstances, this would be a great thing – who doesn’t want comments on their blog right? The problem was that I was having an argument with someone and the comment thread just kept getting longer and longer. I’ve written in the past about how to implement infinite comment replies in WordPress so that’s definitely a contributing factor! Long comments threads in a blog discussion section can be very entertaining for those wishing to follow them, but they can be intimidating for someone just browsing through. Moreover, if you have your comments reply box sitting at the end of your comment section as opposed to the beginning, a user has to scroll all the way down before they’re able to reach it. This means that the existence of a single discussion is shutting down the creation of new ones.

I’ve previously solved this problem using some trickery involving the Hikari Featured Comments plugin, but the add-on hasn’t been updated for years, was starting to throw various PHP errors, and was just behaving erratically in general. So this weekend, I cobbled together a new solution that’s much more scalable, requires the inclusion of just one JavaScript file, and one well-maintained plug-in. So let’s get started!

Installing “Featured Comments”

I’ve talked about this plug-in in the past with regard to highlighting comments that are special. It basically allows you to “mark” any comment with a “featured” or “buried” tag which adds a CSS class to that specific comment – it’s up to us to style it, or in our case bury it along with all subsequent comments in the same thread. After you download and install Featured Comments, you’ll find that when you view your WordPress discussions as an administrator, a couple of new links appear below each:

feature bury links

Clicking one of them marks the comment as either featured or buried. Sometimes I find that the links don’t always work in which case you need to go to the editing screen of the comment in question and you’ll see two new checkboxes at the bottom allowing you to mark them from there instead.

options in editor

Once that’s done, you can see the new CSS class if you want by checking the code of the comment you just marked. As shown in the screenshot below, a new class called “buried” has been added to the comment in question.

marked as buried

Now that we’ve set up this functionality, we can move to writing and inserting the JavaScript that performs our magic.

Inserting the Javascript File

Open up a new text file and save it with the extension “.js”. in my example, I’ve named the file “collapse.js”. Once the file is ready, copy and paste the following code into it:

jQuery(document).ready(function($) {

$('li').on('click', 'a.showLink', function() {
    $(this).nextAll().slideToggle();
    return false;
}); 

/* $( "li.buried" ).prepend( '<a id="test">Show/Hide Replies</a>' ); */$('<a class="showLink" style="cursor: pointer;"><strong>Show/Hide Replies</strong></a>').insertBefore("li.buried");
$('a.showLink').each(function( index ) {
    $(this).nextAll().toggle();

});

});

Once saved, the next step is to insert it into the “wp-content” folder in your WordPress directory. You can do this either via FTP, or see my earlier tutorial on how to use WordPress as a file manager when FTP is unavailable.

place javascript file

Once the JavaScript file is inside “wp-content”, we’re almost done. All that’s remaining is to write the PHP code that will enqueue our JavaScript along with the associated jQuery library. So open up your functions.php file or any other place where you place custom PHP code and paste in the following:

/* Add the show/hide javascript in wp-content  - collapse.js */
function add_collapse_js() {
wp_register_script('collapse_js', content_url('collapse.js', __FILE__), array('jquery'), true);
wp_enqueue_script('collapse_js');
}

add_action( 'wp_enqueue_scripts', 'add_collapse_js' ); 

Save your changes and reload the post containing the comment which you “buried” earlier. You should now see that it, along with all of the following comments and replies underneath it within the same thread have been replaced with a “Show/Hide Replies” link. Clicking this will slide them out and make them visible. Clicking it again, will simply re-hide them.

<

p style=”text-align: center;”>show hide links appear

Now isn’t that an elegant solution? The comments and replies are still there for anyone willing to read them, but you regular readers won’t have to scroll through dozens and dozens of comment replies that they’re probably not interested in just so that they can read the others, or leave a comment of their own.

Leave a Reply

This Website is Hosted by

Powered by RamNode

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.