Filter blog posts on NationBuilder websites

Allow supporters to browse your NationBuilder blog posts by category, complete with filter animations and automatic tag detection.

Filter blog posts on NationBuilder websites
NOTE: You'll need to create a custom theme for your NationBuilder site if you don't already have one.

Our clients who are active NationBuilder bloggers often need a tool to categorise their blog posts by tags. We solve this by using awesome plugins such as Isotope and MixItUp. Both are easy to use and look great so we thought we would share a quick tutorial for you to freshen up your NationBuilder blog pages with the MixItUp plugin.

Relevant Files

  1. pages_show_blog.html
  2. pages_show_blog_wide.html
  3. _mixitup_styles.scss
  4. jquery.mixitup.min.js
    At the time of writing the MixItUp plugin is free for personal work and for non-profit organisations. Otherwise, make sure to purchase the relevant MixItUp licence

The problem

The standard bootstrap blog page does not currently include a live filtering system:

The standard NationBuilder blog page using the Bootstrap template

The solution

Step 1

Download these 4 files and upload them all to your theme.

Step 2

Open the theme.scss file of your custom theme and include the _mixitup_styles.scss partial directly below the existing @import statements, using the line below:

@import "mixitup_styles;"

Step 3

Open the layout.html file of your custom theme and include the desired JavaScript file by adding the following line of code before the closing </body> tag:

<script type="text/javascript" src="jquery.mixitup.min.js"></script>

Step 4

Finally, make sure to upload an image in the “files” section of each new blog post you create. That way each post will include your chosen thumbnail where it appears on your filterable blog page, just like in the example screenshot below.


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