Prime Direction

Code Injection

Add custom CSS, JavaScript, and other code to your site without modifying theme files. Changes made through Code Injection are preserved when you update the theme.

Accessing Code Injection#

  1. Go to Settings → Code injection
  2. You'll see two sections:
    • Site Header — Code added to <head> on every page
    • Site Footer — Code added before </body> on every page

Adding Custom CSS#

To add custom styles, use the Site Header section:

<style>
  /* Your custom CSS here */
  .gh-content {
    font-size: 18px;
  }
</style>

Common CSS Customizations#

Change container width:

<style>
  :root {
    --container--width: 1000px;
    --container-small--width: 700px;
    --container-wide--width: 1500px;
    --container-full--width: calc(100% - 2rem);
  }
</style>

Customize fonts (to use Google Fonts or other web fonts):

<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=Manrope:wght@200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<style>
  :root {
    --font-body: 'Roboto', sans-serif;
    --font-heading: 'Roboto', sans-serif;
    --font-body: 'Roboto', sans-serif;
  }
</style>

Adding Custom JavaScript#

Add JavaScript to the Site Footer section:

<script>
  // Your custom JavaScript here
  console.log('Custom script loaded');
</script>

Loading External Scripts#

To load external libraries:

<script src="https://example.com/library.js"></script>
<script>
  // Use the library after it loads
</script>

Analytics & Tracking#

Google Analytics#

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

Plausible Analytics#

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

Comments Integration#

Disqus#

<script>
  var disqus_config = function () {
    this.page.url = '{{url absolute="true"}}';
    this.page.identifier = '{{comment_id}}';
  };
</script>
<script src="https://your-site.disqus.com/embed.js" async></script>

Cove (Ghost Native Comments)#

Ghost has built-in commenting. Enable it in Settings → Membership → Commenting.

Post-Specific Code Injection#

You can also add code to specific posts:

  1. Open the post in the editor
  2. Click the settings gear icon (⚙️)
  3. Scroll to Code injection
  4. Add Header or Footer code for that post only

Best Practices#

Performance Tip: Place tracking scripts in the footer to avoid blocking page rendering. Use async or defer attributes for external scripts.

  • Test thoroughly — Always test custom code on a staging environment first
  • Keep it minimal — Too much custom code can slow down your site
  • Comment your code — Add comments to explain what custom code does
  • Back up before changes — Save your code injection content before making changes

Debugging#

If your custom code isn't working:

  1. Check browser console for errors (F12 → Console)
  2. Verify the code is in the correct section (header vs footer)
  3. Make sure script tags are properly closed
  4. Check for conflicting code