Comments Load More. With Button or Infinity Scroll. No plugins used.
Please note, if you are looking for the feature how to publish comments in WordPress with AJAX, then please look at the other tutorial.
First of all let me show you what we will be creating. You can also download ready-to-use child TwentySeventeen theme with working ajax comments.
[videoloop mp4=”https://rudrastyh.com/wp-content/uploads/2018/01/wp-load-more-comments.mp4″ w=”1014″ h=”740″]
Before implementing any code or activating the child theme, please go to the Settings > Discussion and make sure that the checkbox is checked and last page is set to be displayed first.

Now you’re ready, let’s go!
Step 1. Add Loadmore button
Your first task is to find in your theme the comment pagination function paginate_comments_links()
and replace it with the code below. If you can not find it, then place the code somewhere after <ol class="comment-list">...</ol>
tag.
$cpage = get_query_var('cpage') ? get_query_var('cpage') : 1;
if( $cpage > 1 ) {
echo 'More comments
';
}
Since the last comment page is displayed by default, $cpage
is equal to the maxumim number of comment pages. The condition if( $cpage > 1 ) {
means two things at the same time — print the load more button and the scripts if:
- there are 2 or more comment pages
- we are not on the first comment page, which will be displayed the last.
If you are looking to 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 the simple way to do it, I will appreciate a lot if you share your ideas in comments, if you have no idea what I’m talking about, a good wp_localize_script()
example you can find here.
Step 2. Load More AJAX jQuery Script
In this step create an empty lolkekcheburek.js
file and fill it with the code from below.
jQuery(function($){
// load more button click event
$('.misha_comment_loadmore').click( function(){
var button = $(this);
// decrease the current comment page value
cpage--;
$.ajax({
url : ajaxurl, // AJAX handler, declared before
data : {
'action': 'cloadmore', // wp_ajax_cloadmore
'post_id': parent_post_id, // the current post
'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 );
button.text('More comments');
// if the last page, remove the button
if ( cpage == 1 )
button.remove();
} else {
button.remove();
}
}
});
return false;
});
});
We decrease cpage
value on line 8 because comment pages are displayed in descending order, we configured it in the beginning of this tutorial, remember?
Connect the lolkekcheburek.js
file after jQuery library the way you want, but better with wp_enqueue_script
action hook.
I didn’t plan to post this simple code but… Mmmmm… well.. π This small piece of code will reduce the number of questions in comments at least 2x times. To your theme functions.php
file:
add_action( 'wp_enqueue_scripts', 'for_those_who_have_no_idea_what_we_are_doing_here', 1 );
function for_those_who_have_no_idea_what_we_are_doing_here() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'lolkekcheburek', get_stylesheet_directory_uri() . '/lolkekcheburek.js', array('jquery') );
}
Once done, please click your button β does it change the text to “Loading…”? If yes, I suppose you did everything correctly. Congrats and let’s continue! π
If not, please check your browser console, it is something with your jQuery code. And remember — your can always check the ready child theme.
Step 3. Retrieve the next comment page in PHP
Another code for your functions.php
:
add_action('wp_ajax_cloadmore', 'misha_comments_loadmore_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_cloadmore', 'misha_comments_loadmore_handler'); // wp_ajax_nopriv_{action}
function misha_comments_loadmore_handler(){
// maybe it isn't the best way to declare global $post variable, but it is simple and works perfectly!
global $post;
$post = get_post( $_POST['post_id'] );
setup_postdata( $post );
// actually we must copy the params from wp_list_comments() used in our theme
wp_list_comments( array(
'avatar_size' => 100,
'page' => $_POST['cpage'], // current comment page
'per_page' => get_option('comments_per_page'),
'style' => 'ol', // comments won't wrapped in this tag and it is awesome!
'short_ping' => true,
'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
}
Bonus. Infinity Scrolling for Comments
I don’t recommend to use it because of a very simple reason — comment form is located under all comments. So, nobody could leave a comment until he scrolls down through all the comments. It seems ok, but what if there are 500 comments on this page?
In case you understand it but still want the infinity scroll just add this jQuery code:
jQuery(document).on('scroll', function() {
var btn = jQuery('.misha_comment_loadmore');
if( (jQuery(this).scrollTop() + jQuery(window).height() ) >= btn.offset().top){
// check if the ajax request isn't in process right now
if( button.text() == 'More comments' ) {
button.trigger('click'); // click the button
}
}
});

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
Thanks! That’s a great tutorial but I found some issues (not to blame you, but because of WordPress logic).
—
WordPress breaks comments per pages by strange logic so if you set discussion setting like this, you will have comments in the mixed order in result.
Even in the video the order of comments is kinda strange. Check out the time of comment publish in your video:
1st page: 6.49 am -> 6.50 am
2nd page: 6.48 am -> 8 am
—
Also it doesn’t account for a situation when there is only 1 comment on the last (newest) page. So you have 8 comments and you break by 2 so the result is always smooth.
If you had 7 comments and break by 6 youβd only have 1 comment loaded by default (and 6 hidden behind the button).
Hey,
The comments publish dates may look like this because we allow nested comments. And I could move some comments manually on that video π
About your last question β yes, it seems not perfect but that’s how comment paging works in WordPress.
#1 if you don’t want “1 comment only”, you can select “the first page displayed by default” in admin control panel.
#2 the nested comment won’t be weird if we stylize the children comment with indent margin.
Thank you!
Thanks Misha! I googled for load comments on button click. Here’s my view:
I and most other admins don’t need pagination, nor limiting comment loading to X per click.
With a goal of improving site speed(!), all we really need is a way to load all comments (facebook and site comments) only on button click. That’s why the large media corporations do exactly this.
Where admins display gravatars, all those calls can be saved for, if and when, the visitor wants to view comments, or to leave one.
So basically, even after reading your article and watching the animated gif above it, I am unsure if this can be achieved with your code – because clearly you had a different goal when coding it, it seems?
But with a goal of improving site speed(!) here’s what is needed:
– page loads only the article at first
– when visitor clicks button “Leave a comment”, the comment form is loaded below (this can alternatively always be loaded immediately, as it isn’t that much code normally)
– and when visitor clicks button “View comments”, ajax(?) loads ON THE SAME URL (no pagination!) all the comments below the article (or if desired, loads them in batches of 20 or whatever, if it is a large number).
Simple requirement! Insanely helpful for page speed! Particularly, when gravatars are used!
Just my view of the whole topic. Based on my experience as reader of media sites.
Added: So basically,
– find in the active theme the common place where comments start.
– for wordpress, this typically is
<section id="comments">
– have ajax(?) load the comments (and possibly commentform) in a container below that!
In a “container”, because already on first pageload of course you want the page footer etc be displayed. The comments just get loaded in a container above that.
Like I said, I can’t find any code that achieves this. Not sure if yours does, haven’t fully understood yours yet.
Hi David,
Yes, you can use my tutorial. But you need additional code that will load the first comments page on button click or on scroll.
Hi! Great tutorial. However, the code seems to not work with comments on pages, just for comments on posts… Do anyone know how the code can edited to work with pages?
Hey Anton,
Could you clarify what exactly doesn’t work and how?
Misha, I think he means this:
wordpress does pages and posts, and on HIS website apparently your code only works on POST type.
I can’t say if it would be the same for me, as said, I haven’t even understood your code yet. Thanks for your reply by the way – even that I didn’t understand though (“additional code”, tell that someone who doesn’t code, lol)… :-)
Give my suggestion a thought, I think you’ll realize that THAT is what is needed – and nothing else. Quite simple then really. Much simpler than what your code and other people’s code aims to achieve. ;-)
Thank for sharing the codes. It works as expected.
However I use custom comment walker and when load more comments, comment lists appear as default.
I tried to edit code in functions.php but no luck.
Here is what I added :
But comment lists still appear as default.
Hi,
Try to add
walker
parameter towp_list_comments()
function.Thank you. It worked.
Thanks! You helped me a lot!
Thanks for the tutorial!
In step 1 you can use
attribute:
and in javascript:
Thanks so much for your plugin.
The amazing question is..Why you didn’t used any of your codes in your site?
I use π
But only what I’m needed.
sorry but it didn’t work with me, also i got confused with the logic and code structure :), also i know php concept but wordpress making php look bad :(
thank you anyway :)
Well, ask specific questions, maybe I can help :)
Hi! Thanks for the code, it helped me a lot.
I’d like to change this line :
'per_page' => get_option('comments_per_page')
into this one :'per_page' => '3'
, but it doesn’t seem to work. Could you help?Thank you very much,
Clara
Hey Clara,
Are you sure, that it doesn’t work? Because in your case it will display 3 top level comments. If those comments have replied, more comments will be displayed.
Hey,
Thanks for the feedback.
No, it doesn’t work. It does display 3 top level comments, but the 3 last ones, and it doesn’t display the “More comments” link.
It works if I put 3 in the admin discussions page but it makes another problem on my website.. I don’t know how to make this work otherwise.
Thank you for your help,
Clara
Hey,
Well, it is hard to figure it out in comments. I have to look at your website, please contact me and send me website URL by email,
Hello Misha, thank you for you How to.
I followed all steps with attention but when I click ont “More comments”, it’s display “loading…” but nothing happens.
Hey Alex,
Most likely it is the error somewhere in you PHP code.
This is great. Couple notes:
1. You have parent_post_id as ajax parameter, but post_id in php function.
2. In later versions (or at least in mine), .comment-list was changed to .commentlist. Might be worth double-checking.
3. For woocommerce, you need to include the callback, such as:
Loved your work. Thank you!
Now I can load more comments, but the loaded comment reply link is wrong.
normal:mysiteurl/archives/1?replytocom=5#respond
error:mysiteurl/wp-admin/admin-ajax.php?replytocom=4#respond
Why is this error?
I hope you can give me some advice.thank you.
Yes! I have this too :(
Hi Guys,
I will try to find out what is wrong.
Great post! Works perfect, the problem above has to do with a bug in comment-reply.js: https://core.trac.wordpress.org/ticket/46260
The fix is to link the event to Reply links after they are loaded.
after
will do it.
WordPress breaks comments per pages by strange logic so if you set discussion setting like this, you will have comments in the mixed order in result.
Hey Lisa,
Agreed with you. I’m trying to figure it out the best way right now.
Hi Misha,
great tutorial, I really appreciate your work and effort to help others, thank you for that!
I was wondering whether this could be used for woocommerce product reviews as well.
Hey Barbara,
Sorry, I always remove unformatted code. Please check this comment.
And maybe you need to pass
'type' => 'review'
parameter as well.Hi i want to know that is there any code of yours that will do ajax pagination for comments, if you have please let me know, Thank you!
Hi,
No, at this moment I do not have this codes π
Thank you great one! straight to the point & clean code ππΌπ