How can I show next and previous posts from within a single post of a collection using Webflow?
TL;DR
- Add two Collection Lists to the CMS Template Page, using a sortable custom field (like “Post Order”) and filters to show posts with lesser (previous) and greater (next) values than the current item.
- Limit each list to 1 item, sort appropriately, link to the item’s URL, and use conditional visibility to hide empty results.
To show next and previous posts within a single CMS item in Webflow, you need to use Webflow’s CMS-powered pagination workaround, as Webflow doesn't support native next/previous post navigation in CMS item pages.
1. Use the Limit and Offset Filters
- Add a Collection List to your CMS Template Page (e.g., Blog Post Template).
- Filter it to show the same collection your current post belongs to.
- Use either the Limit and Offset filters to simulate next/previous logic based on a sorted order such as Published Date or a custom field like Post Number.
2. Add a Unique Sorting Reference
- Create and assign a Sortable Field like a Date or Number (e.g., a custom “Post Order” number).
- Sort the Collection List by that field (e.g., ascending or descending).
3. Filter for Previous Post
- Duplicate the Collection List so you can have two: one for Previous Post and one for Next Post.
- For the Previous Post list:
- Apply a filter like: “Post Order is less than Current Item’s Post Order.”
- Sort descending so the most recent older post appears.
- Limit to 1 item.
4. Filter for Next Post
- On the duplicated list (for Next Post):
- Apply a filter like: “Post Order is greater than Current Item’s Post Order.”
- Sort ascending so the next sequential post appears.
- Limit to 1 item.
5. Link the Titles or Buttons
- Inside each Collection Item, include a Link Block or Button.
- Bind the link to the Current Post’s URL using the Current Item’s Slug or similar field.
6. Style and Conditional Visibility
- Use Conditional Visibility to hide these sections if there are no items (e.g., no next post available).
- This prevents empty blocks from displaying at the start or end of the post sequence.
Summary
To show next and previous posts on a Webflow CMS post template page, filter a Collection List based on a sortable field, use comparative filters (greater/less than), and set the limit to 1 post. This creates a dynamic way to pull related posts before and after the current one.