Add search option to ghost theme

Add search option to ghost theme

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

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

#search-input is for input selector. You can use another 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

Advanced options for search

You can use search result markup what you want. You are more flexible than other plugins. Here are the options.

##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_avaterProfile photo of primary author
##excerptshow 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_imagePost featured image url
##resultCountMatched result count

You can use these options like this.

<div class="search-results-wrapper">
    <div class="search-count">##resultCount</div>
    <div class="search-result">
        <div class="single-search-element">
            <div class="feature-image">
                <img src="##feature_image" alt="##title">
            </div>
            <div class="search-content">
                <h4><a href="##url">##title</a></h4>
                <div class="date">##published_at</div>
                <div class="post-meta">
                    <span><a href="##primary_author_url"><img src="##primary_author_avater" alt="##primary_author_name"></a></span>
                    <span><a href="##primary_tag_url">##primary_tag_name</a></span>
                    <span><a href="##primary_author_url"><img src="##primary_author_avater" alt="##primary_author_name"></a></span>
                </div>
                <p>##excerpt</p>
            </div>
        </div>
    </div>
</div>

The plugin does not provide any style for the search result or input. You have to style yourself. I think this will be a 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.