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).
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.
Showing 37 reactions
Sign in with
-I found this short article that explains the change – https://searchengineland.com/google-sunset-google-site-search-product-recommends-ad-supported-custom-search-engine-269834
You can also see our post here – https://nationbuilder.com/how_do_i_add_search_to_my_site and comment there as well. Right now there are no plans to build our own NationBuilder site search.
I’ll take a look this weekend and push any updated code to the same location so anyone following this thread can get the latest version at the same links.
The text of the article above has also now been updated to reflect the new process of implementing a custom search on a NationBuilder site (or updating an existing search page to the latest version)
Have an outstanding week!
I tested the tec.org.au search on an iPhone 4s and a Samsung Note and the search results did not show. They did show on a Nexus tablet and a Linux laptop. Very strange!! My nation’s search page is here veganaustralia.org.au/search and shows the same behaviour as tec.
If you want to take this discussion offline, you can contact me through the email at veganaustralia.org.au/contact_us
Thanks for getting in touch. We’ve created an updated version of the code for that “_search.html” partial, which you can find here: https://raw.githubusercontent.com/code-nation/Custom-Search-for-NationBuilder-Sites/master/_search.html. For anyone starting from scratch to add a new custom search to their site, you can read the latest instructions on the main README page of that repository: https://github.com/code-nation/Custom-Search-for-NationBuilder-Sites. I think the text of this blog post will also be updated to reflect those changes and include the latest instructions soon.
Happy Mother’s Day!
Here is the email from google:
Subject: Please migrate to the Custom Search Element API 2.0
Dear Custom Search Engine Administrator,
The Custom Search Element API 1.0, which was deprecated in 2012 in favor of API 2.0, is now no longer maintained. API 1.0 may experience outages and failures, and possibly stop working entirely.
You’re receiving this message because our records show you might currently be using the Custom Search Element API 1.0. You can confirm if you’re using this version by looking at the code on your search page for a call to google.search.CustomSearchControl.
To avoid any potential interruptions in service, please update your website to use the Custom Search Element API 2.0. The easiest way to transition is through the CSE Control Panel at cse.google.com, where you can generate your new Custom Search Engine code and add it to your website.
We’re always improving the Custom Search Engine and we thank you for your support. For more information about the Custom Search Element API, visit Google Developers.
The Custom Search Engine Team
That should sort out the problem for you :)
Do I use this code?
And which theme file(s)?
I didn’t write up this blog, but if I had to guess I’d say that your search engine ID is probably the value in “var cx = ‘random number’” from your dropbox link.
However, if you’re an NPO, you can turn off these ads for free on this config page – https://www.evernote.com/l/ADg_MAvFYRdKQrNnDwnc2Ok2vctQgBPL8rM
That’s no longer a thing. Here’s what our options are:
Make sure that you’ve created the search.html partial with the file from Freshhold’s Github, and also that you’ve included the code in step 3 on both your “pages_show_basic.html” and “pages_show_basic_wide.html” templates. You’ll need to replace where it says "the_slug_of_your_new_searchpage" with your actual search page’s slug and where it says your custom search ID with your custom search ID and it should be working!
Let me know if you have any additional questions!