Pagination in WordPress
Overview
Pagination splits long lists of posts into separate pages so your visitors can navigate through content without endless scrolling. In Flowmo, you configure pagination as part of the WP_Query settings for any collection. You choose a pagination style, then point Flowmo to the canvas elements that should act as page numbers, navigation buttons, or load-more triggers.
Flowmo supports three pagination modes: Numbered, Load More, and Infinite scroll.
Prerequisites
- A Flowmo project with a CMS collection that has a WP_Query configured (see WP_Query: Dynamic Content Lists).
- A Per Page value set in your WP_Query settings (this determines how many posts appear before pagination kicks in).
- Canvas elements designed for your pagination UI (page number buttons, prev/next arrows, or a load-more button).
Pagination Modes
| Mode | Behavior | Best for |
|---|---|---|
| None | No pagination. All posts returned by the query appear on a single page. | Small lists, featured sections |
| Numbered | Classic page navigation with clickable page numbers and optional prev/next buttons. | Blog archives, search results, product listings |
| Load More | A button that fetches and appends the next batch of posts without a full page reload. | Portfolios, galleries, social-style feeds |
| Infinite | Posts load automatically as the user scrolls near the bottom of the list. | Content-heavy feeds, image galleries, discovery pages |
Step-by-step: Add Pagination
1. Open your collection's WP_Query settings
In the CMS panel, open the collection that displays your post list. Scroll to the WP_Query Editor section (the bordered card with Per Page, Order By, and other settings).
2. Select a pagination mode
Find the Pagination dropdown at the bottom of the WP_Query Editor. Click it and choose your mode:
- None -- default, no pagination.
- Numbered -- page number links.
- Load More -- a button to load additional posts.
- Infinite -- auto-loads as user scrolls.
3. Configure pagination elements
Once you select a mode other than None, a Pagination Elements section appears below the dropdown. The elements you need to assign depend on the mode.
For Numbered pagination
You need to assign up to three elements from your canvas:
Page Number Template (required)
Select an element on your canvas that represents a single page number. This element will be repeated for each page. Click the element selector, then click an element on the canvas to assign it. The label shows the element's name once assigned.
Prev Button (optional)
Select the element that should act as the "Previous page" navigation button. Click the element selector and click the appropriate element on your canvas.
Next Button (optional)
Select the element that should act as the "Next page" navigation button.
To clear any assigned element, click the trash icon next to its name.
For Load More pagination
You need to assign one element:
Load More Button (required)
Select the element on your canvas that users will click to load more posts. This element is hidden automatically when there are no more posts to load.
For Infinite scroll pagination
Infinite scroll uses the same element selectors as Numbered pagination:
- Page Number Template -- the repeating element for page indicators (if you want a visual page tracker).
- Prev Button (optional) -- for manual navigation fallback.
- Next Button (optional) -- for manual navigation fallback.
The scroll trigger is handled automatically by the exported code.
4. Design your pagination UI on the canvas
Before assigning elements, make sure you have designed them on your canvas:
- For Numbered: Create a container with a sample page number element (e.g., a small text block with "1" in it), and optionally prev/next arrow elements.
- For Load More: Create a button element with text like "Load More" or "Show More".
- For Infinite: Optionally create a loading indicator element.
5. Preview and export
Your pagination settings are saved automatically. When you export to WordPress, Flowmo generates the appropriate PHP pagination logic based on your chosen mode and assigned elements.
Tips
- Set Per Page first: Pagination only makes sense when you have a specific number of posts per page. Set the Per Page value in your WP_Query settings before configuring pagination.
- Numbered is the most SEO-friendly: Search engines can crawl each paginated page individually. Use Numbered pagination for content you want indexed.
- Load More and Infinite are JavaScript-dependent: These modes use AJAX to fetch additional posts. Make sure your WordPress theme and hosting support AJAX requests.
- Combine with taxonomy filters: Pagination works with filtered queries. If you filter by a taxonomy term, only matching posts are paginated.
- Styling pagination elements: Style your page number template, prev/next buttons, and load-more button just like any other canvas element. Flowmo preserves your design in the export.
- Active page state: For Numbered pagination, the current page number element receives an active class automatically, so you can style the current page differently using CSS states in the designer.
Common Issues
| Problem | Solution |
|---|---|
| Pagination not appearing | Make sure Per Page is set to a value smaller than the total number of posts. If you have 5 posts and Per Page is 10, there is nothing to paginate. |
| Page numbers not rendering | Verify you assigned a Page Number Template element. Click the element selector and click the element on your canvas. |
| Load More button stays visible after all posts loaded | This is handled automatically in the export. If you see this in preview, it will resolve on the live WordPress site. |
| Infinite scroll not triggering | Ensure the exported page includes the required JavaScript. Check that your WordPress theme does not block inline scripts. |
| Prev/Next buttons not working | Confirm they are assigned in the Pagination Elements section. These are optional but must be explicitly connected if you want them. |
| Pagination resets taxonomy filter | This is a WordPress-side issue. Make sure your taxonomy filter term slugs are correct and the query is properly configured. |
| Wrong number of pages | Check the Per Page value and the total post count for your post type in WordPress. The page count is calculated as total posts divided by per-page. |