/

How to Add Search Functionality to a Ghost Site

How to Add Search Functionality to a Ghost Site

Are you looking to add search functionality to your Ghost site? In this tutorial, I will guide you through the process step-by-step. By the end, you will have a fully functional search feature on your Ghost site.

Installation

To get started, you will need to install a third-party plugin called Ghost Finder. This JavaScript library uses the Ghost API to search through your posts. Here’s what you need to do:

  1. Make a local copy of your Ghost site using the command line tool npm install ghost-cli -g and ghost install local.
  2. Download the Ghost Finder library and place it in the assets folder of your Ghost theme.
  3. Create a new page in the Ghost admin and set the URL slug to “/search”. This will be the page where the search results will be displayed.
  4. In the Ghost editor, create a new file called page-search.hbs (make sure the file name matches the page slug).
  5. Add the following code snippet to your theme’s default.hbs file, right before the </head> tag:
1
<script src='{{asset 'ghost-finder/dist/ghost-finder.js'}}'></script>

Setting Up the Search Page

Now that the basic installation is complete, let’s set up the search page:

  1. In the page-search.hbs file, copy the content from the page.hbs file.
  2. Replace the page content with the following code:
1
2
3
4
5
6
7
8
9
10
11
12
<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>

Make sure to replace 'YOURKEY' with your unique content API key. You can find this key in the Integrations panel of the Ghost Admin by clicking on “Add custom integration”.

Customizing the Search Template

If you want to customize the search results template, you can do so by modifying the JavaScript code. For example, if your site is not in English, you can translate the search results text. Here’s an example:

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

Feel free to adjust the template to match your site’s design and language.

Adding the Search Navigation Menu

Lastly, you’ll want to add a navigation menu item that links to the search page. This will make it easy for visitors to access the search functionality. Depending on your theme, the process may vary, but here’s how you can do it for the Casper default theme:

  1. Locate the file responsible for rendering the navigation menu (often navigation.hbs).
  2. Add a new menu item with the URL set to /search and the label set to “Search”.

That’s it! You have successfully added search functionality to your Ghost site using the Ghost Finder plugin. Feel free to test it out and make any necessary adjustments.

I hope this tutorial has made it easier for you to implement search on your Ghost site. If you have any questions or need further assistance, feel free to leave a comment below.

Tags: Ghost, search functionality, Ghost Finder, JavaScript, API, content API key, customization