How To Load More Posts In WordPress On Click With AJAX

how's it going everybody in today's video we are going to be making an AJAX of fide archive page so what we have is a list of blog posts and then when you click a button down here at the bottom it lists another group of posts on top of that we will also be updating the URL bar as we start to view more pages so when we refresh the page we are on the next page of posts and where they're kind of right back where they were so if you are new here make sure to subscribe to the channel and ring the bell to make sure you get notified of my weekly of WordPress tutorials alright let's jump into it all right so let's take a look at what we would have normally here by default we have a list of posts and then the very bottom of the list of posts we have just a default pagination you click number two it takes us to page number two click on page number three it takes us to page number three so we're looking to replace that feature with the Ajax of fide workflow so what we're going to do is we're going to start off by jumping over into our code and let's just get rid of that and instead of that we're just going to put a button here and so this button is going to be the thing that they click when they want to add more posts so there's a couple pieces of information that we're going to need every time that somebody clicks that post or we're going to need to know when the page loads at the very least so what we're gonna have to do is we're gonna grab the WP query it's a global variable that gives us all the information about what's going on on this page and then on top of that we are going to be pulling out a couple different pieces and we're just going to be putting them into data attributes on the main tag so we're grabbing the query VAR of paged and what that looks like is that is let me just go back to my browser here and that's what this number is so if paged will be equal to three on this page so we know what page we are on in pagination and then the other thing that we're grabbing is we're grabbing the max number of pages double WP query will tell us where I depending on how many posts per page you have set you have this many pages that you can visit before you run out of posts so after we have that we now need to hook this part up to JavaScript so what I'm going to do is I'm going to go into my main app file here and then I'm going to import Ajax load more from well let's actually create it that might be helpful Ajax load more j/s and let's do something like const ajax load more equals of function and then let's export default ajax load more and then that means we can come over here and we can say go into Lib and give me ajax load more and it's not form it's from and it's not import it's important all right I think we're good now all we're gonna do is just run the Ajax load more when the page is ready so now that we have this let's just console dot log hello and then just just make sure that it's working and then let's go back to our page here hit refresh and let's check our console let's just wait for my computer to boot up it says hello so we're good to go there so going back to our code we can delete this console log and what we're going to do is we're going to grab that button that we created and then we are going to make sure that it actually exists on to the page don't want any sort of errors happening and breaking all of our JavaScript we're gonna check to make sure that somebody is actually clicking on this oops that's reversed and once somebody clicks on it we need to check for a couple different things so like we just saw in our index page we have data - page and data - max we are looking for those two numbers inside of JavaScript so we can send it on up to WordPress so after that we need to actually have Axios installed you might have seen it magically appear on the top of my page we are using Axios for this so all you have to do is run npm install Axios if that's what you decide to use for your age axing so once we have that we need to do a couple special things so turns out and this is something that I learned with WordPress is it requires you to send across the data in a special format Axios will send it over in JSON and we need it to be like a special string a URL search parameter we are sending over an action which we'll call load more posts and if you've watched any of my ajax tutorials you know what that means the current page that were on and the maximum number of pages of pages that we are looking at we actually probably don't need to send over any of those we're just going to care about the current page for now so next up we are going to use Axios to post our data up to WordPress and so we have a special URL that we're going to send it to WP admin admin - Ajax PHP and we're gonna send over our current page so once that comes back we want to take the response and we want to start looping over these posts not looping over these posts but we need to actually take the posts that are coming from WordPress and insert them into our page so what all we're going to do for now is just console.log our response just our es for now and then let's go over to WordPress so let's just open up our functions PHP and what we're gonna do is we are going to have a new action so we're gonna add an action called WP Ajax no Prive load more posts and this action that where this action is appended with load more posts because of the action that we gave it right here and then we are going to give it a function to run once that action is hit and so we're just going to call that as well load more posts we're going to duplicate this line and get rid of the no privity cuz we are logged in right now we want to be able to load more posts as well so we're gonna be ready to function called load more posts and then we're going to take in that post so what we have is we got sent from Axios our current page and we're just adding +1 so for on page 1 we want to go from plus page 1 to page 2 and then we are going to set up a new WP query with that information in it so we have a new WP query we're just doing 10 posts per page right now because that's what we have set in our admin and then we're sending page 2 equals next page so this will be page 2 page 3 page before as we keep going so then all we're going to do is we're going to grab this guy here and create that query so if the query has posts we're going to start an object buffer and then while we have posts we're going to get the template part of template parts content so what we have is template parts that has just the articles individually in them so if we go to template parts and then we go to content each individual article can live inside of here and then so we can loop over these it will get the ID the post class the title the thumbnail all the things that we need and a loop over that and give us back a string when we call OB get cleaned and we are going to send a JSON response back to Axios and our Java Script to tell us here's a big string of all the posts do what you will with them so once we have that we can actually start loading in these posts so let's get rid of this now let's check now that we put that console.log there let's actually check it out so let's get rid of page 3 and just go to our home page here and then let's hit load more posts we get our response so if we open that up and get data we now have a giant string of our next 10 posts so now we can take that and insert that into our HTML we have our index.php we have a class right here and this is what is being looped over by our main query so we're going to shove our posts to the bottom of this main tag so what we can do is we can grab that posts list and then we will delete that grab our posts lists and we're gonna take the post list enter an HTML and we're going to add our response data data so that's the stuff that we saw in here we were looking at a response data data that's our articles that's the HTML that we want to shove in there so but we also need to make sure that we're not going too far so if our posts list or if our current page is equal to our max number of pages then we want to remove our buttons so we can take the button that we selected up here and we can it's kind of a weird way that happens in vanilla JavaScript is you grab its parent note and then you remove the child note off of it which is the thing itself so anyway so that way when we loads more posts if there's no more posts the button won't appear so we can't click it again so let's see what that gives us and going back to our page let's refresh and let's close this we can click load more posts we get some more and we get some more there are not different yet so we get page two but we don't get page three and we don't get page four etc so what we're going to do is we need to actually update the number that page inside of our source code so if we were to look at what's going on inside of here our data - page is equal to one we click it again it's still one but every time we're clicking that button we're just grabbing that value so we have to update that value every time that it comes back successfully here so we're gonna get that data and then we are going to take our post list and say that the data set page is plus plus meaning it's going to increment by one so let's try that again let's refresh let's take a look at our source code here and just make sure things update as we expect so we're on data page one or on data page two we're on day two page three and we're getting additional pages here however we are not getting our page history updated our URL bar is still the same so if somebody were to refresh the page all of a sudden we're back to page ones thing so in order to do that you have to use the history API so what we have is access to something called window history and you have a bunch of methods on that like pop state and replace state but we're gonna be using something called push State so what we need to do is we need to do window dot history push state and the first two parameters we're not gonna really mess with and even the second one most browsers ignore anyway but this third one is what you want the URL to be so technically we could do like something fake and hit save then go back and when we hit load more posts it says something fake so this is just an opportunity for us to match what WordPress would normally do when you are clicking those normal pagination buttons because technically those still exists so if we were to just go to slash page / - we're actually getting page twos pages and we are going to get page threes pages if we were to just manually type it in so we're helping our users by giving them that URL bar that way if they refresh the page or copy and paste it to one of their friends or something like that they'll get some better results so what we need to do here is we need to grab the current URL and so here's a little snippet for that we get window dot location we're making sure that we're on the right protocol whether it's HTTP or HTTPS and we're getting our hosts off of that and we don't care about anything else after it because if you grab everything else after that then it's going to cause some issues so what we can then do after is replace our push state with something that looks like this so we're skipping the first two parameters we're taking this base URL and then we're adding page slash and then we're getting our current page and then adding +1 to it so then we're going to hit refresh a v' and we can hit refresh after deleting the other pieces of the URL and then we can hit load more posts and we're getting slash page / 2 and we're getting page 3/3 so this is a quick tutorial about how to get up and running with an aged exif ID archive page if you liked the video make sure you hit the like button and leave a comment let me know if this is a way that you would do it if you got a better way always looking to improve so thanks for watching I appreciate the support and I will see you in the next one

Channel: WPCasts

Views: 21,523

Keywords: wordpress, javascript

Id: XySLI8YIRqQ

Length: 14min 32sec (872 seconds)

Published: Wed Oct 02 2019