Using Post Pagination With a Looper Consumer

[stevenburles]

Hi,

In the Layouts section I have created a blog archive template that uses a Looper Provider on a row and Looper consumer on a column. I would like to add pagination but when I add the Post Pagination Element the second blog page contains the same 9 posts as the first page.

Any ideas how I can fix this?

Thanks

[tristup]

Hi @stevenburles,

The reason behind the issue is the looper and post pagination elements are not connected. I would like to request you to check the following videos that will help you on the loopers.

Loopers: Introduction & Your First Loop

Loopers: Using Multiple Providers

Loopers: Using Multiple Consumers

Loopers: Provider Types

Please find more details on the Pagination, here in this article: https://theme.co/docs/pagination

Hope it will help.
Thanks

[armandogomez]

I think this is more like a request, I have been reading other tickets, and people are asking about how to add load more items or pagination feature to looper.

[kory]

@stevenburles and @armandogomez, pagination of content is certainly possible with the Archive Layout Builder, and if you’re just getting started I would recommend working through those videos provided by @tristup in addition to this main article on Loopers in our Docs:

Dynamic Content and Loopers | Themeco Docs

As well as some other helpful quickstart videos we’ve provided on the Single and Archive Layout Builders:

Layout Builder: Single Templates

Layout Builder: Archive Templates

The primary thing to watch out for in this particular situation is that Pagination is really only possible in an Archive Layout that is assigned properly, because of the nature of how pagination works. In addition that, when using the Archive Layout Builder, a WP Query is already provided via the context you assign it to, there is no need to setup a Looper Provider because a Looper Provider in and of itself is just a new WP Query that overwrites the default query provided by the context you are in. For example, if you assigned your Archive Layout to a Taxonomy archive, that Taxonomy archive will already be providing that data to you by default in WordPress, and this is the content you can paginate if desired, but you could then add another Looper Provider towards the end of the page if, say, you wanted to also display recent posts on that archive for some reason.

So going back to pagination, if you haven’t done so I would recommend taking a look at how we’ve setup the Archive Layout Builder Starter Templates, as they have all the basic building blocks you’d need wired up for you already, and are an invaluable way to learn about how to utilize Loopers in an appropriate manner:

For example, if I start by adding the “Classic Light” template, we get the following output:

You can see that in this template, the first Column in the Row (renamed to “Post”) is setup to be a Looper Consumer, set to consume All content. The data being “provided” is not from an explicit provider, but is rather implicit from the archive it is assigned to (in this case, the blog). At the very bottom of the page, you will see that we have our Post Pagination Element:

Because this is just placed directly inside the page, it is inheriting the WP Query from the archive itself, just as the content above, so it will automatically paginate that content. On the live frontend of my site, you can see this all working with my first page:

Then clicking to my 2nd page, we get the next 10 posts:

Now those 10 posts per page are coming from the Blog pages show at most setting mentioned previously by @stevenburles. That can be overwritten in the Consumer if you would prefer, but we recommend setting the appropriate number in your WordPress admin so that you are only pulling through the resources you need for each page load and not wasting bandwidth. Again, definitely check out those Starter Templates if you haven’t already as they are a huge help in seeing how everything is put together in the correct way to get things working. @armandogomez, with specific regards to an infinite scroll-esque “Load More” button, yes, a few people have mentioned this, and we have discussed that we may look into this at some point in the future, but we cannot provide a definitive timeline on this as there are many moving parts there and other things we want to prioritize first, especially considering working pagination is possible using the methods outlined above.

Hopefully that helps point you both in the right direction, cheers!