{"id":1523,"date":"2020-06-04T19:16:23","date_gmt":"2020-06-04T12:16:23","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=1523"},"modified":"2020-06-21T09:24:25","modified_gmt":"2020-06-21T02:24:25","slug":"infinite-scroll-with-timber","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/infinite-scroll-with-timber\/","title":{"rendered":"Jetpack’s Infinite Scroll with Timber"},"content":{"rendered":"\n

Jetpack<\/a> is a plugin that offers wide array of functionalities like statistic, CDN, security, etc.<\/p><\/blockquote>\n\n\n\n

One of my favorite Jetpack’s module is Infinite Scroll<\/strong>. As the name suggests, it automatically loads more posts when you reached the bottom.<\/p>\n\n\n\n

If you want to apply this to normal theme, then you can refer to the official doc<\/a>.<\/p>\n\n\n\n

But for Timber theme, it is a bit tricky. Here’s how:<\/p>\n\n\n\n

Step 1: Disable WP_DEBUG<\/h2>\n\n\n\n

At the time of writing, Infinite Scroll will not work if WP_DEBUG<\/code> is set to true. If that’s the case, open your wp-config.php and set it to false.<\/p>\n\n\n\n

Step 2: Add ID to Posts Wrapper<\/h2>\n\n\n\n

In your posts loop, add id=\"content\"<\/code> to the direct parent. For example, if you have <ul><\/code> as the parent, then it goes like this:<\/p>\n\n\n\n

...\n<ul class=\"posts-list\" id=\"content\">\n  {% for post in posts %}\n    <li class=\"post-archive\">\n      ...\n    <\/li>\n  {% endfor %}\n<\/ul>\n...<\/code><\/pre>\n\n\n\n
Step 3: Move the Loop Into Its Own File<\/h2>\n\n\n\n
Create a new TWIG file and move the for<\/code> loop snippet above into there:<\/p>\n\n\n\n
{% for post in posts %}\n\n  <li class=\"post-archive\">\n    <h3><a href=\"{{ post.link }}\">{{ post.title }}<\/a><\/h3>\n\n    {% if post.thumbnail %}\n      <a href=\"{{ post.link }}\" class=\"archive-figure  image-fit image-fit--{{ e.ratio }}\" tabindex=\"-1\">\n        <img src=\"{{ post.thumbnail.src('medium') }}\" alt=\"{{ post.title }}\">\n      <\/a>\n    {% endif %}\n\n    <p>{{ post.preview.length( e.word_count ).read_more('') }}<\/p>\n\n    <a href=\"{{ post.link }}\" class=\"button\">\n      Read More\n    <\/a>\n  <\/li>\n  \n{% else %} \n  <li class=\"error-message\">\n    <h1>Sorry<\/h1>\n    <p>We couldn\u2019t find any posts.<\/p>\n  <\/li>\n{% endfor %}<\/code><\/pre>\n\n\n\n
Don’t forget to replace the original one with include<\/code>:<\/p>\n\n\n\n
...\n<ul class=\"posts-list\" id=\"content\">\n  {% include \"_post-loop.twig\" %}\n<\/ul>\n...<\/code><\/pre>\n\n\n\n
Step 4: Add Theme Support<\/h2>\n\n\n\n
The module automatically activates if you put infinite-scroll<\/code> theme support. You also need to define a render<\/code> parameter that tells what to display:<\/p>\n\n\n\n
add_action( 'after_setup_theme', 'my_after_setup_theme' );\n\nfunction my_after_setup_theme() {\n  add_theme_support('infinite-scroll', [\n    'render' => 'my_infinite_scroll_render',\n    'posts_per_page' => '9',\n  ] );\n}\n\nfunction my_infinite_scroll_render() {\n  $context = [\n    'posts' => Timber::get_posts(),\n  ];\n  Timber::render('_post-loop.twig', $context);\n}<\/code><\/pre>\n\n\n\n
Done!<\/strong> Your pagination should now be replaced with infinite scroll.<\/p>\n\n\n\n
Note: the infinite scroll adds a <div><\/code> wrapper to your loop, so you might need to fix the CSS.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Infinite scrolling makes it easier and cooler to browse your content. But the most fatal disadvantage is losing your Footer.<\/p>\n\n\n\n
So if the information in your footer is valuable, don’t use infinite scrolling.<\/p>\n\n\n\n
Having trouble implementing it? Let me know in the comment below \ud83d\ude42<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
One of my favorite Jetpack’s module is Infinite Scroll. But It’s quite tricky to implement it within a Timber theme.<\/p>\n","protected":false},"author":1,"featured_media":1524,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[24,37],"class_list":["post-1523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-timber","tag-timber","tag-twig"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1523"}],"version-history":[{"count":3,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1523\/revisions"}],"predecessor-version":[{"id":1527,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1523\/revisions\/1527"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1524"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}