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.
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:
- Click on File from the top menu
- Select Open Folder
- 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.
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 an embedded newsletter sign-up 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, and what each file controls, over on ourtheme overview article.
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.
Once you’ve made changes to your theme and saved your files, you will need to upload the theme to your blog. Below we’ve provided links to our guides on how to change your theme, whether you’re using running a self-hosted instance of Ghost, or using Ghost(Pro) hosting.
To upload your theme, you’ll need to access your blog’s settings on Ghost.org. If you need help, checkout How to upload a theme to your Ghost(Pro) blog or contact us at [email protected] for additional Ghost(Pro) support.
Running a self-hosted version of Ghost?
To upload a theme on your self-hosted version of Ghost, you’ll need to follow the steps outlined in our article on How to switch your theme.
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: