Add infinite Scroll of automatic post loading in WordPress
Updated On May 23, 2015 September 13, 2012 -Written ByDon’t like usual pagination with 1,2,3… or “next”, “previous” buttons on your WordPress blog? There is new fad of automatically loading posts on homepage as user scrolls down. This automatic pagination eliminates need to click next button for previewing next set of posts. Also, there is no need to refresh webpage as more posts are displayed automatically on the page via AJAX.
1. Use Infinite Scroll plugin (simple & quick)
Infinite Scroll plugin allows you to implement this “advanced” looking functionality in few simple clicks. Once you install this plugin, head to Settings > Infinite Scroll for the Options page. There are lof of options you can configure for customized functionality of the infinite scroll.
To quickly get started, select “ON for Admins only” from drop down box next to “Infinite Scroll State Is” at the top of infinite scroll Options page. Then click Save Changes and you should able to preview the automatic scroll feature on your blog. Make sure you select “ON for Visitors only” option once you are done customizing and ready to make this feature live.
There are many other options you can configure like: automatic or manual scrolling behavior, adding custom javascript code, uploading loader image of your choice, image alignment, custom text displayed once loading is complete and so on.
2. Manual infinite pagination (like coding?)
If you are one of those (adventurous) coders who love manual coding (and sort of hate plugin route), then check code for infinite pagination tutorial. It is a detailed guide with complete code that allows you to integrate automatic scroll pagination within your Wordpress theme.
Should we use this feature? Well, it depends on type of website in question. It looks cool for image intensive and stylish niche websites. However, for serious text intensive and high traffic website – this functionality might prove serious drag on server resources.
Thanks, it works but overlaps the footer. Anyway, I removed the footer so it works fine!