I’m not usually one to talk about ghost on this website but because of the need for updated documentation out there, I decided to write this.

When taking on this challenge of setting up a search tool, I didn’t want anything too complicated. The three search tools I was considering were:

  1. Google Custom Search
  2. Ghost Headhunter
  3. Algolia

All three of these tools had their advantages and disadvantages but I ended up settling on Google Custom Search. I didn’t want to have to dive into HTML and CSS and spend a lot of time figuring out problems. This was a fear I had with Algolia. Ghost Headhunter didn’t work properly when I was trying it out and I didn’t want to have to spend the extra time troubleshooting a wide range of small bugs so I settled on Google Custom Search.

Setting up Custom Search itself is straight forward. Just put in your URL and the name for your custom search engine. You had the option to customize the search engine to search only selected pages or the whole site. I wanted it to search the whole site.

Google Custom Search Name

Then click to the *Look and feel* section to choose my layout. I made sure Overlay was selected. I did this because a lot of the other options didn’t work properly or just didn’t look right after setup.

Layout

The Google Custom Search engine is highly customizable. You can change the colors, sizing of logos, and even what is shown in the customize section that I won’t bother getting into. I will point out that you can disable the Google logo in the Google branding section.

Disabling Google Branding

In addition, you can set yourself as the link target in the Search features section under Web search Settings. This is to ensure that when you’re searching and clicking on results, it opens up on the same window rather than in a new window.

Search Features

After setting up the options in the control panel, go to setup and click code. Your code should look something like this:

Google Custom Search Code

Once you get the code, go to your search page and click “+” >HTML and paste the code in the HTML box.

You want to directly paste it here rather than inject it in the header or footer otherwise the search bar will appear at the very top or the very bottom as shown.

Header
Footer

Once you paste the code in the HTML box, go and put a div element around   <gcse:search></gcse:search> as shown:

<div class="search-wrapper" style="width: 600px;">
  <gcse:search></gcse:search>
</div>

Then paste this block of code into the box.


<style>
.search-wrapper {
min-height: 21em;
line-height: 1em;
box-sizing: initial;
width: 100%;
}
.search-wrapper .gsc-control-cse input {
margin-top: 0 !important;
}
.search-wrapper .gsc-control-cse table {
background: none;
overflow-x: initial;
line-height: 1em;
margin: 0;
white-space: normal;
}
.gcsc-branding, .gsc-branding-text, .gsc-branding-img {
display: none !important;
}
.search-wrapper .gsc-control-cse table td {
border: none;
padding: 0;
}
.search-wrapper .gsc-search-box .gsc-input>input:focus,
.search-wrapper .gsc-input-box-focus {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.search-wrapper .gsc-results img {
margin: 0;
}
</style>

It should look something like this:

The finished results should look like this.