The Basics Of A Ghost Theme

When you use Cyberduck (or the Terminal/Console) to look inside your Theme folder, you'll notice these files and folder:

  • Assets - where css, fonts, and scripts live
  • default.hbs - which contains the header and footer
  • index.hbs - your homepage template
  • post.hbs - your individual page template

Inspecting the default Casper theme post page, you'll find this:

<article class="{{post_class}}">
    {{! Each post has the blog logo at the top, with a link back to the home page }}
    <header class="post-header">
        <a id="blog-logo" href="{{@blog.url}}">
            {{#if @blog.logo}}
                <img src="{{@blog.logo}}" alt="Blog Logo" />
            {{else}}
                {{@blog.title}}
            {{/if}}
        </a>
    </header>
    {{! Everything inside the #post tags pulls data from the post }}
    {{#post}}
    {{! Everything below outputs content of the the post which has been published }}
    <span class="post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time> {{#if tags}}on {{tags separator=" | "}}{{/if}}</span>
    <h1 class="post-title">{{{title}}}</h1>
    <section class="post-content">
        {{content}}
    </section>
    <footer class="post-footer">
        {{#if author}}
            <section class="author">
                <h4>{{author.name}}</h4>
                <p>{{author.bio}}</p>
            </section>
        {{/if}}
    </footer>
    {{/post}}<br />

If you know even a little html, or have any experience editing Wordpress files, you'll notice some similarities in terms of structure.

We'll be coming back to the Caspar theme and these specific files in the next section.