How to create links to Previous and Next posts

Loops & Logic
#1

On a post singular page, I want to show links to the next post and the previous post.

The singular page is not in a loop, but I could create a loop there and use route to determine which post I’m looking at.

Is there any magic code that could let me create a link to the next and previous posts?

Cheers, Richard

#2

Hi RichardC:)
I am not sure what exactly you are trying to aim in your post but are you looking for something like this?

Next Previous
Next Previous1198×116 7.73 KB

But you just wanna pull out the singular page of the post and not the entire post loop?

1 Like
#3

Here’s the magic code!

<Note>Save our query so that it only runs once.</Note>
<Set query=postQuery type=post orderby=date order=desc  />

<Note>Save the current post ID</Note>
<Set currentID><Field id /></Set>

<Note>Create a list of each post ID. This way each post ID is associated with an index</Note>
<List postIDs>
  <Loop query=postQuery>
    <Item>
      <Field id />
    </Item>
  </Loop>
</List>

<Note>Loop through our list of post IDs. When we find the current post in the list, we calculate the relative index of the previous and next post ID</Note>
<Loop list=postIDs>
  <If check="{Field}" value="{Get currentID}">
    <Set prevIndex><Math>
      <Get loop=count /> - 1
      </Math></Set>
    <Set nextIndex><Math>
      <Get loop=count /> + 1
      </Math></Set>
  </If>
</Loop>

<Note>Now we use the saved indexs to get the post IDs from the list and save them as variables</Note>
<Set prevID><Field list=postIDs item="{Get prevIndex}" /></Set>
<Set nextID><Field list=postIDs item="{Get nextIndex}" /></Set>

<Note>Finally, we run through our saved post query once more and display the items which match our saved previous and next post IDs</Note>
<div style="display: flex;">
  <Loop query=postQuery>
    <If check="{Field id}" value="{Get prevID}">
      <div class="previous">
        <a href="{Field url}"><Field title /></a>
      </div>
    </If>
    <If check="{Field id}" value="{Get nextID}">
      <div class="next" style="margin-left: auto;">
        <a href="{Field url}"><Field title /></a>
      </div>
    </If>
  </Loop>
</div>

Let me know if this works for you! Use it for any post type by modifying the query variable at the top :slight_smile:

1 Like
#4

@julia Brilliant!

I haven’t tested it yet but I’ve never been disappointed by anything you post.

Also, your use of <Note> is enlightening. I’ll be using that, and will update my progress

Thanks, Richard

1 Like
#5

Yes, that’s what I want. I don’t understand your second question, but I think Julia has solved it. Thanks.

#6

Question about loop efficiency:

At the end, you run through the entire loop to display two posts. Since the entire loop could consist of hundreds of posts or more, could it be more efficient to simply create new loops for each of the two posts like this?

<Loop type=post id="{Get prevID}">
  ...display stuff ...
</Loop>
<Loop type=post id="{Get nextID}">
  ...display stuff ...
</Loop>
#7

It’s always good to see people who are efficiency-minded in L&L, so great question! Because there’s an id parameter that’s specified, those loops aren’t looping through all the posts, they’re only looping through the one post whose ID is written in the value, so it’s just about as efficient as it could be.

#8

Sorry I wasn’t clear. Julia’s final loop is

<Loop query=postQuery>

And postQuery is

<Set query=postQuery type=post orderby=date order=desc />

Which does loop through all the posts. The loops I showed that specify the post ID would be my alternative.

#9

Hold up, I misspoke! I got confused between your suggestion and the markup that Julia had written. In Julia’s example, she’s looping through a query variable, which is basically a loop that’s already been saved and so it requires very little work to loop through it as many times as you’d like. You could test the two approaches yourself with the Timer tag to confirm which is most efficient, but looping through a query variable is way more efficient than looping through the original query itself.

1 Like
#10

If the work is already done with the original loop, that’s what I needed to know. Thanks.

1 Like