Thanks a million for this tutorial. I've managed to build infinite scrolls in WordPress a few times by copy, pasting and tweaking code, but your videos finally made me understand the process.
Thank you, Alessandro, for your excellent tutorial. Writing from 2020 and from my wamp server without virtual host, I had to add “get_site_url()” to the page-limit data-page declaration in both index.php and ajax.php to work. I believe this is working online too.
for those who use localhost (Xampp): if you have the following problem: the address is "localhost/sunset" and you start scrolling down. When you reach the first page-limit the address changes to "localhost" and the "/sunset" part is removed go to The Index file and add this: echo ''; then go to the Ajax file and add this: echo ''; thats what i figured out and it worked for me. hoping it will work for you. thanks! in advance. alessandro
The page numbers change as I click load more and scroll, but when pressing back from a single-post-page, it says I'm on /page/2 and even has "load previous" at the top, but the page is displaying page/1 posts
mh, that is really weird. I tested on mine and it works normally. Are you sure your post loop is properly set? Did you compare your code with mine from my GitHub repo?
+Brada Hi, thanks for following. My website is actually 3 years old now, so it's a bit outdated. When I designed it, I decided to go with a full left alignment and a maximum width. It's uniquely a styling choice, there's no technical reason behind that. I'm sure it looks weird on big or wide screen :D
I have the same issue as others with localhost (XAMPP etc). But I think it can have something to do with that when you load the page, the address is "localhost/sunset" and you start scrolling down. When you reach the first page-limit the address changes to "localhost" and the "/sunset" part is removed. Then you load more posts with the button and scroll down. The js will add "/page/2" so the address looks like: "localhost/page/2". If you then click on a blog post, then hit the back button in browser it will try to load something that don't exists (localhost/page/2). The browser displays: Object not found. In the js I try to create a variable with the data-page value and bind it together in the replaceState function with "/sunset". The result is that I always have the sunset in the address field but the data-page is never added? I don't know why? But I'm no Alex either ...LOL. However do we really want a fix for this so it works with localhost? When we deploy it in the real world the fix will make it break, won't it? Maybe a solution would be to see the variables updates and work correctly under development and then comment out the row history.replaceStat-function in the js until you deploy it on a live server for real? Then you can debug it so it works? It's a long text so I hope it's not just rubbish? LOL
I am having exactly the same problem here. Has anyone found a solution?? I've scrolled through the comments and there are about 3 related to this issue but no fix. I don't quite understand what I should be doing to the history.replaceState function above. Maybe you could elaborate. Thanks for the help!
GateWood Digital, LLC This will be taken care of in a later video. However I finally changed my setup. I use XAMPP and I made a few changes so my development address is now *sunset.local*. If you don't know how to set this up there is guides just a google-away. I used one of these but don't remember witch one. They are short and it's easy to setup. delanomaloney.com/2013/07/10/how-to-set-up-virtual-hosts-using-xampp/ www.drupal.org/docs/develop/local-server-setup/windows-development-environment/set-up-local-server-using-xampp But if you want to keep your localhost thing just code as the videos shows and it will be taken care of later. It just won't work right now. And don't give up...the serie is getting better for every video. It should have higher score on IMDB then Game of Thrones. LOL.
jellycoding Awesome! Thanks for the reply. I assumed I could manipulate my localhost (MAMP) settings but hadn't worked it out yet. I appreciate the heads up, too. Alex's videos are fantastic! I will see this one through to the end. I've learned so much.
I spoke too soon.....now when I click on a post that is on 'page 2' and it takes me to the single post format and I then click to go back I am then presented with just the posts from 'page 2' and not the post that should be before them from 'page one'.Also sometimes when I click back from single post format I get no-posts at all. The url displays for example: /blog/page%20page/2 what does the %20 mean?
Thanks for your nice tutorials. But one thing. If I set the post page under the menu 'blog' then the actual pagination is not working in the url. Do you experience it? How can I overcome this dynamically?
Thanks for watching, I'm not sure if I did a tutorial/bug fix in future videos on how to grab that value dynamically, but you can easily update the PHP code to use the specified number of posts from the admin panel.
Hi, can someone please help me with the issue I am having? Every time I click on "load more" 2 posts are getting loaded for example "quote post" and "video post". Then I scroll to page 2 which is Gallery Post format, I click there then go back and it works, then click on "load more" scroll to page 3 which is Video Post Format click on it then go back I get "The requested URL /page/3 was not found on this server.", the same issue I get with page 4 and so on. I tried updating the permalink settings, but still not working. Any ideas?
Great Video Series. Having a problem with this one. Before loading more posts, when I scroll the url does change unlike in your example. I checked the code against yours and it matches. Could it be because I am on a local server? Before scroll : localhost:8888/site name After scroll: localhost:8888 After loading more: localhost:8888/page/2 Basically it works as I am moving forward but because the site name was removed form the url, when I go back I lose the site because the url is no longer complete.
Hi Alessandro, thank you so much for the tutorial. I ran into an odd problem and wondering if you or anyone could help me please. It worked for any other pages except page 3, when I am on page 3 (coming back from the single post page) and the data-page attribute stays "/" and the url changes to "sunset.com" from "sunset.com/page/3/" when you scroll the page. I have checked everything and even copy paste your original code but still no luck :(
Thank you for replying my question. Yeah and I could not work out why it only happens with posts that are paginated in page 3. My code is here if it helps to diagnose the problem. github.com/edgaryp/sunset-theme-pratice
Hi, Alex! I found a little issue. If you have only one post-gallery then the preview in circle doesn't work correct, there are not preview images inside. If to add one more gallery-post then the both posts are works correct. Please, check if you have the same problem. Thank you!
Hi, Alex! Yes all documents are identical like yours. But I found more details about my issue. If a gallery-post shows at the beginning then the preview of this gallary-post works correct! But if our gallary-post is in the second or the third section after the button "Load More" then the preview of the gallary-post doesn't work. I hope that you understand my english ;) P.S. I don't have any error in the console...
+Aleksandr Nadtochyi I understood perfectly, no worries. Is the slider working if you load a Post from page 2 or 3? I mean, is auto sliding even if you don't touch it? If it doesn't auto slide it means that the JS code is not initializing properly the new carousel. I checked again and my thumbnails work in every case.
Hi Alex. I am facing a two issues. I'm working locally using XAMPP and my URL looks like 'localhost/sunset/'. The pagination is not getting added at all. Everything else is working fine but whenever I am scrolling down the page, the '/page/2/', '/page/3/' are not getting added in the url. When I reach the first page-limit the address is not changing from "localhost/sunset" to "localhost/sunset/page/2". I can load more posts with the button and scroll down but the js is not adding "/page/2". Also when I am clicking the read more button of a post, it is taking me to that particular post page, but when i am clicking the load more button on that particular post page, it starts loading post from the beginning not from the next post. like if i am clicking load more on page 2, its not loading posts from page 3 then 4.. its loading from page 1, then 2 and so on... what to do?
Hi, I'm not using XAMPP so I'm not sure why these issues are happening. I suggest you to watch the next videos because I take care of improving the JS for the ajax infinite scroll, and also solving the problem of the single blog post. Overall I always suggest to check and compare your code with my source code on GitHub, and as usual Happy Coding!
i used your code from github Alex. I have also changed the localhost settings but still its not working. I appreciate help Alex. your videos are fantastic!
Hi,I have triple checked my code for this section and seem to be having some issues.I am getting the url to update,however when I click on a post to go the single post format some crazy stuff happens and when I click to 'go back' a page it simply displays nothing... a completly blank page. I think this could possibly be down to the fact that my websites home address (page one) is mywebsite.com/blog rather than just mywebsite.com. Do you think this may be where the issue could stem from?
plzz I have an important question. how to get current page name within ajax request cause I'm doing this tutorial on a sub page not front-page. I tried to use $slug = get_post_field( 'post_name'); it worksfine on the first posts that got loaded without ajax request, but when I load new posts it becomes blank. I really appreciate this awesomeee videos
You should pass your sub page slug with a data attribute and automatically attach it to the return data to properly update the pagination, and maintain your correct slug.
You should add that data-slug to the Load More button. Then in your JS, when you click on load more, get that value like you're doing for the other data attributes: var slug = that.data('slug'); and pass it in your Data array data : { ... slug: slug ... } Then in your ajax php function get that data value $slug = $_POST['slug']; so now you can add it to the div you're printing to create a page limiter: echo ''; Not sure if this will work 100% because I don't know your code, but as you can see I'm reusing over and over all the methods I used in this function to pass and print back various variables. Try to understand the code and extend it for your needs.
I have one problem when I click the load more button, it keeps adding the same page over and over again like ... infinitely. What could this case be? Thank you!
My browser show '404 not found' when i back in the single post to page/2... I searching for hours the solution for this... And finally i found the issue: I just refresh the permanent links on Admin Painel.. its important test if this error is showing in your site. Great Tutorial!
Hello, When i scroll the page i lose the url. My initial url is localhost/sunset and when i scroll the url becomes localhost/page/2 and so on instead of localhost/sunset/page/2. Reagrds
for those who use localhost (Xampp): if you have the following problem: the address is "localhost/sunset" and you start scrolling down. When you reach the first page-limit the address changes to "localhost" and the "/sunset" part is removed go to The Index file and add this: echo ''; then go to the Ajax file and add this: echo ''; thats what i figured out and it worked for me. hoping it will work for you. thanks! in advance. alessandro
You have to make sure that overflow-y: auto is set on the page-limit container. The jquery function to detect elements in viewport is not working for elements with the height of zero pixels. I found another useful stuff for detecting elements in viewport on stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport :-)
history.replaceState() sure doesn't like localhost. As with a couple of other ppl, when scrolling the url heads back to localhost/ rather than the base url.
replaceState() will change the URL in the browser (ie. pressing the back button won't take you back) pushState() will change the URL, and keep the old one in the browser history (ie. pressing the back button will take you back)
for who is working on localhost and facing the issue "Object not found" when they are trying to back to (localhost/page/2) the solution is updating data-page attribute instead of "/" use / it will work correctly and also update it in ajax.php / page/
Lone Ranger, can you be more specific about which lines of code (and in which files) this change should be made? It's not really clear from your comment.
replaceState() will change the URL in the browser (ie. pressing the back button won't take you back) pushState() will change the URL, and keep the old one in the browser history (ie. pressing the back button will take you back)
Thanks a million for this tutorial. I've managed to build infinite scrolls in WordPress a few times by copy, pasting and tweaking code, but your videos finally made me understand the process.
Awesome, I'm happy it was helpful.
Thank you, Alessandro, for your excellent tutorial. Writing from 2020 and from my wamp server without virtual host, I had to add “get_site_url()” to the page-limit data-page declaration in both index.php and ajax.php to work. I believe this is working online too.
for those who use localhost (Xampp):
if you have the following problem:
the address is "localhost/sunset" and you start scrolling down. When you reach the first page-limit the address changes to "localhost" and the "/sunset" part is removed
go to The Index file and add this:
echo '';
then go to the Ajax file and add this:
echo '';
thats what i figured out and it worked for me.
hoping it will work for you.
thanks! in advance.
alessandro
Cheers
Great stuff Alessandro! Love this advanced coding. Very slick.
+Mark Waters Thank you so much. I hope it wasn't too complicated, and I succeeded in properly explaining everything
The page numbers change as I click load more and scroll, but when pressing back from a single-post-page, it says I'm on /page/2 and even has "load previous" at the top, but the page is displaying page/1 posts
mh, that is really weird.
I tested on mine and it works normally.
Are you sure your post loop is properly set? Did you compare your code with mine from my GitHub repo?
Hi alex... Tx and great video.... but i have a random question... why did you choose on your website to let space in the right?
+Brada Hi, thanks for following.
My website is actually 3 years old now, so it's a bit outdated. When I designed it, I decided to go with a full left alignment and a maximum width. It's uniquely a styling choice, there's no technical reason behind that. I'm sure it looks weird on big or wide screen :D
thnx for this tutorial, it's awesome
I have the same issue as others with localhost (XAMPP etc). But I think it can have something to do with that when you load the page, the address is "localhost/sunset" and you start scrolling down. When you reach the first page-limit the address changes to "localhost" and the "/sunset" part is removed. Then you load more posts with the button and scroll down. The js will add "/page/2" so the address looks like: "localhost/page/2".
If you then click on a blog post, then hit the back button in browser it will try to load something that don't exists (localhost/page/2). The browser displays: Object not found.
In the js I try to create a variable with the data-page value and bind it together in the replaceState function with "/sunset". The result is that I always have the sunset in the address field but the data-page is never added? I don't know why? But I'm no Alex either ...LOL.
However do we really want a fix for this so it works with localhost? When we deploy it in the real world the fix will make it break, won't it?
Maybe a solution would be to see the variables updates and work correctly under development and then comment out the row history.replaceStat-function in the js until you deploy it on a live server for real? Then you can debug it so it works?
It's a long text so I hope it's not just rubbish? LOL
I had the same problem and this solution is perfect. Thank you :)
I am having exactly the same problem here. Has anyone found a solution??
I've scrolled through the comments and there are about 3 related to this issue but no fix.
I don't quite understand what I should be doing to the history.replaceState function above. Maybe you could elaborate. Thanks for the help!
GateWood Digital, LLC This will be taken care of in a later video. However I finally changed my setup. I use XAMPP and I made a few changes so my development address is now *sunset.local*. If you don't know how to set this up there is guides just a google-away.
I used one of these but don't remember witch one. They are short and it's easy to setup.
delanomaloney.com/2013/07/10/how-to-set-up-virtual-hosts-using-xampp/
www.drupal.org/docs/develop/local-server-setup/windows-development-environment/set-up-local-server-using-xampp
But if you want to keep your localhost thing just code as the videos shows and it will be taken care of later. It just won't work right now. And don't give up...the serie is getting better for every video. It should have higher score on IMDB then Game of Thrones. LOL.
jellycoding Awesome! Thanks for the reply. I assumed I could manipulate my localhost (MAMP) settings but hadn't worked it out yet. I appreciate the heads up, too. Alex's videos are fantastic! I will see this one through to the end. I've learned so much.
You need to update data-page attribute instead of "/" use / it will work correctly and also update it in ajax.php / page/
I spoke too soon.....now when I click on a post that is on 'page 2' and it takes me to the single post format and I then click to go back I am then presented with just the posts from 'page 2' and not the post that should be before them from 'page one'.Also sometimes when I click back from single post format I get no-posts at all. The url displays for example:
/blog/page%20page/2
what does the %20 mean?
Thanks for your nice tutorials. But one thing. If I set the post page under the menu 'blog' then the actual pagination is not working in the url. Do you experience it? How can I overcome this dynamically?
Thanks for watching, I'm not sure if I did a tutorial/bug fix in future videos on how to grab that value dynamically, but you can easily update the PHP code to use the specified number of posts from the admin panel.
Hi, can someone please help me with the issue I am having?
Every time I click on "load more" 2 posts are getting loaded for example "quote post" and "video post".
Then I scroll to page 2 which is Gallery Post format, I click there then go back and it works, then click on "load more" scroll to page 3 which is Video Post Format click on it then go back I get "The requested URL /page/3 was not found on this server.", the same issue I get with page 4 and so on.
I tried updating the permalink settings, but still not working.
Any ideas?
Great Video Series. Having a problem with this one. Before loading more posts, when I scroll the url does change unlike in your example. I checked the code against yours and it matches. Could it be because I am on a local server?
Before scroll : localhost:8888/site name
After scroll: localhost:8888
After loading more: localhost:8888/page/2
Basically it works as I am moving forward but because the site name was removed form the url, when I go back I lose the site because the url is no longer complete.
Hi Alessandro, thank you so much for the tutorial. I ran into an odd problem and wondering if you or anyone could help me please.
It worked for any other pages except page 3, when I am on page 3 (coming back from the single post page) and the data-page attribute stays "/" and the url changes to "sunset.com" from "sunset.com/page/3/" when you scroll the page. I have checked everything and even copy paste your original code but still no luck :(
Hi, thanks for following.
So, the issue happens only if you access a single post and then go back with the browser history, right?
Thank you for replying my question. Yeah and I could not work out why it only happens with posts that are paginated in page 3. My code is here if it helps to diagnose the problem. github.com/edgaryp/sunset-theme-pratice
Hi, Alex! I found a little issue. If you have only one post-gallery then the preview in circle doesn't work correct, there are not preview images inside. If to add one more gallery-post then the both posts are works correct. Please, check if you have the same problem. Thank you!
+Aleksandr Nadtochyi strange, I can't recreate the issue. Are you sure your jQuery code is properly written? Compare it with my code from GitHub
+Alessandro Castellani, yes i tried with your code from GitHub but unfortunately the same problem :(
+Aleksandr Nadtochyi Do you have any JS error in the console? Is your HTML markup identical to mine?
Hi, Alex! Yes all documents are identical like yours. But I found more details about my issue. If a gallery-post shows at the beginning then the preview of this gallary-post works correct! But if our gallary-post is in the second or the third section after the button "Load More" then the preview of the gallary-post doesn't work. I hope that you understand my english ;)
P.S. I don't have any error in the console...
+Aleksandr Nadtochyi I understood perfectly, no worries.
Is the slider working if you load a Post from page 2 or 3? I mean, is auto sliding even if you don't touch it?
If it doesn't auto slide it means that the JS code is not initializing properly the new carousel.
I checked again and my thumbnails work in every case.
Cool new intro!
Also there is a problem if the blog is not defiend on the the the base domain for example www.mysite/blog/
Hi Alex. I am facing a two issues. I'm working locally using XAMPP and my URL looks like 'localhost/sunset/'.
The pagination is not getting added at all. Everything else is working fine but whenever I am scrolling down the page, the '/page/2/', '/page/3/' are not getting added in the url. When I reach the first page-limit the address is not changing from "localhost/sunset" to "localhost/sunset/page/2". I can load more posts with the button and scroll down but the js is not adding "/page/2".
Also when I am clicking the read more button of a post, it is taking me to that particular post page, but when i am clicking the load more button on that particular post page, it starts loading post from the beginning not from the next post. like if i am clicking load more on page 2, its not loading posts from page 3 then 4.. its loading from page 1, then 2 and so on... what to do?
Hi, I'm not using XAMPP so I'm not sure why these issues are happening.
I suggest you to watch the next videos because I take care of improving the JS for the ajax infinite scroll, and also solving the problem of the single blog post.
Overall I always suggest to check and compare your code with my source code on GitHub, and as usual Happy Coding!
i used your code from github Alex. I have also changed the localhost settings but still its not working. I appreciate help Alex. your videos are fantastic!
for the localhost problem You need to update data-page attribute instead of "/" use / it will work correctly and also update it in ajax.php / page/
Hi,I have triple checked my code for this section and seem to be having some issues.I am getting the url to update,however when I click on a post to go the single post format some crazy stuff happens and when I click to 'go back' a page it simply displays nothing... a completly blank page.
I think this could possibly be down to the fact that my websites home address (page one) is mywebsite.com/blog rather than just mywebsite.com. Do you think this may be where the issue could stem from?
Just tried the fix below.....
index.php
;'
plzz I have an important question.
how to get current page name within ajax request cause I'm doing this tutorial on a sub page not front-page. I tried to use $slug = get_post_field( 'post_name'); it worksfine on the first posts that got loaded without ajax request, but when I load new posts it becomes blank.
I really appreciate this awesomeee videos
You should pass your sub page slug with a data attribute and automatically attach it to the return data to properly update the pagination, and maintain your correct slug.
can you sow me an example plzz.
does the first step will be like this:
the second step I don't how how to return it auto
You should add that data-slug to the Load More button.
Then in your JS, when you click on load more, get that value like you're doing for the other data attributes:
var slug = that.data('slug');
and pass it in your Data array
data : {
...
slug: slug
...
}
Then in your ajax php function get that data value
$slug = $_POST['slug'];
so now you can add it to the div you're printing to create a page limiter:
echo '';
Not sure if this will work 100% because I don't know your code, but as you can see I'm reusing over and over all the methods I used in this function to pass and print back various variables.
Try to understand the code and extend it for your needs.
maaaaaaan by the name of all watchers and learners, We can't express how gratefull we are, you're helping us so much thank you thank you thank you
I have one problem when I click the load more button, it keeps adding the same page over and over again
like
... infinitely.
What could this case be?
Thank you!
Take a look at my source code on Github to see if you have any typo or mistakes.
Cheers
My browser show '404 not found' when i back in the single post to page/2... I searching for hours the solution for this... And finally i found the issue: I just refresh the permanent links on Admin Painel.. its important test if this error is showing in your site.
Great Tutorial!
+Pazini Flyers thanks for your feedback, I'm not experiencing this issue, but this can be useful for others
Andre Pazini, I'm having the same issue... How did you solve it?
wow. that's so interesting!
thanks a lot =)
Thanks for watching :D
Hello,
When i scroll the page i lose the url. My initial url is localhost/sunset and when i scroll the url becomes localhost/page/2 and so on instead of localhost/sunset/page/2.
Reagrds
I did some bug fixing and future improvements to the auto scroll in future videos.
Cheers
Thanks, but what can i do for the moment ?
Regards
You need to update data-page attribute instead of "/" use / it will work correctly and also update it in ajax.php / page/
for those who use localhost (Xampp):
if you have the following problem:
the address is "localhost/sunset" and you start scrolling down. When you reach the first page-limit the address changes to "localhost" and the "/sunset" part is removed
go to The Index file and add this:
echo '';
then go to the Ajax file and add this:
echo '';
thats what i figured out and it worked for me.
hoping it will work for you.
thanks! in advance.
alessandro
The pagination works perfectly if I load the site in Mozilla Firefox. It works only partially in Chrome. What could this be?
Nevermind, apparently Chrome needs some hard cache clearing from time to time! :D
I'm glad you solved it
You have to make sure that overflow-y: auto is set on the page-limit container. The jquery function to detect elements in viewport is not working for elements with the height of zero pixels. I found another useful stuff for detecting elements in viewport on stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport :-)
Thanks for sharing
Pretty interesting! Thanks! :)
history.replaceState() sure doesn't like localhost. As with a couple of other ppl, when scrolling the url heads back to localhost/ rather than the base url.
same here
same prblm
replaceState() will change the URL in the browser (ie. pressing the back button won't take you back)
pushState() will change the URL, and keep the old one in the browser history (ie. pressing the back button will take you back)
for who is working on localhost and facing the issue "Object not found" when they are trying to back to (localhost/page/2) the solution is updating data-page attribute instead of "/" use / it will work correctly and also update it in ajax.php / page/
Thanks for sharing :D
Thanks to you for your awesome free tutorials :D
Lone Ranger, can you be more specific about which lines of code (and in which files) this change should be made? It's not really clear from your comment.
replaceState() will change the URL in the browser (ie. pressing the back button won't take you back)
pushState() will change the URL, and keep the old one in the browser history (ie. pressing the back button will take you back)
Sorry but this doesn't work.