Load More Posts with AJAX. Step by Step Tutorial. No plugins.
Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ. Các bạn đi ngang nếu được cho Lâm 1 like và 1 đăng ký kênh Youtube nhé !!
Creating Load More button for WordPress is really simple. As an option I will show you how to load more posts on scroll
When my blog subscriber asked me about a such tutorial, I was wondering if there are any other analogue tutorials over the internet. And what I found in Google, surprised me.
Reading all those tutorials one thing becomes clear for me – AJAX is not simple at all. But it is not true!
Just skip this step if you want to load more posts on scroll.
We begin with the button HTML. Here is just one main rule – do not show the button if there are not enough posts. We will check it with $wp_query->max_num_pages.
1
2
3
4
5
6
7
<?php
global$wp_query;// you can remove this line if everything works for you
// don't display the button if there are not enough posts
if($wp_query->max_num_pages>1)
echo'<div class="misha_loadmore">More posts</div>';// you can use <a> as well
?>
On the image below you can see that I decided to work with Twenty Seventeen theme because it is well-designed and simple enough.
I inserted the button just under the standart pagination (for TwentySeventeen – index.php line 55), but you can remove it as well. To style the button the according way use CSS below.
Step 2. Enqueue jQuery and myloadmore.js. Pass query parameters to the script. #
Well, that’s where the magic happens. This small piece of code allows you to pass the according parameters to the script that’s why the button can work on any page – tags, categories, post type archives, search etc.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
functionmisha_my_load_more_scripts(){
global$wp_query;
// In most cases it is already included on the page and this line can be removed
wp_enqueue_script('jquery');
// register our main script but do not enqueue it yet
If you still do not know, the above code is for your functions.php. And please note, my load more button is adapted for the main loop only. If you need it for a custom loop, ask me in comments.
It is a small JS file, actually you can place it anywhere you want, for simpleness I decided to place it just in a theme directory (line 9 of previous code).
I also think that I should give you a choice – a load more button or just load posts by scroll.
Option 1. Load More button
If you choose the option 1, skip the option 2 and vice versa.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
jQuery(function($){
$('.misha_loadmore').click(function(){
varbutton=$(this),
data={
'action':'loadmore',
'query':misha_loadmore_params.posts,// that's how we get params from wp_localize_script() function
'page':misha_loadmore_params.current_page
};
$.ajax({
url:misha_loadmore_params.ajaxurl,// AJAX handler
data:data,
type:'POST',
beforeSend:function(xhr){
button.text('Loading...');// change the button text, you can also add a preloader image
},
success:function(data){
if(data){
button.text('More posts').prev().before(data);// insert new posts
button.remove();// if last page, remove the button
// you can also fire the "post-load" event here if you use a plugin that requires it
// $( document.body ).trigger( 'post-load' );
}else{
button.remove();// if no data, remove the button as well
}
}
});
});
});
Please note that line 23 can be different for your theme, it depends on your HTML document structure. I think you should know some basic jQuery DOM traversal methods – prev(), next(), parent() etc.
Option 2. No button, just load posts on scroll
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
jQuery(function($){
varcanBeLoaded=true,// this param allows to initiate the AJAX call only if necessary
bottomOffset=2000;// the distance (in px) from the page bottom when you want to load more posts
Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ. Các bạn đi ngang nếu được cho Lâm 1 like và 1 đăng ký kênh Youtube nhé !!