Okiku Documentation
Theme installation Theme config options
Third-party scripts
Typekit and Google Fonts Google Analytics Disqus Comments MailChimp Contact page
Support

v1.0.0
Last update: 11 Feb 2019

@HauntedThemes HauntedThemes

Theme installation There are 2 ways to install a Ghost theme

Manually upload theme folder inside Ghost

  1. Locate the theme directory within the download files, which can be found at:

    okiku-master/okiku.

  2. Login to FTP/SFTP of your blog of your provided hosting service.
  3. Navigate to the /content/themes/ directory within your Ghost installation.
  4. Upload the okiku directory found in step one into the remote /content/themes/ directory.
  5. Restart Ghost.
  6. Login into your Ghost admin panel. This can be found at yourdomain.com/ghost.
  7. Navigate to the Settings > Design.
  8. In Themes section, click Activate where is says okiku.
Or

Upload theme archive from Ghost Dashboard

  1. Login into your Ghost admin panel. This can be found at yourdomain.com/ghost.
  2. Navigate to the Settings > Design.
  3. In Themes section, click Upload and select within the download files:

    okiku.zip.

  4. After the theme is uploaded click Activate now.

After activation

  1. Navigate to the Integrations > Custom integrations.
  2. Set name: Haunted Themes
  3. You will need to do 2 more simple steps to authenticate to Ghost Content API.
    1. Copy Content API Key from the integration that you set and put it in: /assets/js/main.js at line 18.
    2. Get the host of your current Ghost instalation. This should be your admin domain. Your admin domain can be different to your main domain. Using the correct domain and protocol are critical to getting consistent behaviour, particularly when dealing with CORS in the browser. All Ghost(Pro) blogs have a *.ghost.io domain as their admin domain and require https. Make sure you remove the last / from the url.

Content API Authentication is mandatory in order to use the theme properly!

Theme config options

These options can be found within the file /assets/js/main.js inside the theme. These are all located on the first section of the file. Replace the current values with your required settings.

Default values 

var config = {
    'disqus-shortname': 'hauntedthemes-demo'
    'content-api-host': ''
    'content-api-key': ''
};

'disqus-shortname'

'content-api-host'

Your admin domain can be different to your main domain. Using the correct domain and protocol are critical to getting consistent behaviour, particularly when dealing with CORS in the browser. All Ghost(Pro) blogs have a *.ghost.io domain as their admin domain and require https.

'content-api-key'

The Content API only ever returns public data. Content API keys can be obtained from the Integrations screen in Ghost Admin. The key is provided to the API as a query parameter.

Enter your Disqus account shortname here to enable comments for blog posts.

Third-pary scripts

Typekit and Google Fonts

Okiku by default uses Google fonts.

  1. Open Sans.
    1. Regular
    2. Bold

Okiku also has been customized to support these fonts from Typekit:

  1. Motiva Sans.
    1. Regular
    2. Regular Italic
    3. Bold
    4. Bold Italic
  2. Proxima Nova.
    1. Regular
    2. Regular Italic
    3. Bold
    4. Bold Italic

Google Analytics

The first step to setting up tracking is to create an Analytics property. Creating an Analytics property generates a tracking ID and a JavaScript tracking code snippet.
The Javascript code will look something like this:

<!-- Google Analytics -->
<script>  
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Replace UA-XXXXX-Y with your tracking ID.

Then you'll have to put the code inside Ghost:

  1. Navigate to the Settings > Code injection.
  2. Paste your embed code inside Blog Header textarea and click Save.

Disqus Comments

You will need to signup for a Disqus account. Once you have created an account and setup your shortname, enter it into the theme configuration which can be found within the file /assets/js/main.js inside the theme.

You will need to write your shortname right to the 'disqus-shortname' variable.

MailChimp

If you use MailChimp to manage an email subscription list, you can past your embed code into the partials/theme_footer.hbs file. To get the code you should follow the next steps:

  1. Login to your MailChimp dashboard, and navigate to Lists.
  2. Select the mailing list you want to use.
  3. Select Signup Forms -> Embedded Forms.
  4. Choose the Naked style.
  5. Uncheck Include form title, Show interest group fields and Show required field indicators.
  6. Copy the provided embed code. Edit partials/theme_footer.hbs file and replace: 
    {{subscribe_form
    form_class="gh-signin"
    input_class="gh-input"
    button_class="btn"
    placeholder="Your email address"
}}

    with your code.

Contact Page

Okiku comes with a contact page that has a contact form and a Google maps iframe. In order to use this custom page you have to create a custom Contact page in your Ghost admin. Make sure Turn this post into a page is checked. Also, the slug of this page needs to be 'contact'.

  • Formspree Contact Form

    To properly set the contact form, go to page-contact.hbs and on line 27 change contact@hauntedthemes.com with your email address. Test your forms to see that it runs correctly.

  • Google Maps

    Navigate to Google Maps. Set a location.
    Click Menu -> Share or embed map -> Embed a map -> Copy HTML.
    Replace the existing code with your copied one.

Support

If you have any questions, bug reports or features requests, please contact us at support@hauntedthemes.com or feel free to chat with us on hauntedthemes.com.