12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Feb 12, 2020

Building Prev / Next Posts with Repeaters in Oxygen

David Browne

In this premium tutorial we'll look at a way that we can use the Repeater component to build previous and next post links for use on a Single Post template.

Live Demo

By using the repeater, we can visually build these elements and pull in any dynamic data we want from the posts, post title, excerpts, etc.

We'll go through these steps;

  1. Building our repeater elements
  2. Filter the query to include only previous / next posts
  3. Adding our Previous / Next Post headings
  4. Changing the style depending on how many posts there are

Building our Post Links with the Repeater

After adding our repeater element onto the template, the first thing is to set it as a 'manual' query. Then set our Query params;


This will make sure we're only pulling in posts, there are no more than two posts showing and there will be no pagination from the repeater to worry about.

With the repeater, the posts can obviously be built in anyway we like. In our example, the whole posts inside the repeater are links.

This is done by first placing a link wrapper element inside the repeater div, with a height and width of 100% and then setting the URL to be the posts permalink found by clicking the 'data' button next to the URL field.

Inside this link wrapper we then place two elements, a text element for the post title and another text element that will be used for the 'Previous Post' or 'Next Post' text sitting above the post title. We can't use a heading for the post title as it will be inside a link wrapper, but we can just use the style options to increase the font size to make it look like a heading.

To get the post title from the post, after selecting the text element we click 'insert data' at the top of the page, selecting 'title then leaving the 'link' box unchecked.

Lastly, the background image of the main repeater div is set to be the featured image of the post. In the demo, we're giving the post a class of 'prev-next-post' so we can set add some padding (5%) and a width of 48% with a horizontal flex layout set on the repeater, allowing the posts to sit side by side.

By default, our repeater will be showing the two most recent posts. We want it so the only posts it ever shows are the adjacent posts to the current post...

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.