# How do I add next/previous links to my posts?

**URL:** <https://zola.discourse.group/t/how-do-i-add-next-previous-links-to-my-posts/1645>\
**Category:** Support\
**Created:** [February 15, 2023, 1:21pm UTC](https://zola.discourse.group/t/how-do-i-add-next-previous-links-to-my-posts/1645 "2023-02-15T13:21:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![port19x](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/port19x/32/927_2.png) [@port19x](https://zola.discourse.group/u/port19x)\
**Post date:** [February 15, 2023, 1:21pm UTC](https://zola.discourse.group/t/how-do-i-add-next-previous-links-to-my-posts/1645/1 "2023-02-15T13:21:10Z")

</div>

> **[Port19's Webpage](https://port19.xyz)**
>
> My Writings on Linux, Tech and Lifestyle

Very simple stuff conceptually.  
I want to add a next / previous button to the bottom of each of my posts, ideally with the title of said next post.  
I use no theme.  
I have one flat content folder with everything in it, so no “sections”.

~~Somewhat related: what’s the recommended way to introduce mutually exclusive categories? sections or taxonomies?~~  
_EDIT: I should probably use taxonomies since I’d otherwise loose the ability to have a “recent posts” section on my landing page [#1170](https://zola.discourse.group/t/list-a-mix-of-subsections-and-pages/1170)_

Also, why are the taxonomy docs so …inaccessible?  
People basically just want tags, yet it looks like it requires rocket science to implement without breaking the rest of a minimal site

---

<div class="post-metadata">

**Author:** ![port19x](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/port19x/32/927_2.png) [@port19x](https://zola.discourse.group/u/port19x)\
**Post date:** [February 15, 2023, 1:22pm UTC](https://zola.discourse.group/t/how-do-i-add-next-previous-links-to-my-posts/1645/2 "2023-02-15T13:22:05Z")

</div>

> **[Acceptance (my poem)](https://protesilaos.com/poems/2023-01-23-acceptance/)**
>
> Just read the poem. No further comment.

Example of the desired behavior from another blog using a different ssg

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [February 15, 2023, 8:10pm UTC](https://zola.discourse.group/t/how-do-i-add-next-previous-links-to-my-posts/1645/3 "2023-02-15T20:10:47Z")

</div>

> [@port19x](#):
>
> I have one flat content folder with everything in it, so no “sections”.

You will have at least one section, the default one. If you set a `sort_by` in it (see [Section | Zola](https://www.getzola.org/documentation/content/section/#sorting) for the details), you get `page.lower` and `page.higher` that corresponds to previous/next. See [GitHub - getzola/even: A clean blog theme for Zola](https://github.com/getzola/even) for example for a theme that has what you want.

> Also, why are the taxonomy docs so …inaccessible?  
> People basically just want tags, yet it looks like it requires rocket science to implement without breaking the rest of a minimal site

What do you mean breaking the site? What’s inaccessible in [Taxonomies | Zola](https://www.getzola.org/documentation/content/taxonomies/) ?  
Many people want _way_ more than tags.

---

<div class="post-metadata">

**Author:** ![port19x](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/port19x/32/927_2.png) [@port19x](https://zola.discourse.group/u/port19x)\
**Post date:** [February 16, 2023, 9:38am UTC](https://zola.discourse.group/t/how-do-i-add-next-previous-links-to-my-posts/1645/4 "2023-02-16T09:38:19Z")

</div>

page.higher / page.lower resolve to “[object]” for me.  
I have “sort\_by” set to “date”.

I tried integrating links with the following

```auto
<a href="{{ page.higher }}">previous</a>
<a href="{{ page.lower }}">next</a>

```

Tho I should probably have a conditional to check for first/last

```auto
{% if page.higher %}
{% endif %}

```

As for taxonomies,  
I’d say a code snippet demonstrating how you could use a taxonomy in templating would be very useful.

I currently use a unicode naming convention isntead.

```auto
    {% for post in section.pages %}
    {% if "💻" in post.title %}
    <li>
      <time>{{ post.date | date(format="%d.%m.%Y") }}</time> &ndash; 
      <a href="{{ post.permalink | safe }}">{{ post.title }}</a></li>
    {% endif %}
    {% endfor %}

```

I’d prefer to stay themeless. If I wanted themes I’d be on hugo

---

<div class="post-metadata">

**Author:** ![port19x](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/port19x/32/927_2.png) [@port19x](https://zola.discourse.group/u/port19x)\
**Post date:** [February 16, 2023, 10:04am UTC](https://zola.discourse.group/t/how-do-i-add-next-previous-links-to-my-posts/1645/5 "2023-02-16T10:04:28Z")

</div>

The following code snippet from [one of the templates](https://github.com/getzola/even/blob/master/templates/page.html) in your recommended theme worked for me:

```auto
{% if page.lower or page.higher %}
  <div class="post-nav">
    {% if page.lower %}
      <a class="previous" href="{{ page.lower.permalink }}">‹ {{ page.lower.title }}</a>
    {% endif %}
    {% if page.higher %}
      <a class="next" href="{{ page.higher.permalink }}">{{ page.higher.title }} ›</a>
    {% endif %}
  </div>
{% endif %}

```

Edit: styled and adapted to my site + layout

```auto
{% if page.lower or page.higher %}
  <div class="post-nav" style="width:100%">
    {% if page.lower %}
      <a class="previous" style="float:right" href="{{ page.lower.permalink }}">{{ page.lower.title }} ›</a>
    {% endif %}
    {% if page.higher %}
      <a class="next" style="float:left" href="{{ page.higher.permalink }}">‹ {{ page.higher.title }}</a>
    {% endif %}
  </div>
  <br>
{% endif %}

```

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [February 16, 2023, 1:25pm UTC](https://zola.discourse.group/t/how-do-i-add-next-previous-links-to-my-posts/1645/6 "2023-02-16T13:25:47Z")

</div>

> [@port19x](#):
>
> I’d prefer to stay themeless. If I wanted themes I’d be on hugo

It’s fine, I don’t use themes either. It was just to show you how it’s implemented.