Google Custom Search Setup

Google Custom Search Setup

Canvas includes a ready made search results page that renders a Google Programmable Search Engine (formerly Google Custom Search, "CSE") inside the theme layout. It uses the gcse results element plus the standard Google loader script, so search results appear styled within your page content area.

Structure

The results page (search.html) drops a single Google element into the content wrap. Google replaces this tag with the live search box and results:

<section id="content">
	<div class="content-wrap">
		<div class="container">

			<gcse:searchresults-only></gcse:searchresults-only>

		</div>
	</div>
</section>

Setup

Load the Google CSE script and point it at your engine ID (cx). This is the exact loader used in the template, placed before the closing body:

<script>
	(function() {
		var cx = '006140480002229796823:3f-_bji0d1w';
		var gcse = document.createElement('script');
		gcse.type = 'text/javascript';
		gcse.async = true;
		gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
			'//www.google.com/cse/cse.js?cx=' + cx;
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(gcse, s);
	})();
</script>

Replace the cx value with your own Programmable Search Engine ID from the Google control panel at https://programmablesearchengine.google.com/.

Wiring a Search Box

The <gcse:searchresults-only> element renders results only. To send queries into it from a search box elsewhere on the site (for example a header search field), submit the query as a URL parameter and let Google's script pick it up on the results page. Link or submit your search form to the results page URL:

<form action="search.html" method="get">
	<input type="text" name="q" class="form-control" placeholder="Search...">
	<button type="submit" class="btn btn-secondary">Search</button>
</form>

Google's CSE script reads the query from the page URL and populates the searchresults-only element automatically.

Tips

• The cx ID in the template is a demo value. Swap in your own engine ID or the widget searches Google's sample content, not your site.
• Use <gcse:searchresults-only> when you want to provide your own themed search input (as Canvas does). Google offers other tags such as a combined search box plus results if you prefer Google's default input.
• The loader script picks https: or http: to match the current page protocol, so it works on secure and insecure hosts without edits.
• Because Google injects and styles the results, layout tweaks are limited to what the Programmable Search Engine control panel exposes (look and feel, results layout, promotions).
• Keep the results element inside the .container in the content wrap so search output aligns with the rest of your page grid.