This is a guest post from Corey at Code Nation, a highly-revered certified Architect firm based in both Brisbane, Australia and Bogotá, Colombia. Corey often pushes the boundaries of the NationBuilder framework and generously offered to share one of his own tricks with us:
Updated 5/15/2017: In February of this year, Google announced a series of changes to their custom search engine tools. This article has been updated to support Google's Custom Search Element V2 and to simplify the process of adding a custom search page to your NationBuilder site (it's now only 3 steps!)
You’ve got a growing nation full of champions and they’re kicking goals for your cause. Your site design does justice to your incredibly good-looking community of supporters (props to the Architect!). Your content is excellent and engagement is high. In short, you’re killing it.
But your site is getting unwieldy. You have hundreds of winning campaign updates, powerful petitions and brilliant articles submitted by your wonderful supporters, not to mention the growing tide of forum posts from your suggestion box pages. The sheer size is as impressive as it is impossible to navigate.
Adding a site search is a great way to help your supporters surf that endless stream of sensational content. Here’s how to make the magic happen with a Google custom search engine:
Create your Google Custom Search Engine
Note: you'll need to create a custom theme if you don't already have one.
Add the search to your site
-
Create a new Basic page for your site. Place it where you please (the top nav is a hot option), but make sure the slug of the page itself is "search".
-
Add the partial called “_search.html” to your custom theme:
- If you have connected Dropbox to your nation, then you will upload that file via the "nb_sync" folder in your Dropbox account.
- Otherwise, you can simply upload that file via the NationBuilder control panel (navigate to the relevant site, click the "theme" link, then choose "files" and add the partial using NationBuilder's simple drag and drop function).
-
Add the following code snippet to your “pages_show_basic.html” and “pages_show_basic_wide.html” files, placing the code where you want the search bar and search results to appear (as indicated in the screenshot below):
Again, you will either update these files via Dropbox if you have connected it your nation, otherwise you can edit them directly via the NationBuilder control panel.
This process will give you a brand-spanking new search page similar to the Total Environment Centre, which includes the necessary search form and loads the results below. You can get more creative and add the search form wherever you wish across your site - just use these lines of code to include the form in other locations as you please. For example, Greens Parlimentarian Dawn Walker sports a custom search tool in the top nav of her official site.
Styling your search page
The code provided in step 2 above will work on any website, however, the classes provided are primarily intended for use with themes based on the Bootstrap framework (the industry-standard NationBuilder base theme since its release in 2015).
If your website uses a theme based on the "Aware" public theme, then you may find this code more appropriate for your search form. Regardless of what theme your site uses, it is possible to apply styles via CSS to the search form and results to ensure they match your brand.
Hiding page from search
If you want to hide certain pages from search, you can add the following metatag to those pages, which will tell Google and other search providers to ignore the page when indexing your site (NationBuilder automatically adds this tag to "unlisted" pages):
<meta name="robots" content="noindex">
This code snippet belongs in the <head> section of your "layout.html" file, but you'll need to be careful to ensure that it's only added to the specific pages you wish to hide (a process which requires the use of liquid conditionals).
Wrap up
This search function is just a mere foray into the world of useful navigational features. It could be used in conjunction with well-maintained archives, month/year filters, section categories and page tags.
Then again, you could always just eschew search, empty your archives and jettison your past in the fear it might bite you on the ass.
