Wave - Ghost Theme Documentation

Table of Contents

Installation

When you purchase a theme from IVEEL, you will have an access to the theme directly on your account page. Once you click the download link, an installable theme file will be downloaded to your computer.

  1. Navigate to Settings > Design on your Ghost Admin (yourblog.com/ghost).
  2. Click Upload a theme and select the downloaded installable theme file.
  3. Click Activate Now to start using the theme.

Adding Episodes

  1. Navigate to Posts > New post on your Ghost Admin.
  2. Enter episode title and description in the editor.
  3. Enter episode audio URL in Post settings > Facebook card > Facebook description field. Ghost doesn't have a custom field feature, so we are using Open Graph description field. Please note that this must be a direct URL to your episode audio file.
  4. You also select an image and tags for your podcast episodes like a regular post.

Creating a Separate Blog Page

  1. Upload new routes in Beta features > Routes. The routes file routes.yaml is in the theme folder.
  2. Add Blog tag to your posts.
  3. Now you can access your blog page at YOUR_SITE.com/blog.

Copyright Text

You can display some text on your blog's footer section. By default, it displays Powered by Ghost. To change the text, open partials/customize/copyright.hbs file.

<div class="copyright">
  © All rights reserved.
</div>

You can also add some HTML markup.

<div class="copyright">
  © All rights reserved. <a href="URL_HERE">More info</a>
</div>

Note: Remember to restart your Ghost when you made a change in hbs file.

Open partials/customize/subscribe.hbs to update the links. Enter an URL inside href attribute. All links must be full URL. Please don't change anything other than href attribute value unless you know what you're doing. For example, an Apple podcast link should look like below.

<a href="https://podcasts.apple.com/us/podcast/YOUR_PODCAST_NAME/id1234567890" ...>

Note: Remember to restart your Ghost when you made a change in hbs file.

Hosting Fonts Locally

  1. Click here to download the font files.
  2. Create a folder named fonts in assets directory.
  3. Unzip the downloaded file and copy the files to assets/fonts folder.
  4. Open default.hbs file and comment out the line (wrap inside {{!-- --}}) which embeds Google Fonts. You can search for "https://fonts.googleapis.com" to be more specific.
    {{!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=..."> --}}
  5. Add the necessary CSS in Settings > Code injection > Site Header field.
    @font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ubuntu-v14-latin-regular.woff2') format('woff2'),
       url('../fonts/ubuntu-v14-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/ubuntu-v14-latin-italic.woff2') format('woff2'),
       url('../fonts/ubuntu-v14-latin-italic.woff') format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/ubuntu-v14-latin-500.woff2') format('woff2'),
       url('../fonts/ubuntu-v14-latin-500.woff') format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ubuntu-v14-latin-700.woff2') format('woff2'),
       url('../fonts/ubuntu-v14-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/ubuntu-v14-latin-700italic.woff2') format('woff2'),
       url('../fonts/ubuntu-v14-latin-700italic.woff') format('woff');
}

Hosting jQuery Locally

  1. Click here to download the latest version of jQuery.
  2. Save the file as jquery.min.js in assets/js folder.
  3. Open default.hbs file and search for "https://code.jquery.com" to find the <script> tag which embeds remote jQuery.
  4. Replace the entire <script>...</script> tag with:
    <script src="{{asset "js/jquery.min.js"}}"></script>