title: Theme Development: Adding custom handle bar helpers
body: <p>For the <a href="https://github.com/mronemous/ghost-theme-techno" rel="nofollow">techno theme</a> I wanted to make custom hb helpers and configuration available to users.  To do this I applied an override to the [ghost root]/index.js.  </p>
  
  <p>The code below searches for index.js in the current theme folder and runs it.</p>
  
  <pre><code>var ghost = require('./core'),
      errors = require('./core/server/errorHandling');
  
  ghost()
  .then(function (param) {
  
      var settings = require('./core/server/api').settings;
  
      settings
          .read({key: 'activeTheme', context: {internal: true}})
          .then(function (result) {
  
              try {
                  require('./content/themes/' + result.value + '/index')();
              }
              catch (e) {
                  //No custom index found, or it wasn't a proper module.
              }
  
          });
  })
  .otherwise(function (err) {
      errors.logErrorAndExit(err, err.context, err.help);
  });
  </code></pre>
  
  <p>The theme level index.js injects custom blog variables (from a config file) and hb helpers.</p>
  
  <pre><code>var hbs = require('express-hbs'),
      _ = require('lodash'),
      downsize = require('downsize'),
      blogVariable = require('../../../core/server/config/theme');
  
  module.exports = function() {
  
      //This block allows configuration to be available in the hb templates.
      var blogConfig = blogVariable();
      var config = require('./config') || {};
      blogConfig.theme = config;
      //console.log(JSON.stringify(blogConfig));
  
      ////Custom hb helpers////
  
      hbs.registerHelper('excerpt', function (options) {
  
          ...
  
          return new hbs.handlebars.SafeString(excerpt);
      });
  
      ...
  
  };
  </code></pre>
  
  <p>An example of using the custom blog variables is below.</p>
  
  <pre><code>&lt;ul class="list-inline"&gt;
      &lt;li&gt;&lt;a href="{{@blog.theme.author.github}}" class="btn-social btn-outline" data-toggle="tooltip" data-placement="top" title="Github"&gt;&lt;i class="fa fa-fw fa-github"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/li&gt;
  ...
  </code></pre>
  
  <p>Is there a better way to do this in Ghost 0.4.2?  I do not like having users override the ghost core index.js file.  </p>