Tech News and Articles

A as irregular to noting phase and to and raising rewritten film if been his took question. Decelerate upon positives on need peacefully.

Ghost is most popular blog platform for the author, blogger and writer. When we develop new theme, search is the most important part of a blog site. If a site has 2-10 articles, there is no problem to find the content without search. But we face problems to find content when there is a lot of articles.

Ghost Finder is a popular search plugin for ghost. It is the most advanced search option and easy to use for the developer. We have used in our Ghost Themes

I will show you how to add a search option in the ghost themes using Ghost Finder. Here are some steps you have to follow to set up the search option in your ghost theme.

  1. Go to Ghost Finder github repository and download it
  2. Go to dist folder and use the plugin dist/ghost-finder.js
  3. Follow the instruction

Add the plugin file in your footer scripts

Add the this plugin file in footer scripts of your ghost theme.

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


Markup for search

<input id="search-input" type="text" placeholder="Type to search" />
<div id="search-result"></div>


Activate the plugin to your theme

Simply activate the plugin and add contentApiKey of your ghost site. If you don’t know how to create contentApiKey, see from here

    new GhostFinder({
        input: '#search-input',
        showResult: '#search-result',
        contentApiKey: //CONTENT API KEY...,

#search-input is for input selector. You can use other class or id what you want.

#search-result is for showing the search results. You can use div, ul, section anything for showing the search result

N.B: don’t use the ghost finder script code for specific page like {{#contentFor "scripts"}}{{/contentFor}} I always prefer default.hbs to write the codes.

Advanced options for search

You can use search result markup what you want. You is more flexible then other plugins. Here is options.

Field Name Purpose
##title Post title
##url Post url
##primary_tag_name Name of primary tag
##primary_tag_url Url of primary tag
##primary_author_name Name of primary author
##primary_author_url Profile url of primary author
##primary_author_avater Profile photo of primary author
##excerpt show some words of the post content. Default words count is 15
##published_at Post publication date. Format can be change by time_format option
##feature_image Post featured image url
##resultCount Matched result count


I have used in my theme. I initialized like this process.


<div class="search-wrapper">
   <div class="search-section">
      <input class="form-control search-field" type="text" placeholder="Write something and hit enter">
    <div class="search-post"></div>



<script src="{{asset "ghost-search/dist/ghost-finder.js"}}"></script>
// Ghost search
new GhostFinder({
    input: '.search-field',
    showResult: '.search-post',
    time_format: 'DD MMM YYYY',
    resultTemplate: `<div class="result-template">
        <p class="mathch-result">Matches result: ##resultCount</p>
    singleResultTemplate: `<div class="search-post-single">
    <div class="thumbnail-image">
        <a href="##url"><img src="##feature_image" alt="##title"></a>
    <div class="search-content">
        <div class="post-text">
            <h6><a href="##url">##title</a></h6>
            <p>##published_at | <a href="##primary_author_url">##primary_author_name</a></p>
        <a href="##url"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
    contentApiKey: window.contentApiKey

In the search input field (.search-field) is for typing what you want to search and .search-post div is used for showing the search result.

The other markup is used in the singleResultTemplate option. You can use the markup what you like. Just use the option as like as the table.

The plugin does not provide any style for the search result or input. You have to style yourself. I think this will be better way for you because you can style as you want

That’s it!

Feel free to comment if you face any issue or you get a better improvement for this. This is an open source project. You can fork and send a pull request to the repository. We will eagerly accept your code if everything is good.


'Electronthemes is a web-based software company. We provide premium Wordpress and ghost themes for our customers. We are very happy to be a part to grow your business.'

× Shopping Cart

Your cart is empty.