{"id":132197,"date":"2014-09-27T08:00:00","date_gmt":"2014-09-27T12:00:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=132197"},"modified":"2014-09-29T18:47:39","modified_gmt":"2014-09-29T22:47:39","slug":"how-to-add-infinite-scrolling-to-your-wordpress-site","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-add-infinite-scrolling-to-your-wordpress-site\/","title":{"rendered":"How to Add Infinite Scrolling to Your WordPress Site"},"content":{"rendered":"<p>Infinite scroll allows you automatically load new content into view when a reader approaches the bottom of the page.<\/p>\n<p>Twitter is a great example of how this feature lets you minimize effort and distractions for your users, creating a seamless user experience.<\/p>\n<p>Adding infinite scroll to WordPress is easy, especially if you have a \u201cwell-crafted\u201d theme. If your theme isn\u2019t well-crafted, enabling infinite scroll is more complicated but not impossible if you\u2019re happy to get stuck into code.<!--more--><\/p>\n<p>In today\u2019s Weekend WordPress project I\u2019ll show you how to enable infinite scroll with the Jetpack plugin.<\/p>\n<figure id=\"attachment_132364\" class=\"wp-caption aligncenter\" data-caption=\"true\"><a rel=\"lightbox[132197]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/09\/infinite-scroll.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-large wp-image-132364\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/09\/infinite-scroll-700x218.jpg\" alt=\"Infinite scroll\" width=\"700\" height=\"218\" \/><\/a><figcaption class=\"wp-caption-text\">Add infinite scroll to your website with Jetpack.<\/figcaption><\/figure>\n<h2>Enable Infinite Scroll in Supported\u00a0Themes<\/h2>\n<p>Infinite scroll is one of 33 modules included in Jetpack, but unlike other modules, infinite scroll only works with themes that support it.<\/p>\n<p>If you have a &#8220;well-crafted\u201d theme, like one of the default WordPress themes, just add the following code to your functions.php file:<\/p>\n<p>{code type=php}<br \/>\nadd_theme_support( &#8216;infinite-scroll&#8217;, array(<br \/>\n&#8216;container&#8217; =&gt; &#8216;content&#8217;,<br \/>\n&#8216;footer&#8217; =&gt; &#8216;page&#8217;,<br \/>\n) );<\/p>\n<h2>Enable Infinite Scroll in\u00a0Unsupported Themes<\/h2>\n<p> Developer Tyler Longren offers a neat solution for themes that aren\u2019t as well crafted as Twenty Eleven or Twenty Twelve.<\/p>\n<p>First, let\u2019s activate infinite scroll. Add the following to your functions.php file:<\/p>\n<p>{code type=php}<br \/>\nfunction mytheme_infinite_scroll_init() {<br \/>\nadd_theme_support( &#8216;infinite-scroll&#8217;, array(<br \/>\n&#8216;container&#8217; =&gt; &#8216;content&#8217;,<br \/>\n&#8216;render&#8217; =&gt; &#8216;mytheme_infinite_scroll_render&#8217;,<br \/>\n&#8216;footer&#8217; =&gt; &#8216;wrapper&#8217;,<br \/>\n) );<br \/>\n}<br \/>\nadd_action( &#8216;init&#8217;, &#8216;mytheme_infinite_scroll_init&#8217; );<\/p>\n<p>Next, the render parameter specifies a function, in this case mytheme_infinite_scroll_init. This function uses the WordPress loop to load new posts for endless scrolling.<\/p>\n<p>To put this all together, also add this snippet to our functions.php file:<\/p>\n<p>{code type=php}<br \/>\nfunction mytheme_infinite_scroll_render() {<br \/>\nget_template_part( &#8216;loop&#8217; );<br \/>\n}<\/p>\n<h2>Infinite Scrolling is Still Not Working<\/h2>\n<p>If you can\u2019t get infinite scrolling to work with the code above, don\u2019t fret! It just means your theme hasn\u2019t been coded like many newer themes to support infinite scrolling.<\/p>\n<p>You may want to check out <a title=\"Jetpack and the Infinite Scroll\" href=\"http:\/\/ottopress.com\/2012\/jetpack-and-the-infinite-scroll\/\" rel=\"noopener\" target=\"_blank\">this solution by developer Samuel Wood,<\/a> aka Otto, which explains how to separate your posts from the WordPress loop so you can enable infinite scrolling. It\u2019s a solution that assumes you\u2019re familiar with PHP, so only check it out if you\u2019re comfortable with code.<\/p>\n<h2>Infinite Scroll is Working!<\/h2>\n<p>The code above is just a basic implementation of how to use Jetpack\u2019s infinite scroll.<\/p>\n<p>There are more options you can play around with that are described in details on the <a title=\"Infinite Scroll\" href=\"http:\/\/jetpack.me\/support\/infinite-scroll\/\" target=\"_blank\">Jetpack website<\/a>, such as Javascript events and posts per page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Infinite scroll allows you automatically load new content into view when a reader approaches the bottom of the page. Twitter is a great example of how this feature lets you minimize effort and distractions for your users, creating a seamless user experience. Adding infinite scroll to WordPress is easy, especially if you have a \u201cwell-crafted\u201d [&hellip;]<\/p>\n","protected":false},"author":164650,"featured_media":132364,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[9798],"tutorials_categories":[],"class_list":["post-132197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-weekend-wordpress-projects"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/132197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/164650"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=132197"}],"version-history":[{"count":2,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/132197\/revisions"}],"predecessor-version":[{"id":216066,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/132197\/revisions\/216066"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/132364"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=132197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=132197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=132197"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=132197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}