How to add search to a Ghost site

I wanted to add search functionality to a site I built in Ghost.

You can see the Ghost Finder result of this tutorial on this page: https://ritywool.it/ricerca/.

Ghost has had native search built in since Ghost 5, in July 2022, and Ghost 6 keeps it. You don’t need a third-party plugin for titles, excerpts, tags, and authors. Most sites can stop there.

Use Ghost’s native search

The quickest path is a navigation link that points to #/search. In Ghost Admin, open the navigation settings and add a “Search” item with that URL. Clicking it opens Ghost’s search modal. Readers can also open it with Cmd/Ctrl + K.

In a theme, you have two other options.

Use the {{search}} helper for a ready-made icon button:

{{search}}

Or put data-ghost-search on any element you already style:

<button class="gh-search" data-ghost-search aria-label="Search">
  Search
</button>

Both open the same modal. Official themes already include this. On a custom theme, add one of those and you’re done.

Native search indexes post titles, excerpts, tags, and authors. It does not search full post bodies, and it only indexes the most recent 10,000 posts, to stay fast. For many blogs that’s enough.

Optional: full-text search with Ghost Finder

If you need to search inside post content, a Content API client still helps. I used Ghost Finder for that on the older site above.

It’s a JavaScript library that queries the Ghost Content API.

First I made a local copy of the site (with npm install ghost-cli -g and ghost install local), with the theme used on the live site. I downloaded the theme from /ghost/#/settings/design.

I downloaded the library and put it under assets.

I created a search page in the Ghost admin with the “/search” URL slug.

Then I went to the editor and made a page-search.hbs file (it’s important the file name after - matches the page slug)

I restarted Ghost with ghost restart in the CLI to make it recognize the page (I only needed this locally, not on the live server).

I use the Casper default theme, this part will differ depending on your theme, but I added to default.hbs the Ghost Finder JavaScript file (which loads on all pages, unfortunately):

<script src='{{asset 'ghost-finder/dist/ghost-finder.js'}}'></script>

right before the </head> tag.

Then in page-search.hbs I copied the content of page.hbs and instead of the page content I added

<div style="text-align: left;">
  <input id='search-input' type='text' placeholder='Search' style="color: black; padding: 20px" />
  <div id='search-result'></div>
</div>

<script>
  new GhostFinder({
    input: '#search-input',
    showResult: '#search-result',
    contentApiKey: 'YOURKEY',
  })
</script>

contentApiKey is a unique key you need to add from your site, otherwise it will not work. Go in the Integrations panel in Ghost Admin and click “Add custom integration”. That will give you the key, then paste it here.

Since the site is not in English I also added a custom search template to translate it in Italian:

new GhostFinder({
  //...,
  resultTemplate: `<ul class="search-results-wrapper">
      <p>Risultati della ricerca: ##resultCount</p>
      ##results
    </ul>`
})

And finally I added a navigation menu to point to the Search page.

That was it for full-text. For most Ghost 6 sites, start with native search (#/search, {{search}}, or data-ghost-search) and only reach for Ghost Finder if you need body text.

Want me to talk about your product? You can sponsor this site.