Load More Comments via AJAX

In this tutorial, we will discuss different ways of how you can create paginated comments in WordPress, in every of the mentioned ways we’re going to use AJAX (it means, that the comments pagination, load more button, or infinite scroll will work without page refresh).

This tutorial was first published quite a while ago, so I decided to leave the original screenshots of the Twenty Seventeen default WordPress theme. Of course, today we have block themes available, the latest one at the moment of updating this tutorial is Twenty Twenty-Five.

And here we go, that’s what we’re going to create in this tutorial:

Before going ahead and trying to implement any tips from this tutorial, make sure, that you have the comment settings configured as follows:

Of course, it doesn’t matter also, how many comments you would like to display on a single page.

Step 1. Comments Load More Button

First things first, let’s add a comments load more button to our theme. In many classic WordPress themes, you can easily do it just by replacing the paginate_comments_links() function with the code below. If you can not find this function in your active theme templates, then try to search for something like <ol class="comment-list">...</ol> and add the load more button somewhere after that.

<?php
	$cpage = get_query_var( 'cpage' ) ? get_query_var( 'cpage' ) : 1;

	if( $cpage > 1 ) {
		?>
			<div class="rudr-comments-load-more">More comments</div>
			<script>
			var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ) ?>',
	    	    parent_post_id = '<?php the_ID() ?>',
			    cpage = <?php echo absint( $cpage ) ?>;
			</script>
		<?php
	}

Wait, isn’t the cpage query var equal to the current comment page number?

Yes, but since we have the last comment page displayed first (you remember, we did it in the settings?), now the cpage parameter is equal to the maximum number of comment pages.

So, the condition if( $cpage > 1 ) { means two things at the same time — print the comments load more button and the scripts if:

1. there are 2 or more comment pages,
2. currently, we are not on the first comment page, which will be displayed as the last one.

If you are looking at the wp_localize_script() direction, please do, but note that get_query_var( 'cpage' ) doesn’t work inside the wp_enqueue_scripts action hook. If you find a simple way to do it, I would appreciate it a lot, if you share your ideas in the comments section, if you have no idea what I’m talking about, a good wp_localize_script() example you can find here.

Step 2. Load More Comments with AJAX and jQuery

I hope you don’t mind if I use jQuery in this example. Maybe writing code in vanilla JavaScript will make someone feel more professional, but in our case, especially if we’re working with the classic WordPress theme, in most of them, jQuery is already included by default, so there is nothing wrong with that.

Let’s create an empty JS file, for example, load-more-comments.js, and put it somewhere in our theme. Don’t forget to consider creating a child WordPress theme, unless you’re working with your own custom theme.

This is the code for the file:

jQuery( function( $ ){

	// comments load more button click event
	$( '.rudr-comments-load-more' ).click( function( e ){
		
		e.preventDefault(); // in case you decide to use <a> tag
		
		const button = $(this);
		// decrease the current comment page value (declared before)
		cpage--;

		$.ajax({
			url : ajaxurl, // AJAX handler URL (declared before)
			data : {
				'action': 'cloadmore', // wp_ajax_cloadmore
				'post_id': parent_post_id, // the current post (declared before)
				'cpage' : cpage, // current comment page
			},
			type : 'POST',
			beforeSend : function ( xhr ) {
				button.text( 'Loading...' ); // preloader here
			},
			success : function( data ){
				if( data ) {
					$( 'ol.comment-list' ).append( data );
					// restore the text of the load more button
					button.text( 'More comments' ); 
					// if it is the last page, remove the button
					if ( 1 == cpage ) {
						button.remove();
					}
				} else {
					button.remove();
				}
			}
		});

	});

});

Just in case you’re not sure, how to include this load-more-comments.js file into your theme, then here you go:

add_action( 'wp_enqueue_scripts', function() {
	
	wp_enqueue_script( 'jquery' );
	
	wp_enqueue_script( 
		'comments-load-more', 
		get_stylesheet_directory_uri() . '/load-more-comments.js', 
		array( 'jquery' ),
		'1.0', // file version
		true // in the footer
	);

} );

Once done, please try to click your comments load more button. Does it change the text to “Loading…” at this moment? If yes, I guess everything has been done correctly and we can continue.

If not, I’d recommend you to check the browser console, probably something is not right with your JavaScript code or how you included it into your theme.

Step 3. Retrieve the Next Comments Page in PHP

At this moment, you should know how to use AJAX in WordPress. If you do, the code below will be pretty simple for you.

In any case, I will try to describe everything in detail along the way.

// add_action( 'wp_ajax_{ACTION}', ...
// we passed the action parameter in the jQuery code before
add_action( 'wp_ajax_cloadmore', 'rudr_comments_load_more' );
add_action( 'wp_ajax_nopriv_cloadmore', 'rudr_comments_load_more' );

function rudr_comments_load_more(){

	global $post;
	$post = get_post( $_POST[ 'post_id' ] );
	setup_postdata( $post );

	wp_list_comments( array(
		'avatar_size' => 100,
		'page' => $_POST[ 'cpage' ], // current comments page
		'per_page' => get_option( 'comments_per_page' ),
		'style' => 'ol', // comments won't be wrapped in this tag and it is awesome!
		'short_ping' => true,
		// we just copy the params from wp_list_comments() used in our theme
		'reply_text' => twentyseventeen_get_svg( array( 'icon' => 'mail-reply' ) ) . __( 'Reply', 'twentyseventeen' ),
	) );

	die; // don't forget this thing if you don't want "0" to be displayed
}

I think it is pretty much it guys. We have just configured the comments load more functionality for the classic WordPress theme, Twenty Seventeen.

Load More Comments in Block Themes

Well, developing a load more comments button in a WordPress block theme is a completely different story. Here we’re going to try to figure out how we can do that.

Let’s activate a block theme right now, for example, Twenty Twenty-Five, and then navigate to Appearance > Editor, then to the Templates. We will need to open a “Single Posts” template.

We will see the following block structure in the “Document Overview”:

Ok, what options do we have here to allow our site visitors to load more comments asynchronously?

To be honest, not many.

First of all, let’s take a look at the “Comments Pagination” block. It may seem similar to the “Pagination” block for posts, but they are completely different because the latter supports the Interactivity API and works without page refresh. So, this option is out. Or we can just wait when this functionality appears in the next WordPress versions.

Basically, the only option we have here is to develop a custom Gutenberg block that will add a comments load more button, kind of similar to a block I developed for loading more posts. What are your thoughts on this, guys? Let me know in the comments below.

# WordPress, admin-ajax.php

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X