# Ghost Tips & Tricks #10 / Anatomy of a Ghost Theme — Part 1

**URL:** <https://forum.ghost.org/t/ghost-tips-tricks-10-anatomy-of-a-ghost-theme-part-1/21463>\
**Category:** Marketplace\
**Created:** [April 2, 2021, 9:40am UTC](https://forum.ghost.org/t/ghost-tips-tricks-10-anatomy-of-a-ghost-theme-part-1/21463 "2021-04-02T09:40:23Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ahmadajmi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ahmadajmi/32/23173_2.png) [@ahmadajmi](https://forum.ghost.org/u/ahmadajmi)\
**Post date:** [April 2, 2021, 9:40am UTC](https://forum.ghost.org/t/ghost-tips-tricks-10-anatomy-of-a-ghost-theme-part-1/21463/1 "2021-04-02T09:40:23Z")

</div>

Hello everyone,

_This is issue number #10 of Ghost Tips & Tricks. Brought to you by [**Aspire Themes**](https://aspirethemes.com/). Premium and high-quality Ghost themes._

* * *

I want to talk about what makes a Ghost theme, the theme structure, which files are essential, and what each file does.

### Handlebars

First, Ghost uses [Handlebars](https://handlebarsjs.com/) as a template language; that’s why the theme file extension is `.hbs`. For example, `index.hbs`, `post.hbs` or `author.hbs`. There is no need to install Handlebars in a Ghost theme; it is part of Ghost.

Let’s take a quick example of how Handlebars integrated with Ghost to output data from a Ghost website.

Suppose we want to output your post content, we can use the [`content`](https://ghost.org/docs/themes/helpers/content/) helper enclosed by double curly braces `{{ }}`, which will give us a Handlebars expression. So, adding the complete `{{ content }}` expression to a theme will generate the post content.

In addition to Handlebars, Ghost uses the [express-hbs](https://github.com/TryGhost/express-hbs) library to extend Handlebars features. For example, to add partials and layout support.

### File Hierarchy

An essential concept to how a Ghost theme works is how Ghost chooses which file to use to render the content. For example, for the website Homepage, Ghost first checks if a theme file called `home.hbs` exists; use it; if not, Ghost will look for another file, in this case, the `index.hbs` file.

Another example for the Author page, Ghost will look for the `author.hbs` first and use it if it exists. If not, Ghost will use `index.hbs`.

From the two examples above, we can see that the `index.hbs` file is necessary for any Ghost theme.

### Essential Files

The `package.hbs`, `index.hbs`, and `post.hbs` files are three essential files in any Ghost themes.

Let’s consider that we have a theme called **anatomy** ; the file structure would be.

```shell

anatomy
  |__index.hbs
  |__post.hbs
  |__package.json

```

Let’s see each file in more detail.

➊ **`package.json`**

The `package.json` is a JSON file with the `.json` extension. It contains name/value pairs of data. What kind of data can we add?

- Theme name and version
- Theme author data
- Ghost and [Content API](https://ghost.org/docs/faq/api-versioning/) versions
- Theme configuration like [how many posts per page](https://ghost.org/docs/themes/helpers/config/#providing-config) to display
- Dynamic [image sizes](https://ghost.org/docs/themes/assets/#responsive-images-configuration) for uploaded images
- Theme [NPM](https://www.npmjs.com/) dependencies

Some of this data is visible on the admin side. For example, when you go to your Ghost admin **Design \>\> INSTALLED THEMES** section, you can see a list of the available themes on your blog. For each theme, you can see the theme `name` and `version`.

 ![Ghost CMS Admin Installed Themes](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/5/5a88639c25f349c12e87adcaf1c2dc440b7e2f93.png)

The `name` and `version` are available as name/value pairs in the `package.json` file.

The `name` field is, of course, the name of the theme. The `version` is the theme version.

Let’s apply this for the **anatomy** theme we have and add the following data to the `package.json` file.

```auto

{
  "name": "anatomy",
  "version": "1.0.0"
}

```

Now, Ghost will use this information to list the theme under the **INSTALLED THEMES** section with `anatomy` as the theme name and `1.0.0` as the theme version.

![Ghost Admin Installed Anatomy Theme]()

By adding the `package.json` file, we now created our first theme, and it is visible in the available themes list. But if we tried to activate this theme, Ghost will throw a fatal error complaining that the other two files are missing, the `index.hbs`, and `post.hbs`.

 ![Ghost Theme Activation failed](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/f/f2a4228a03376840b9cee028cd48e662030f8bc4.png)

➋ **`index.hbs`**

The `index.hbs` is the second essential file used to show a list of posts.

We talked about hierarchy earlier in this post and mentioned that Ghost would use the `index.hbs` for the Author page to list the author’s posts if the `author.hbs` file does not exist. In addition to the Author page, Ghost will use it for the Tag page if the `tag.hbs` file does not exist.

➌ **`post.hbs`**

The third essential theme file is `post.hbs`, which outputs the post details.

After adding both `index.hbs` and `post.hbs`, we can now activate the theme. If you went to the website homepage, you would see an empty page. However, while activating the theme, we will see some missing CSS classes and `package.json` missing properties. But as a starting point and at this stage, we were able to activate the theme with the must-have files.

 ![Ghost Theme Activation failed](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/e/eaa88261c6f72787ab141d25d8f5f1507da6007e.png)

That’s all that I wanted to share today, and I hope you find this post helpful.

Checkout previous parts of the Ghost Tips & Tricks series:

- [Ghost Tips & Tricks #1 / Show Publish Date in the day time with AM and PM format](https://forum.ghost.org/t/ghost-tips-tricks-1-show-publish-date-in-the-day-time-with-am-and-pm-format/14289)
- [Ghost Tips & Tricks #2 / Ghost Admin Right to Left (RTL) Support](https://forum.ghost.org/t/ghost-tips-tricks-2-ghost-admin-right-to-left-rtl-support/14357)
- [Ghost Tips & Tricks #3 / Deploy Your Ghost Theme Using Github Actions](https://forum.ghost.org/t/ghost-tips-tricks-3-deploy-your-ghost-theme-using-github-actions/14966)
- [Ghost Tips & Tricks #4 / Create a Tags List Page](https://forum.ghost.org/t/ghost-tips-tricks-4-create-a-tags-list-page/15653)
- [Ghost Tips & Tricks #5 / Create an Authors List Page](https://forum.ghost.org/t/ghost-tips-tricks-5-create-an-authors-list-page/16437)
- [Ghost Tips & Tricks #6 / Change Casper Theme Fonts Using Google Fonts](https://forum.ghost.org/t/ghost-tips-tricks-6-change-casper-theme-fonts-using-google-fonts/16691)
- [Ghost Tips & Tricks #7 / Tools I Use to Develop, Edit and Deploy Ghost Themes](https://forum.ghost.org/t/ghost-tips-tricks-7-tools-i-use-to-develop-edit-and-deploy-ghost-themes/17031)
- [Ghost Tips & Tricks #8 / Membership Troubleshooting Tips](https://forum.ghost.org/t/ghost-tips-tricks-8-membership-troubleshooting-tips/17294)
- [Ghost Tips & Tricks #9 / Ghost Tags - Practical Examples to Use in Your Theme](https://forum.ghost.org/t/ghost-tips-tricks-9-ghost-tags-practical-examples-to-use-in-your-theme/18817)

Also, check out my [Ghost Websites Inspiration](https://forum.ghost.org/t/ghost-websites-inspiration-1/14185) and [Ghost Newsletter](https://forum.ghost.org/t/ghost-newsletter-1/17885) series.

Stay safe!

Ahmad