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 repeater elements

After adding our repeater element onto the template, the first thing is to set it a 'custom' query so we can select 'posts' as the post type and then set the posts per page to 2.

In our example, the repeater has two elements inside it, a heading element for the post title and a text element for the 'Previous Post' or 'Next Post' above the post title. The background image of the main repeater div is set to be the featured image of the post with a slight background gradient to help see the white text.

This is a premium members-only content.

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

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: