Every Ghost Theme includes a post.hbs file that defines how your posts are rendered, but one of the best features of Ghost Themes is the ability to create custom templates, which allows us to assign different layouts to different posts. Ghost templates aren't just for posts; you can use them on your pages as well. Let's take a look at how to make a custom template in a Ghost Theme.

Ghost template files

a.) At this moment, you'll need the ghost theme, which you'd like to extend with a custom template. Handlebars, the templating language used by Ghost CMS, will be used to provide content to Ghost Themes.

b.) Open the theme folder in your editor (I use vscode). Inside, you should see few.hbs files and other folders like assets and partials. Your content is rendered by the hbs.files.

c.) The most important thing to remember when creating custom templates for Ghost is that we must prefix the template name with custom-. If we want to make a new custom template with a sidebar, we'll call it custom-with-sidebar.hbs. This file must be created in the theme's root folder.

Keep in mind the naming convention:

custom-{{template-name}}.hbs

This naming convention informs Ghost that this is a custom template that can later be assigned to your posts and pages. The template we create will be visible in the Ghost Admin Panel's Post/Page settings. In our case: With a Sidebar.

Ghost template definition

Let's add some code to the file now that it's been created. You can either start with the layout defined in post.hbs or write the entire layout from scratch. This is a general and simplified layout for a ghost theme post template:

{{!-- insert everything in this file into the {body} of the default.hbs template --}}
{{!< default}}

{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}
<main class="site-main">
  <article class="{{post_class}}">
    <h1 class="post-full-title">{{title}}</h1>

    <div class="post-content">
        {{content}}
    </div>

    {{!-- comments --}}
    <div class="post-comments">
      {{> comments}}
    </section>

  </article>
</main>
{{/post}}

  • Let us go over some of the code. As you can see, the <main> tag is wrapped around the {{#post}} tag, which tells Ghost that we are in the Post Context and can use all of the post's properties. Title and content are two examples of properties.

  • We also have a section for comments, and what happens here is that we include a partial name comment, and for this to work, there must be a file called comments.hbs in the partials folder.

  • Next, we'll add another section to this template, a sidebar with a tag cloud. To accomplish this, insert the following code between the closing </article> tag and the opening </main> tag:

<aside class="sidebar">
   <div class="tag-cloud">
      {{#get "tags"  limit="20" as |tag|}}
         {{#foreach tag}}<a href="{{url}}">{{name}}</a>{{/foreach}}
      {{/get}}
   </div>
</aside>

This will retrieve 20 tags and generate an anchor element for each. You can learn more about ghost filter expressions if you want. For the time being, this is sufficient.

Of course, you'll need to style the content to look like a sidebar, which we won't cover in this tutorial. The following step is to apply our new custom 

Using custom ghost templates

Now that the template has been created, you must upload it to your Ghost site using the Ghost Admin.

After you've uploaded the theme, the final step is to choose a custom template. To do this, open any post and then go to the post settings by clicking the cog in the top right corner. At the bottom of the settings panel, there should be a dropdown titled Template, and next to the Default, you should see the previously created custom template.

Select the template and update the post; when you access the post, you should see the new layout.

ghost-theme

To Sum Up

I hope that this article will help you to create a custom template for your ghost themes. If you follow this article properly you will able to customize your site to match your unique style in no time! Which increases your site value and audience. Besides if you want to buy brand new ghost themes for your site then you had better visit our site here- themeix.com