How to Add search option on ghost theme -

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.

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

Add the plugin file in your footer scripts

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

&lt;script src="{{asset "ghost-search/dist/ghost-finder.js"}}"&gt;&lt;/script&gt;

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

Markup for search

&lt;input id="search-input" type="text" placeholder="Type to search" /&gt;
&lt;div id="search-result"&gt;&lt;/div&gt;

1 2	<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

&lt;script&gt;
    new GhostFinder({
        input: '#search-input',
        showResult: '#search-result',
        contentApiKey: //CONTENT API KEY...,
    })
&lt;/script&gt;

new GhostFinder({

input: '#search-input',

showResult: '#search-result',

contentApiKey: //CONTENT API KEY...,

})

</script>

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

HTML:

&lt;div class="search-wrapper"&gt;
   &lt;div class="search-section"&gt;
      &lt;input class="form-control search-field" type="text" placeholder="Write something and hit enter"&gt;
    &lt;/div&gt;
    &lt;div class="search-post"&gt;&lt;/div&gt;
&lt;/div&gt;

</div>

</div>

Javascript:

&lt;script src="{{asset "ghost-search/dist/ghost-finder.js"}}"&gt;&lt;/script&gt;

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

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

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

##results

</div>`,

singleResultTemplate: `<div class="search-post-single">

</div>

<h6><a href="##url">##title</a></h6>

<p>##published_at | <a href="##primary_author_url">##primary_author_name</a></p>

</div>

</div>

</div>`,

contentApiKey: window.contentApiKey

})

</script>

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.

beautiful search Ghost ghost finder ghost post ghost search ghost search plugin Ghost themes open source search premium ghost blogging theme responsive ghost themes

ElectronThemes

23 Comments

Hello !
Thank you a lot for this tutorial and this plugin.
Unfortunately, impossible to make it work on my fresh ghost install locally, though I followed very precisely your tuto… I’ve added the scripts and created a page-search.hbs page where I have added the html markup… But nothing shows when I type a word in the input search.
Did I miss something ?
M

ElectronThemes says:

April 19, 2019 at 2:44 pm

Hi,
Please add markup in the script according to the blog tutorial.
Use “resultTemplate” for the search result markup and use “singleResultTemplate” for single search result element.

Reply

Thanks a lot for your reply. I’ve added “resultTemplate” and “singleResultTemplate”. But, stil, nothing appears when i try to do a search…
I have added the scripts at the bottom of my page-search.hbs template, just after {{#contentFor "scripts"}}. And of course I have generated an APIKey. This is very strange…
Just to be sure : it is possible to have both the input markup and the result markup in the same template ? (in my case, page-search.hbs) ?
Any help would be very much appreciated ! Thanks a lot in advance 🙂

ElectronThemes says:

April 19, 2019 at 3:34 pm

Hi, can you show me your code here so I can check and give you proper solution.
https://codepen.io/rearmustak/pen/LvmyQP?editors=1010

Reply
- Mathieu says:
  
  April 19, 2019 at 3:43 pm
  
  Thanks !
  I completed the pen just now.
  M
  
  Reply
  - ElectronThemes says:
    
    April 19, 2019 at 3:45 pm
    
    I can’t see changes. You can send the codepen link here
    
    Reply
    - Mathieu says:
      
      April 19, 2019 at 3:53 pm
      
      Sorry, can’t save the modifs I’ve done on your pen. Here is mine, with HTML and JS I use.
      https://codepen.io/mathieurouault/pen/BExZBJ?editors=1010
ElectronThemes says:

April 19, 2019 at 4:01 pm

You missed the content-api writing. I fixed. Please check this.
https://codepen.io/rearmustak/pen/PgejPO?editors=1010

No need to add homeUrl because it will take automatically.
Do you have plugin file in this location <script src="{{asset "ghost-finder/dist/ghost-finder.js"}}"></script>

Please check the plugin file location in your folder again.

Reply
- Mathieu says:
  
  April 19, 2019 at 4:17 pm
  
  Thank you for checking my code. I’ve deleted the homeUrl line and change the content-api writing. And I’ve also checked once again the plugin file location… still doesn’t work though. Honestly I can’t figure out the origin of the problem… 🙁
  
  Reply

Firefox debugger found a problem in the source of the Url : Request failed with status 404 URL de la ressource : http://localhost:2368/assets/ghost-finder/dist/ghost-finder.js?v=de766fbcd9
Seems that the JS file is not correctly loaded… though I’m sure that the plugin is where it is ! I don’t understand.

ElectronThemes says:

April 19, 2019 at 4:37 pm

Download the plugin file and load only ghost-finder.js file from dist folder and figure out the location again.

If you can’t solve yet, you can send the theme file with zip so I can check.
Mailto: electronthemes@gmail.com

Reply
- Mathieu says:
  
  April 19, 2019 at 5:47 pm
  
  Thanks a lot.
  I’ve reupoloaded the js file and change the location, tested it again… with no succes:(
  So, as you kindly suggest it, I’ve sent you an email with my theme. Thanks in advance for all the help you can provide ! 🙂
  
  Reply
ElectronThemes says:

April 20, 2019 at 12:22 am

Hi, I tested your code. You made some mistake to write code. I have fixed the issue.
https://codepen.io/rearmustak/pen/PgejPO?editors=0010

Please don’t use the script codes in the specific page {{#contentFor "scripts"}}{{/contentFor}}
Use the code in default.hbs file so it can read all pages because when you search, it renders all post api codes

Reply

when typing something in the search field i get a 404

GET example.com/ghost/api/v2/content/posts/?key=5698bd372c04dc918c99e3a111&limit=all&fields=title%2Curl%2Cslug%2Chtml%2Cfeature_image%2Cpublished_at%2Cprimary_author%2Cprimary_tag&include=tags%2Cauthors 404

ElectronThemes says:

May 17, 2019 at 6:26 pm

Hi,
Have you read the documentation well? Please follow the instruction, I hope you can solve the issue. If you can’t solve, please give a screenshot of your code so we can find the issue.

Reply
- ramonskie says:
  
  May 17, 2019 at 7:30 pm
  
  i can’t seem to reply with all the information i wanted to send
  so here is a pastebin: https://pastebin.com/bjgWv5j9
  
  Reply
  - ElectronThemes says:
    
    May 17, 2019 at 8:52 pm
    
    I checked everything. It seems to be right your code. Can you send the file using my email ( electronthemes@gmail.com ) so I can test to my machine?
    
    Reply

i can’t seem to reply

Good evening. Getting error “Uncaught SyntaxError: Unexpected identifier” in the ghost-finder.js at line import GhostContentAPI from ‘@tryghost/content-api’

I’m running a local install of the latest Ghost v 2.23.1
The ghost-finder.js is in my asset/js folder.

Markup in the body tag.

<div class="site">


    <div id="site-header" class="site-header">
        <div class="site-branding">

            {{#if @site.logo}}

                <a href="{{@site.url}}" class="site-logo"><img src="{{@site.logo}}" /></a>

            {{else}}

                <a href="{{@site.url}}" class="site-logo text-logo">{{@site.title}}</a>

            {{/if}}

        </div>
        {{#if @site.navigation}}

            {{navigation}}

        {{/if}}

    </div>
    <div class="site-content">

        {{> featured-area}}
        <main class="content-area">

            {{{body}}}

        </main>
        {{> sidebar}}

    </div>
    {{> footer}}

</div>

{{ghost_foot}}

This is the code in my default.hbs below the ghost_foot tag.

// Ghost search
new GhostFinder({
input: ‘.search-field’,
showResult: ‘.search-post’,
time_format: ‘DD MMM YYYY’,
resultTemplate: Matches result: ##resultCount ##results,
singleResultTemplate:


        
            ##title

            ##published_at | ##primary_author_name

,
contentApiKey: //contentid
})

Looking forward to your reply.

Hello,
I tried the search option and it works…
The only results I got were titles, not the content ??

ElectronThemes says:

July 1, 2019 at 10:16 am

Hi,
Please read the blog, I have used in Minia Theme and it is working. Can you share your code that you used?

Reply

I second C. Deleury opinion, the search results are based only on the titles. It doesn’t search the content.

ElectronThemes says:

July 4, 2019 at 4:04 pm

Yes, you can only search based on Title, not the content

Reply

Write a comment Cancel Reply

Don’t worry we will never publish your email address. Required feilds are marked *.

User Name*

Email Address*

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Tech News and Articles