G Ghost

How to use code injection on Ghost

intermediate 8 min read Updated 2026-03-18
Quick Answer

Ghost's code injection feature allows you to add custom HTML, CSS, or JavaScript to your site's header or footer. Access it through Settings > Code injection in your Ghost admin dashboard to add tracking codes, custom styles, or scripts.

Try Ghost Full Ghost Review

Prerequisites

  • Ghost admin account with owner or admin permissions
  • Basic HTML, CSS, or JavaScript knowledge
  • Access to your Ghost admin dashboard
  • Understanding of where code should be placed (header vs footer)

Step-by-Step Instructions

1

Access Ghost Admin Dashboard

Log into your Ghost admin dashboard by navigating to yourdomain.com/ghost. Enter your admin credentials to access the backend interface.
Bookmark your admin URL for quick access
2

Navigate to Code Injection Settings

Click on Settings in the left sidebar menu, then scroll down and click on Code injection in the Advanced section. This will open the code injection interface.
3

Choose Injection Location

You'll see two text areas: Site header and Site footer. Code in the header loads before page content, while footer code loads after. Choose based on your needs:
  • Header: CSS styles, meta tags, analytics tracking
  • Footer: JavaScript widgets, performance tracking scripts
Use header for CSS and critical scripts, footer for non-critical JavaScript
4

Add Your Custom Code

Paste your HTML, CSS, or JavaScript code into the appropriate text area. For CSS, wrap in <style> tags. For JavaScript, use <script> tags. For example:
<style>
.custom-class { color: #ff0000; }
</style>
Test your code on a staging site first to avoid breaking your live site
5

Save Your Changes

Click the Save button at the top right of the code injection page. Ghost will validate and save your code changes immediately.
6

Verify Code Implementation

Visit your live site and view the page source (Ctrl+U or Cmd+U) to confirm your code appears in the correct location. Check browser developer tools for any console errors.
Use incognito/private browsing to bypass cache when testing
7

Test Functionality

Test any interactive elements or tracking codes you've added. For analytics codes, verify they're firing correctly using browser extensions or the respective platform's real-time reports.
Wait 24-48 hours for analytics data to appear in most tracking platforms

Common Issues & Troubleshooting

Code injection not appearing on site

Clear your browser cache and check if you're using a CDN that needs purging. Verify the code was saved correctly in Ghost admin.

JavaScript errors breaking site functionality

Check browser console for error messages. Remove recently added code and test incrementally. Ensure all <script> tags are properly closed.

CSS styles not applying correctly

Check CSS specificity issues and ensure styles aren't being overridden. Use !important declarations carefully or increase selector specificity.

Code appears in wrong location

Verify you're adding code to the correct injection area (header vs footer). Some scripts require specific placement to function properly.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Ghost website before purchasing.
Visit Ghost View Ghost Pricing