NationBuilder – Display Related Posts

NationBuilder is not WordPress, and has no built-in functionality to display related posts. That leaves certificate NationBuilder Architects (like we are at eddt inc.), Developers (yep, we do that too), and users alike looking for a solution.

This is the solution I’ve been using for a while over at www.conservativefutures.ca, which is a free market advocacy group in Canada.

It isn’t perfect, but I’ll explain how it works, and post an update here when I have the time to create a more elegant and permanent solution. Like many developers, I’ve been bogged down in other work.

This NationBuilder liquid code should be posted at the bottom of any type of page that you want to display related posts on. It can also be used in a sidebar.

// At the bottom of pages_show_blog_post.html

{% if page.tags_count > 0 %}
<div class=”related-posts”>
{% include “related_posts” with page %}
</div>
{% endif %}

As you can see, the snippet above checks to see if the page its on has any tags, and if so, applies a <div> tag with the class of “related-posts”. You can, of course, change that out for any other styles in your NationBuilder site.

Next, you need to create the _related_posts.html partial:

<section class=”news”>
{% for tag in page.tags %}
{% unless tag.name == ‘trending’ or tag.name == ‘homepage’ or tag.name == ‘campaign’ %}
{% for post in tag.most_recent_published_pages %}
{% if post.type_name == “Blog Post” %}
{% unless post.id == page.id %}
{% subpage post with “show_embedded_article” %}
{% endunless %}
{% endif %}
{% endfor %}
{% endunless %}
{% endfor %}
</section>

The first for statement loops through all the tags attached to the page.

Within the for statement, we use an unless statement to exclude some specific tags we use for other things in the NationBuilder theme template. You can edit this, or remove it as necessary.

Then we loop through the most_recent_published_pages, and if the post.type_name == “Blog Post” we use the _show_embedded_article.html partial to display the post, UNLESS, of course, it’s the very post that we’re looking at right now!

Here’s what we’ve used inside the _show_embedded_article.html partial:

<div class=”col-md-6 col-lg-6″>
<div class=”recent-news”>
<a href=”{{ post.url }}”><h3>{{ post.headline }}</h3></a>
<h5>{{ post.author.published_name }} — {{ post.published_at | date: ‘%B %d, %Y’ }}</h5>
<p>{{ post.blog_post.content | truncatewords: 15 | strip_html }} <a href=”{{ post.url }}”>[READ MORE]</a></p>
</div>
</div>

This is the partial that will really control what your related post looks like at the bottom of your blog_show_post page. Edit liberally.

As you can see, it’s not the most elegant solution, but it works to get NationBuilder displaying related posts just like WordPress.

The issue with this solution is that it may show a related post more than once, if the two blog posts share multiple tags. This is best used on a website where blog posts generally have only one tag, used much like a category.

Have any questions or comments? Leave them below. If you have a better solution, share!