Add search to your Ghost blog with Tapir

Posted in ghost, tapir, search, html, css

If you have decided to use Ghost as your blog engine, you may soon realize that it's missing one vital thing and that Searching. Since I tend to use my blog as a knoweldge base and a repository of things that took effort to implement, I want to be able to search my content at any time with ease.

Although I believe that the Ghost developers are actively working on integrating Search in the blog engine, there are only a couple of solutions at the moment to help you implement search yourself. One is Google Search and the other is Tapirus.

The Tapirus site contains some setup instructions but, in the end, some parts of the implementation where ommitted :(

So, to save you from going through the same pain, I have included all the necessary steps below so you can easily implement the search on your site.

Step 1

First you will need to head to Tapir's site (here) to obtain your token. This is easy and doesn't require registration, just an email address (yours preferrably) and your sites rss address. Mine is GHOST_URL/rss so yours should be fairly similar.

Step 2

Download the Tapirus code. This is available as a zip file here. Extract the javascript files and copy them to your site via ftp or whatever means you use. (I work on WebMatrix since my site is running on Azure). The following files should be placed withing your theme's assets folder. The path should look similar to this root\content\themes\yourtheme\assets\js

  • moment.js
  • handlebars.js
  • jquery.tapirus.js

Step 3

Now we need to reference the jQuery Tapirus script together with the dependencies. Open default.hbs file, located at the root of your theme, and add the following code after {{ghost_foot}}:

<script src="/assets/js/moment.js"></script>  
<script src="/assets/js/handlebars.js"></script>  
<script src="/assets/js/jquery.tapirus.js"></script>

Step 4

Next, open your theme's main JavaScript file, named index.js or main.js and add the initialization code within the (document).ready function as per the example below:

NOTE Do not place it at the end of the file as instructed on Tapirus's website as this will cause javascript errors!!!

/**
 * Main JS file for Casper behaviours
 */

/*globals jQuery, document */
(function ($) {
    "use strict";

    $(document).ready(function(){

        $(".post-content").fitVids();  
        $('.search-results').Tapirus('YourPublicToken');      
    });

}(jQuery));

Remember to replace 'YourPublicToken' with the public token you got during step 1

Step 5

Edit the HTML inside the default.hbs or index.hbs page in order to add the search textbox and decide where and how you want to display the search results. In my case, I decided to put the search box right below the header and the results are displayed right below it as per the example:

<form class="site-search">
   	<input type="search" class="search-box">
</form>
<div class="search-results"></div>
<br/>

Step 6 - Optional

Finally, you may want to make your search results look slightly nicer and add some formatting and css magic. Open the screen.css file from your theme's Assets\css folder and paste the following css code:

.search-box{
    width: 250px;
    float: right;
    font-size: 1.8rem;
    margin-right: 10px;
}
.search-results{
    text-align: center;
}

.search-result{
    margin-bottom: 20px;
}

.search-result h2 {
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 600;
}

.search-results h3 {
    padding-top: 50px;
    color: #99CCFF;
    font-size: 2rem;
    /*text-transform: uppercase;*/
    font-weight: 500;
}

.search-result time {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.8rem;
}

Feel free to edit it as you feel best to match your overall site.

Happy coding...

  • Share this post on