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

Make it even easier for supporters to work their way through your blog posts.

Add Next and Previous links to blog posts on your NationBuilder site
NOTE: You'll need to create a custom theme for your NationBuilder site if you don't already have one.

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…

Required code

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 %}
Step 1

Put this code on the first line of your “pages_show_blog_post.html” and “pages_show_blog_post_wide.html” files

Step 2

Also 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
Step 3

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). To do this, add the below code (or a variation of it) where you want your “Next” and “Previous” buttons to appear.

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.

{% 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 %}

Have any questions? We're always happy to help
Get in touch on email: info@codenation.com