{"id":9708,"date":"2020-07-30T15:00:39","date_gmt":"2020-07-30T13:00:39","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=9708"},"modified":"2020-11-13T14:15:29","modified_gmt":"2020-11-13T13:15:29","slug":"infinite-scroll-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/infinite-scroll-in-wordpress\/","title":{"rendered":"How to Add Infinite Scroll in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Is there such a thing as having too much content on your website? It probably depends on the type of content you create. But if you\u2019ve spent months, maybe even years, populating your <a href=\"https:\/\/qodeinteractive.com\/theme-category\/wellness-lifestyle-wordpress-themes\">lifestyle-themed WordPress website<\/a> with top-notch content, you\u2019d be forgiven to believe that you can\u2019t have too much of a good thing. And your website\u2019s visitors might agree with you, also.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The problem with having lots of stuff to put on display on the website is that it\u2019s sometimes challenging to do it seamlessly. <strong>So if your site visitors are not fans of \u201cnext, previous\u201d navigation or numbered pagination, you\u2019re bound to try something else to help them conveniently find what they need<\/strong>. And that\u2019s where infinite scroll in WordPress comes in.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll explain:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-infinite-scroll\">What Is Infinite Scroll?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#pros-and-cons-of-infinite-scroll\">What Are the Pros and Cons of Infinite Scroll?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-infinite-scroll-in-wordpress\">How to Add Infinite Scroll in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-infinite-scroll\"><\/a>What Is Infinite Scroll?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"389\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/What-Is-Infinite-Scroll.png\" class=\"attachment-full size-full\" alt=\"What Is Infinite Scroll?\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/What-Is-Infinite-Scroll.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/What-Is-Infinite-Scroll-300x167.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/What-Is-Infinite-Scroll-620x345.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Have you ever seen the footer on a website like Facebook? Probably not, because you\u2019ll usually just scroll down and down and down on something that seems like an infinite feed of posts and ads. <strong>That\u2019s one example of an infinite scroll, a navigation method that lets you browse posts, pages, or websites by scrolling down endlessly<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So that\u2019s an infinite scroll for you. You don\u2019t reach the footer, and you don\u2019t reach a button that says\u2019 \u201cnext\u201d or shows you the number of the page you\u2019re on and the adjacent pages. You might reach a button that says \u201cload more,\u201d a popular prompt that\u2019s used by the liked on Buzzfeed, but you\u2019ll pretty much be able to continue scrolling down as much as you want. <strong>Thanks to something called Asynchronous JavaScript and XML, or AJAX, the content keeps loading as you near the end of the page<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"pros-and-cons-of-infinite-scroll\"><\/a>What Are the Pros and Cons of Infinite Scroll?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"389\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/What-Are-the-Pros-and-Cons-of-Infinite-Scroll.png\" class=\"attachment-full size-full\" alt=\"What Are the Pros and Cons of Infinite Scroll\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/What-Are-the-Pros-and-Cons-of-Infinite-Scroll.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/What-Are-the-Pros-and-Cons-of-Infinite-Scroll-300x167.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/What-Are-the-Pros-and-Cons-of-Infinite-Scroll-620x345.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]While you can easily find proponents of the infinite scroll in social networks and blogs, as well as lots of <a href=\"https:\/\/qodeinteractive.com\/theme-category\/portfolio-wordpress-themes\/\">WordPress websites with portfolio themes<\/a>, some noticeable detractors can just as easily pop into the mind. <strong>Google, for one, uses numbered pagination for its search results, even though YouTube uses the infinite scroll. Amazon also uses numbered pagination, as does a fair share of media and content websites<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Infinite scroll has its champions and its adversaries, and that\u2019s because it has distinct pros and cons<\/strong>. On the list of advantages, you\u2019ll find:[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">It\u2019s great for user retention because it stokes curiosity.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Infinite scroll works great on mobile and other touch devices.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">It\u2019s excellent for image-heavy websites.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Infinite scroll allows for faster browsing.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text]If any of the above is a priority for your website, you might as well consider adding infinite scroll to it. However, you shouldn\u2019t do it before you\u2019ve read the list of cons, which include:[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">High memory usage, potentially leading to crashing browsers. <\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">You don\u2019t get to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-wordpress-footer\/\">have a footer and its information<\/a>.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">It can pose challenges for search engine optimization. <\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">It doesn\u2019t work with every type of website. <\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text]So there you have it \u2014 four pros and four cons. <strong>If the pros outweigh the cons in your book, then you\u2019re more than welcome to proceed to the next step and find out what\u2019s the easiest possible way to add an infinite scroll to your website<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;top-picks-banner&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-infinite-scroll-in-wordpress\"><\/a>How to Add Infinite Scroll in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]In some cases, you might not even need to add infinite scroll to your website \u2014 <strong>your WordPress theme might already have support for infinite scroll navigation<\/strong>. In the <a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/bridge-creative-multi-purpose-wordpress-theme\/\">Bridge Theme<\/a>, for example, you need to navigate to <em><strong>Qode Options &gt; Blog<\/strong><\/em>, and then scroll down to \u201cPagination on Masonry\/Pinterest\/Headlines option and choose \u201cInfinite Scroll\u201d as the navigation method for the blog list.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"389\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/How-to-Add-Infinite-Scroll-in-WordPress.png\" class=\"attachment-full size-full\" alt=\"How to Add Infinite Scroll in WordPress\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/How-to-Add-Infinite-Scroll-in-WordPress.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/How-to-Add-Infinite-Scroll-in-WordPress-300x167.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/How-to-Add-Infinite-Scroll-in-WordPress-620x345.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you don\u2019t have a WordPress theme with built-in Infinite Scroll, you\u2019ll have to go ahead and <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">download and install a plugin<\/a> for it. There are a few of them you might want to try. If you use Jetpack, for example, you won\u2019t need another one. But if you don\u2019t, you might as well give the <a href=\"https:\/\/wordpress.org\/plugins\/catch-infinite-scroll\/\" target=\"_blank\" rel=\"noopener noreferrer\">Catch Infinite Scroll<\/a> a go.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"389\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Catch-Infinite-Scroll.png\" class=\"attachment-full size-full\" alt=\"Catch Infinite Scroll\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Catch-Infinite-Scroll.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Catch-Infinite-Scroll-300x167.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Catch-Infinite-Scroll-620x345.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After successfully installing the plugin, you should navigate to the \u201cCatch Infinite Scroll\u201d item in the dashboard. There, you\u2019ll find some basic settings that you get with the free version. <strong>You\u2019ll be able to set the trigger for loading the new content \u2014 it can be either a click or a scroll<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"389\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Set-the-trigger-for-loading-the-new-content.png\" class=\"attachment-full size-full\" alt=\"Set the trigger for loading the new content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Set-the-trigger-for-loading-the-new-content.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Set-the-trigger-for-loading-the-new-content-300x167.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Set-the-trigger-for-loading-the-new-content-620x345.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You\u2019ll also find the option to upload a GIF that will show up while the infinite scroll is loading content. <strong>If your theme supports infinite scroll, chances are it will come with an appropriate GIF<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"389\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Upload-a-GIF.png\" class=\"attachment-full size-full\" alt=\"Upload a GIF\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Upload-a-GIF.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Upload-a-GIF-300x167.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Upload-a-GIF-620x345.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, you\u2019ll be able to set the text for the \u201cLoad More\u201d button that would trigger loading additional content if you chose \u201cclick\u201d over \u201cscroll\u201d as the trigger. <strong>And you\u2019ll also have the option to change the finish text, the text that appears where there\u2019s nothing else to load<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"389\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Change-the-finish-text.png\" class=\"attachment-full size-full\" alt=\"Change the finish text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Change-the-finish-text.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Change-the-finish-text-300x167.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/Change-the-finish-text-620x345.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Between these options, you\u2019ll find everything you need to set up an infinite scroll on your website\u2019s blog page. <strong>Choosing to buy the premium version of the plugin will give you access to additional options<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]Infinite scroll can be an incredibly useful feature that will help you glue people to your website. Or, it might be just the thing your website needed to become unruly and too difficult for most browsers to handle. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In general, unless you have a clear plan for its use and a decent reason you need it, infinite scroll might be a feature that will do you more harm than good. Otherwise, you should take it into account when buying a WordPress theme and get one that has it built-in and save yourself some resources you\u2019d use on an infinite scroll plugin.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Need to add an infinite scroll to your WordPress website? Your WordPress theme might already support it, but if it doesn&#8217;t \u2014 we&#8217;ll help you out.<\/p>\n","protected":false},"author":9295,"featured_media":9720,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,39,13],"class_list":["post-9708","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-tools","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/9708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=9708"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/9708\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/9720"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=9708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=9708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=9708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}