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 Ghost Snippets

How to Add search option on ghost theme

Ghost is most popular blog platform for the author, blogger and writer. When we develop newtheme, 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

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 divulsection 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 NamePurpose
##titlePost title
##urlPost url
##primary_tag_nameName of primary tag
##primary_tag_urlUrl of primary tag
##primary_author_nameName of primary author
##primary_author_urlProfile url of primary author
##primary_author_avaterProfile photo of primary author
##excerptshow some words of the post content. Default words count is 15
##published_atPost publication date. Format can be change by time_format option
##feature_imagePost featured image url
##resultCountMatched result count

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


// 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.