Using page tags to customize page content and layouts in NationBuilder

On a few recent projects, I’ve needed to design theme-level templates that are more complex than usual — and user customizable, to boot. Maybe the client wants to be able to hide or show a sidebar widget or add a custom field, but on a page-by-page basis. Whatever the use case, I needed to find a way to empower my clients to customize their page’s layout and content without editing the page-level template.

After some experimentation, I found the answer was to use page tags. Once they’re set up, page tags can be as simple to use for customizing page layouts as NationBuilder’s native checkboxes (Show Sidebar, All Comments, etc.). So how does it work?

Step 1: Create a liquid variable for the page’s tags

In order to customize our template based on a page’s tags, we first need to enable NationBuilder’s theme engine to recognize those tags. By default, NationBuilder liquid variables includes a page.tags, an array of page tags, but not a straight-up list of them.

Using the code below, we’ll create a new variable calls tags_list and assign it a value of the page’s tags, separated by commas.

{% assign tags_list = "" %} {% for tag in page.tags %} {% assign tags_list = tag.name | append: ", " | append: tags_list %} {% endfor %}

Note: If that doesn’t make a ton of sense to you, don’t stress over it too much. Basically it just tells NationBuilder that tags_list now is a list of the page’s tags.

Step 2: Choose your tags

Before your code your templates, it’s helpful to map out your planned changes and assign each option a corresponding tag. For example, you may empower your client to hide a page’s share buttons with the tag “layout - hide share buttons”.

It’s helpful to a clear tagging pattern, such as “layout - hide/show component”, because it’ll make it easier for your clients to remember and use appropriately. As you add more tags, you’ll want to write them down in some sort of key or table for documentation.

Step 3: Code your template

Now we’ll use the code we added in Step 1 to generate multiple versions of the page based on tags. Essentially, we’ll use “if statements” to query whether the page has a particular tag, and show the proper content accordingly.

For example:

{% if tags_list contains “your tag from Step 2” %}

I’m the custom content!

{% endif %}

It’s really that straightforward. Just save the template and you’re good to go.

You can download a sample of what the code for Step 3 might look like on a “Basic Page” template, here: http://via.ianhin.es/1jzlx/3N6qw94Y

Step 4: Add your custom tag to the page

Now to test our work. Open up your page in NationBuilder’s Control Panel and add the tag you selected in Step 2. Save the page, and then open its public-facing URL in another tab. You ought to see your custom content. Remove the tag and you’ll have removed the content. Easy as pie.

Note: If you aren’t seeing the change after you add or remove the tag, don’t panic. NationBuilder may have just cached the page. Try manually clearing the site’s cache to see if that solves the problem before debugging your code.

That’s it!

Following this logic, you can add a lot more variability and customization to your clients’ NationBuilder themes without their needing to edit the templates directly. It’ll empower them (which they’ll appreciate) while also reducing the likelihood of broken templates and long-term code debt.

If you end up using this trick, leave a note in the comments. I’d love to hear about it!

Share this post