last day (17 days later) » 

8:59 AM
2
A: Load More Posts Ajax Button in Wordpress

dingo_dEDIT I've tested this on Twenty Fifteen and it's working, so it should be working for you. In index.php (assuming that you want to show the posts on the main page, but this should work even if you put it in a page template) I put: <div id="ajax-posts" class="row"> <?php ...

 
Thanks for the reply, something in the functions.php section breaks the whole site, I don't know what it could be from looking at it, but if i remove the function the site works again.
If I remover these lines from the function than the site works again so my guess is there's ann error in here: while ($loop->have_posts()) { $loop->the_post(); $out .= '<div class="small-12 large-4 columns"> <h1>'.get_the_title().'</h1> <p>'.get_the_content().'</p> </div>'; } endwhile; endif;
Also get these errors in the console log load_posts @ custom.js?ver=4.2.3:10 (anonymous function) @ custom.js?ver=4.2.3:32 _.event.dispatch @ jquery.js?ver=2.1.3:25 _.event.add.q.handle @ jquery.js?ver=2.1.3:24
 
I'll check this out on my local wp now, get back to you soon with updates.
 
Thank You so much for the effort you've put in to help me, but i still can't get it to work. My load more button isnt clickable? do you know why that could be?
 
Do you have any js errors on your page? Inspect the page by clicking f12
 
Uncaught ReferenceError:ajax_posts is not definedload_posts @ custom.js?ver=4.2.3:13(anonymous function) @ custom.js?ver=4.2.3:34n.event.dispatch @ jquery.js:4435n.event.add.r.handle @ jquery.js:4121
 
8:59 AM
Did you enqueue everything properly in the functions.php file? You need to localize script with the same handle as the js file you put your ajax call in
 
I think so wp_localize_script( 'fireproduct-script', 'ajax_posts', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'noposts' => __('No older posts found', 'fireproduct'), )); wp_enqueue_script( 'custom_js', get_template_directory_uri(). '/assets/js/custom.js', array( 'jquery'), '', true );
 
If you put your ajax code in custom.js, then the code should look like this: wp_enqueue_script( 'custom_js', get_template_directory_uri(). '/assets/js/custom.js', array( 'jquery'), '', true ); wp_localize_script( 'custom_js', 'ajax_posts', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'noposts' => __('No older posts found', 'fireproduct'), ));
 
That Works! Thank you so much, One last question, If you press load more, and it only has two more fresh posts, It will then fills the gaps with posts with already had above, is there a way to stop that?
 
I've tested on my server and once you've loaded all the posts, there shouldn't be any more loading. Maybe I'm not understanding you completely. This works by already displaying 3 posts, and then ajax load all the rest posts (minus those 3). If this is the correct answer feel free to mark it as correct :)
 
I'll try and explain a bit better, I have it set to load 4 Posts, however lets say there's only 6 posts altogether, the first four load, then it loads the last two posts on click, but as well as the last two, it also reloads another 2 to make up the 4
 
8:59 AM
If you copied everything like in the code, it should only load those last two. In total if you have 6 posts, and have 4 loaded, on ajax call only 2 should apperar, and that's it. Be sure that something isn't different at your end.
 
I just redid all your code again and still the same problem
 
What is your wp theme?
The only way it's loading additional posts is if the query is somehow wrong, or has something that's affecting it.
 
Joints WP
It's my fault, I'm sorry, I hadnt change the varieables correctly in the JS, they were set at different cats and page to the functions and page.
One last question for you because I ca't thank you enough for the help on this
 
Oh, ok. Try to fix this and see if it works :)
 
Is there a way to hide the Load More button when they have all loaded
 
9:03 AM
Sure.
You can add some jquery code
in the
else{
$("#more_posts").attr("disabled",true);
}
This is the part in the ajax
you can add also
.accClass('finished');
and then when all the posts have loaded, you should have .finish class on your button, and then you can just hide it in your css
with #more_posts.finished{display: none;}
so your else part will be
 
Isnr that Jquery Line already in the js file?
 
$("#more_posts").attr("disabled",true).addClass('finished');
 
It doesnt do it
 
yes, it should be
addClass
I had a typo
var ppp = 3; // Post per page
var cat = 8;
var pageNumber = 1;


function load_posts(){
pageNumber++;
var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp' + ppp + '&action=more_post_ajax';
$.ajax({
type: "POST",
dataType: "html",
url: ajax_posts.ajaxurl,
data: str,
success: function(data){
var $data = $(data);
if($data.length){
$("#ajax-posts").append($data);
$("#more_posts").attr("disabled",false);
} else{
$("#more_posts").attr("disabled",true).addClass("finished");
}
},
error : function(jqXHR, textStatus, errorThrown) {
 
Ahh, yes that works, thank you
 
9:07 AM
:)
 
sorry one more question, feel free to not answer me
you've helped enough
 
np
ask
 
Is there a way I can make it load up to 8 posts every time you press the button?
Basically it's going to show 4 products on a site, but there's like 300 and it needs to show 8 more every time you press the load more
 
yes, sure, just change variable ppp to 8 in your jquery
 
That simple?
Wow i feel stupid
 
9:08 AM
yep
 
Thank you so much
 
No problem :) Glad I could help
be sure to mark the answer as correct :)
oh, you did
haha :D Thanks
Bye!
 
thanks, bye
 

  last day (17 days later) »