Intermediate
How to use code injection on Ghost
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.
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)
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.Tip
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
Tip
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>Tip
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.Tip
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.
Tip
Wait 24-48 hours for analytics data to appear in most tracking platforms
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.
Ready to get started with Ghost?
Put this tutorial into practice. Visit Ghost and follow the steps above.
Visit Ghost →