Skip to main content
Jan 21, 2017

We had a request from a client to integrate Google Custom Search with SilverStripe CMS. The idea was interesting and we decided to write tutorial about it.

There are three main steps to be done:

  • Create Google Custom Search Engine, if you haven't yet
  • Create new page type and template
  • Add search form to template

Custom Google search engine

1) Create custom search engine on Google site

(Creating custom search engine is out of the scope of this tutorial (I'm going to write it in a couple of days, don't worry), so we'll provide only steps related to the SilverStripe CMS itself.)

New page type

2) Create new page type for custom search in folder /mysite/code

class CustomSearchPage extends Page {
  public static $db = array(
  public static $has_one = array(
class CustomSearchPage_Controller extends Page_Controller {

New template file

3) Create new template file in /themes/%your-theme%/templates

4) Insert code from custom search engine; it looks like this one:

<script src="" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new
      '%some-code%', customSearchOptions
    var options = new;
    customSearchControl.draw('cse', options);
    function parseParamsFromUrl() {
      var params = {};
      var parts ='\x26');
      for (var i = 0; i < parts.length; i++) {
        var keyValuePair = parts[i].split('=');
        var key = decodeURIComponent(keyValuePair[0]);
        params[key] = keyValuePair[1] ? decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) : keyValuePair[1];
      return params;
    var urlParams = parseParamsFromUrl();
    var queryParamName = "q";
    if (urlParams[queryParamName]) {
  }, true);

Create new page

5) Go to the admin section and create new page with page type Custom Search

6) Give it a name, e.g. Search Results and save ti.

Note: Remember it's URL because you need to add it later to a search form (in our case the URL is "search-results")

Search form

7) Add code for new search form that will redirect search query to the new search page, e.g.:

<form action="search-results">
  <input name="q" type="text">
  <input type="submit" name="submit" value="Search">

Build and flush

8) You need to rebuild tables and flush template cache with the following URL in a browser's address bar: