Ghost is a very powerful blogging tool which helps you to concentrate on the content rather than the plugins and the underlying components. However, a search bar would be an essential component for a blog, as it helps returning customers or users to search for a specific post.

You might have noticed the same search bar on the left side of this website. The search bar works with the help of Google Custom Search. It accepts a query string and pass it to a Ghost Page which accepts the query and display results from Google Custom Search.

So, let’s get started by pasting the below HTML snippet into any of your Ghost Blog Page or into default.hbs file of your Ghost template.

   <form method="get" action="/search">
    <label>Search for:</label>
    <input type="search" placeholder="Search …" value="" name="q" title="Search for:">
           <input type="submit" value="Search">
        </form>

Now save the page (or update your template files in the server if you have modified default.hbs and refresh the theme) and the above HTML snippet must have added a very basic search box to your blog as shown below.

Leave styling for now as we will address that in a later post. For the note, we can add the styling classes either from template or from any framework like Bootstrap to make it look more beautiful as I did in this website.

Now create an empty page in your Ghost Blog with name search, all in lower case.

Navigate to Google Custom Search and sign-in with your Google account.

You will land up in Dashboard as shown in the following screenshot.

Click Add to create a new custom search. A form will be displayed as shown below. Enter your domain name and click Create.

You will get a success message like the one shown below.

Click Get code to view the code snippet.

You can paste this directly into the search page which will show a Google Custom Search Box which may not match your blog’s theme, which has a Google Custom search logo and is very difficult to customize.

So, we will modify the Custom Search to accept the query from our HTML form, process it and display the result. To do this, go to Look and Feel from the left navigation menu and the following screen will appear.

Select Results Only and click on Save and Get code has shown below.

You will get the new modified code snippet which you can paste in the search page of your Ghost Blog.

Save and refresh your Ghost Blog. Try the new search bar, type any query and press enter. This will navigate to
yourdomain.com/search?q=query+string which in turn will display the results.

Let me know your queries or comment. I will publish a guide for styling the same search box in another post and will update the link later.