When Ghost released v5.3.0 in July 2022, it announced native in-built search.
It looks like this:
Ghost's search allows visitors to search through post titles, post excerpts, tags and author names.
And it's all baked in to the product!
Luckily it's really easy to install on a Ghost site and it works on any theme 👏
There are two options to get search installed.
Option 1. Use a link
You can enable search on any text, button (or anything else) by simply adding a link to #/search
.
Like this:
This means you can easily add a "Search" link in your navigation (Settings > Navigation), or something like the button above within post content.
Option 2. Use a data attribute
The second way to add search to your Ghost site is to add a data-ghost-search
attribute to an element. This will likely be in your theme, like this:
<a href="#" data-ghost-search>Search</a>
Like this (below is an HTML card with the code above):
SearchBonus: Keyboard shortcut
If you've added search to your site using the second of the two options above (data attribute), Ghost automatically enables a keyboard shortcut whenever that tag is in the page code.
Just hit Cmd+K
(Mac) or Ctrl+K
(Windows), start typing, use the arrows to select the content you want and hit return! 🤯
Reminder: This will work on any page on your site where the data attribute tag is present. So make sure you add search to your header or footer, or some element that is available on every page.
Thanks for reading!
I am the founder of Codelet. I have five years experience publishing and developing for Ghost, on over 100 sites. Codelet publishes Ghost themes, blog posts and offers expert Ghost support.