Add Next and Previous links to blog posts on your NationBuilder site

If you’re anything like our favourite progressive clients, you’ve got an excellent blog where your supporters keep up-to-date with your latest news. Your legendary crew are creating winning content for your campaign. People love reading your posts and always want more. Why not add a “Next” button so folk can easily continue through to each subsequent post with a click? You could even add a “Previous” button for all those history buffs! Read on to find out how…

The code snippet below won’t print anything to the page, but it will do the important work of creating 2 new liquid objects: “previous_post” and “next_post”. You will use those objects to add the links to your posts.

{% assign ordered_posts = page.parent.children | sort:'published_at' %}
{% for post in ordered_posts %}
{% if post.id == page.id %}
{% assign previous_post_number = forloop.index | minus:1 %}
{% assign next_post_number = forloop.index | plus:1 %}
{% endif %}
{% endfor %}

{% for post in ordered_posts %}
{% if forloop.index == previous_post_number %}
{% assign previous_post = post %}
{% elsif forloop.index == next_post_number %}
{% assign next_post = post %}
{% endif %}
{% endfor %}

Put the code above at the very top of your two blog post templates (on the first line, above all the other code). Those two templates are:

• “pages_show_blog_post.html” for blog posts with the sidebar activated

• “pages_show_blog_post_wide.html” for posts without the sidebar

You can then access any page variable for the previous post and the next post — see the full list of available variables here:http://nationbuilder.com/page_variables.

An example implementation is to add a pair of buttons on your page somewhere, which could each link to the previous and next posts (and optionally include the headline of each):

{% if previous_post.id.size > 0 %}
<div class="padtop padbottom">
<a href="{{ previous_post.url }}" class="submit-button btn btn-primary">Previous post: "{{ previous_post.headline }}"</a>
</div>
{% endif %}

{% if next_post.id.size > 0 %}
<div class="padtop padbottom">
<a href="{{ next_post.url }}" class="submit-button btn btn-primary">Next: "{{ next_post.headline }}"</a>
</div>
{% endif %}

You want to wrap your buttons in those liquid {% if %} conditionals so you don’t get a ‘previous’ link on your oldest post, or a ‘next’ link on your newest post.

The devil might be in the details, but the developer should be too.