Sean O' Neill_

Adding Search To Your Ghost Blog

The way i added search to my blog was using Google Custom Search. When someone uses the search box it then passes it to a Ghost page that we will set up, this is where it will display the results from Google Custom Search.

Firstly head over to Google Custom Search page, then click Add, which will then ask you to enter the domain name for the site you will be adding your search box to, then click on create.

Now click on get code, which will bring you to the page shown below, click on look and feel on the left sidebar.


This page we will pick results only and click save & get code.


The code given will be something like the below which will be added to a page in Ghost that we will create.

  (function() {
    var cx = '00000000000000:h_zmp5hdtms';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = '' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);

Now go to the Ghost dashboard and crate a new post and call it something like ‘Search Results’, also make sure to turn it into a static page and add your code that you got from google custom search(like the code above) to the page.

Next we will add the search box to your blog. For me I modified the default theme which is located in


I opened up index.hbs and put the code under the blog name for this example.

<form id="search" action="/search-results" method="get">
<input name="q" placeholder="Search.." value="" required>
<input type="submit" value="Search">

Now if you want to make the search box look a bit nicer you could add a little bit of css in the below file.


Add the following css below to the file and save it.

#search .search {
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:0px solid #dbdbdb;
#search input[type=submit] {
    width: 80px;

#search input {
    color: #000099;
    font-weight: bold;

After refreshing your blog you should be able to use the search box which will bring you to a new page with the results for your blog for the search term you entered.

Full code for this can be found on github.