Ghostwriter or ghostwriter.js is a neat JavaScript library that provides a simple API for interacting with input[type="text"] elements. Another great thing about Ghostwriter is that it’s only 5 KB in size when minified and when compressed the Ghostwriter library is about 2 KB in size. It’s super lightweight. All you have to do is add a class to any input[type="text"] element, along with a set of instructions and Ghostwriter will take care of the rest.Why would you want to use Ghostwriter? Ghostwriter is a great tool for recommending content, which is useful for a knowledge-base, learning system, blog and other article intense website.

So, let me show you how-to add it to your website or WordPress installation.

Add the JavaScript to Your Website

Firstly, go to the ghostwriter.js website and download the script. The download will feature two JavaScript files: ghostwriter.js and ghostwriter.min.js; where ghostwriter.js is not minified and where ghostwriter.min.js is minified.

We’ll use the minified version, as it’ll save space and bandwidth and an un-minified version will not function any differently.

Upload the minified JavaScript file to where you want it, and add the following code to your theme’s footer.php file (before the tag):

<script src="http://yourdomain.com/path-to-file/ghostwriter.min.js">

Right underneath this, add the following code:

     var haunt = ghostwriter.haunt({
        input: $('.haunted')
      , interval: 100
      , manuscript: [
          'Search suggestions using ghostwriter.js'
        , ghostwriter.trigger('rotate')
        , ghostwriter.noop.repeat(10)
        , ghostwriter.selectAll
        , ghostwriter.noop.repeat(10)
        , ghostwriter.backspace
        , 'How-to add ABC to your website'
        , ghostwriter.trigger('rotate')
        , ghostwriter.noop.repeat(10)
        , ghostwriter.selectAll
        , ghostwriter.noop.repeat(10)
        , ghostwriter.backspace
        , 'How-to save 50% on car insurance'
        ]
      });

      $(document).ready(function() { haunt.start(); });

      $('.haunted')
      .on('rotate', function() { 
        $('.ghost').addClass('rotate'); 
      })
      .on('ghostwriter:start', function() { 
        $('.ghost').removeClass('rotate'); 
      })

      $('.btn-restart-demo').on('click', function(e) {
        haunt.restart();
        return false;
      });

In the above code example, you can modify the speed by changing line three (3). The larger the number, the slower the speed. The words or phrases that will be used goes in the manuscript: [ area – the code example, it’s lines five (5) to 17.

Make sure you change the domain name and the path to the file. Once you’ve done this, save the footer file and close it.

Simple HTML Change

To add ghostwriter.js to your website, add haunted to the class field of the text input. It’ll look something like this:

<input type="text" value="" name="" id="" placeholder="" class="haunted"  />

WordPress: Simple Modification to the Search Form

Now we’ll need to slightly modify the searchform.php file for your theme. Open searchform.php and do the following:

Look for the text input. This is where the visitor will enter the keyword(s) they are looking for. It looks something like this:

<input type="text" value="" name="s" id="s" class="" />

Add Ghostwriter as a class. So, if we were going to do this to the above, the above would look like this:

<input type="text" value="" name="s" id="s" class="haunted" />

You’re done! Using Ghostwriter is a simple and neat way to suggest and recommend articles that the visitor maybe interested in. Perhaps, use it as a “trending” feature for your search function.