Ghost Theme Editing

Let’s say you’re using a free or paid theme you found over on the Ghost Marketplace, chances are it won’t be 100% the way you’d like it. This guide serves as a resource for those who are new to Ghost themes (and maybe even HTML/CSS), and need a reference point for where to begin when it comes to make changes to their theme files.

Getting Started

To edit a Ghost theme, you will need an HTML editor. There are several HTML editors available for download, however for the purpose of this guide we will be using Brackets, a free, easy to use HTML editor that is available for both Macs and PCs alike. You can grab a copy of Brackets here.

You will also need a theme to customise. If you already have one, great! If not, checkout the Ghost Marketplace to find a theme that you’d like to use.

Opening your theme in Brackets

To begin editing, you will need to make sure you’ve extracted the entire theme directory to your desktop. Next, you will need open up Brackets, and follow the steps below to open your theme folder:

  1. Click on File from the top menu
  2. Select Open Folder
  3. Choose the theme folder you extracted to your desktop.

This this will load the entire theme directory into Brackets, listing out all of the files in a tree-like structure on the left of the editor.

Note:Your theme file structure may be different from the screenshot posted below. It is best to reference your theme’s readme file to uncover where various aspects of your theme live.

Ghost File Structure

Each file contained within your theme represents a different piece of your blog, and does different things. For example, if you wanted to add specific code snippet to your blog’s homepage, you would need to edit your index.hbs file, which controls the homepage output. You can read a full breakdown of the Ghost file structure, here.

Editing the layout and style of your theme

To edit your theme’s layout and style, you will need to become familiar with HTML, CSS and the templating system that Ghost uses called Handlebars. If you are new to using HTML, CSS or Handlebars, we’ve provided some helpful resources to get you started. If you get stuck along the way while editing your theme’s code, you can always reach out the Ghost community over on Slack.

HTML & CSS Resources
– w3schools HTML / CSS
Learn to Code HTML & CSS
CodeAcademy: HTML & CSS for Beginners

Handlebars Resources
Getting Started with Handlebars.js
Handlebars

Changing themes

Once you’ve made changes to your theme and saved your files, you will need to upload the theme to your blog.

To upload your theme, you’ll need to go to Settings > Design, within the admin area. If you have questions as to how to do this, checkout the How to upload a theme to your Ghost blog guide or contact us at [email protected] for additional Ghost(Pro) support.

Guides to get you started

For those interested in making quick changes to their blog, without having to dabble too much into the code of their theme, we’ve compiled a helpful list of customisation guides for you to follow below: