Filter blog posts on NationBuilder websites

Our clients who are active NationBuilder bloggers often need a tool to categorise their blog posts by tags and 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.

View demo

Relevant Files

HTML: pages_show_blog.html, pages_show_blog_wide.html

SCSS: _mixitup_styles.scss

JS: jquery.mixitup.min.js

The problem?

The standard bootstrap blog page looks like this:

 

1-lr-UG603Vtdb0fuMG8FJsg.png

The solution?

1. Download these 3 files and upload them to your theme.

2. In the theme.scss file, import the _mixitup_styles.scss partial.

 

1-t8pVbHC4ZYQi-Lq6874Xgw.png

A screenshot of the theme.scss file (the new line to add is the final one visible in this image) or you can copy these styles in your own scss file.

 

 3. In the layout.html file, include the JavaScript files just before the closing </body> tag

 

1-re-8QbjIso0EiQmYgPLVvw.png

Add this JavaScript file directly before the closing </body> tag in the layout.html file

 

4. In the backend, make sure you upload a image file in the blog post pages files section, and that’s it.

 

1-thP3pidrvxGnRYWWYT4pJQ.png

Here is the live example site, visible at http://learn.codenation.com/blog

 

Get the code

View the Live Site

The plugin is free for personal work and for non-profit organisations otherwise make sure you purchase the relevant licence for MixItUp here

 

 

Have any questions about how all this works? We’re always happy to help info@codenation.com