By JUSTINE GICHANA — 02 Apr 2023

How to Customize Ghost CMS Themes Like a Pro

Ghost CMS comes with modern, lightweight themes, but customizing them allows you to create a unique brand identity and improve user experience. Whether you want to tweak layouts, colors, or templates, this guide will walk you through pro-level customization without breaking your site.

1. Understanding Ghost Themes

Ghost themes are Handlebars-based, meaning you can:

Create dynamic templates using {{ }} placeholders
Use partials to reuse code across multiple pages
Control layouts via JSON metadata

A typical theme structure:

my-theme/
├── assets/        # CSS, JS, images
├── partials/      # reusable components (header, footer)
├── templates/     # page templates (index.hbs, post.hbs)
└── package.json   # theme metadata

2. Setting Up a Development Environment

Before making changes, set up a local Ghost environment:

Install Ghost locally with Ghost-CLI
Link your theme folder to Ghost:

ghost start --development

Make changes in your editor and see live updates

This avoids touching the live site and allows safe experimentation.

3. Modifying Layouts and Templates

You can customize layouts by editing .hbs files:

default.hbs → Base template for all pages
index.hbs → Homepage layout
post.hbs → Individual blog posts

Example: Add a custom author box below posts:

<div class="author-info">
  <h4>{{author.name}}</h4>
  <p>{{author.bio}}</p>
</div>

4. Customizing Styles

Themes use CSS or SCSS for styling. You can:

Change colors, fonts, and spacing in assets/css/screen.css
Use !important sparingly to override theme defaults
Minimize custom CSS to maintain performance

Tip: Use browser DevTools to preview changes before applying them permanently.

5. Adding Custom Functionality

Ghost allows custom scripts and helpers:

Add Google Analytics or Stripe scripts in default.hbs before </body>
Use Handlebars helpers like {{#foreach}} to display dynamic content
Create partials for reusable sections like newsletters or featured posts

6. Testing and Deployment

After customizing:

Test responsiveness on mobile, tablet, and desktop
Check for broken links or missing assets
Upload the modified theme via Ghost Admin (Design → Theme → Upload)
Activate and verify on live site

✅ Tip: Keep a backup of the original theme in case you need to roll back.

7. Best Practices

Avoid modifying core Ghost files—customize only themes
Use partials for repeated elements to reduce duplication
Keep CSS and JS minimal to preserve performance
Document your changes for future maintenance