Customization

Ghost Code Injection: What You Can Do

Add analytics, custom fonts, CSS, and scripts to Ghost without editing theme files. Here is what code injection supports and how to use it.

#ghost #code-injection #guide

Customize Without Editing Your Theme

Ghost’s code injection feature lets you add custom code to every page on your site — no theme file editing required. This means your customizations survive theme updates, and you can add analytics, fonts, styles, and scripts through Ghost Admin without touching a line of Handlebars template code.

Code injection is available on all Ghost plans, including Starter.

Where Code Gets Injected

Ghost provides two global injection points and two per-post injection points:

Site-Wide Injection

Access via Settings → Code injection:

  • Site Header: Code injected into the <head> tag on every page. Use for analytics scripts, custom fonts, meta tags, and CSS.
  • Site Footer: Code injected before the closing </body> tag on every page. Use for scripts that should load after page content.

Per-Post Injection

Access in the post settings sidebar when editing a post:

  • Post Header: Code injected into <head> for that specific post only
  • Post Footer: Code injected before </body> for that specific post only

Per-post injection is useful for post-specific scripts, embeds, or styles that should not affect other pages.

Common Use Cases

Google Analytics 4

The most common code injection use case. Paste your GA4 snippet in the Site Header:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Replace G-XXXXXXXXXX with your Measurement ID from Google Analytics.

Privacy-Focused Analytics

If you prefer privacy-respecting alternatives to Google Analytics:

Plausible Analytics:

<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

Fathom Analytics:

<script src="https://cdn.usefathom.com/script.js" data-site="XXXXXXXX" defer></script>

These are lightweight, cookie-free analytics tools that do not require GDPR consent banners.

Custom Fonts

Load custom fonts from Google Fonts or other providers:

Site Header:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">


<style>
  body {
    font-family: 'Inter', sans-serif;
  }
</style>

Note: Many premium themes let you select fonts through Ghost Admin settings without code injection. Check your theme’s documentation first.

Custom CSS

Add site-wide style overrides in the Site Header:

<style>
  /* Change accent color */
  :root {
    --ghost-accent-color: #4f46e5;
  }


  /* Custom heading styles */
  .post-content h2 {
    border-bottom: 2px solid var(--ghost-accent-color);
    padding-bottom: 0.5rem;
  }


  /* Hide specific elements */
  .post-footer .author-card {
    display: none;
  }
</style>

Code injection CSS overrides theme styles. Use browser DevTools to find the right selectors for the elements you want to modify.

Comment Systems

Ghost does not include built-in comments on all themes. Add a third-party comment system via code injection:

Cove (Ghost-native comments): Ghost 5.0+ includes native comments for members. If your theme supports it, comments are enabled through Ghost Admin settings — no code injection needed.

For third-party options, add the script to Site Footer and the container element where you want comments to appear via theme customization.

Social Media Pixels

Add tracking pixels for advertising platforms:

Meta (Facebook) Pixel:

<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

Custom Redirects Notification

Add a banner or notification bar across your site:

<style>
  .site-banner {
    background: #4f46e5;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 14px;
  }
  .site-banner a {
    color: white;
    text-decoration: underline;
  }
</style>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    const banner = document.createElement('div');
    banner.className = 'site-banner';
    banner.innerHTML = 'New: Our latest theme is now available. <a href="/themes">Check it out →</a>';
    document.body.prepend(banner);
  });
</script>

Best Practices

Performance

  • Place analytics and tracking scripts in Site Footer when possible (they do not need to block page rendering)
  • Use async or defer attributes on script tags
  • Minimize the number of external scripts — each one adds a network request
  • Avoid large CSS blocks; if your customizations exceed 50 lines, consider creating a custom theme instead

Organization

  • Add comments to your injected code explaining what each block does
  • Group related styles together
  • Keep a backup of your code injection content (it is not version-controlled by Git)

Theme Updates

Code injection survives theme updates. This is its primary advantage over editing theme files directly. When your theme developer releases an update, upload the new theme version and your code injection customizations remain intact.

Limitations

  • Code injection cannot modify Ghost’s internal functionality (member management, email sending, API behavior)
  • Site Header injection runs on every page — you cannot conditionally inject based on page type (use per-post injection or JavaScript page detection for conditional logic)
  • Code injection is not version-controlled — if you make a mistake, there is no undo history
  • Very large code injection blocks can slow page load — keep it focused

When to Use Code Injection vs Theme Editing

Use Code InjectionEdit Theme Files
Analytics and trackingStructural layout changes
Custom fontsNew page templates
Minor CSS overridesCustom Handlebars helpers
Third-party widgetsModified post card designs
Temporary bannersNavigation restructuring
Marketing pixelsNew content sections

Code injection is for additions and overrides. Theme editing is for structural changes. If you find yourself writing more than 100 lines in code injection, a custom theme modification is probably the better approach.

Theme Support for Customization

Premium Ghost themes often include extensive Ghost Admin settings that eliminate the need for code injection. Color pickers, font selectors, layout toggles, and feature switches let you customize without code.

Our themes include customization options in Ghost Admin for common needs — dark mode toggle, color schemes, post layout selection, and navigation configuration. Code injection is only needed for advanced use cases like analytics and third-party integrations.

Browse Ghost themes →