How to use Code Injection

How to use Code Injection

Code Injection is a powerful, convenient tool to add CSS, JS, and more to your Ghost site. Learn how to get the most out of it in this tutorial.


Code Injection offers an interface for easily adding analytics, styles, custom fonts, meta tags, and scripts to a Ghost site. It's also the perfect tool for making minor edits to your theme or adding some cool effects with JavaScript. In this tutorial, learn how as well as everything you need to know about using Code Injection in Ghost.

What's Code Injection?

As the name hints, Code Injection injects code into your Ghost site. Access Code Injection from Settings → Code Injection.

Ghost Settings page with Code Injection option highlighted

On the Code Injection page, there are two areas: Site Header and Site Footer. Ghost injects any text entered into these boxes onto every page of your site.

💡
Code Injection is also available on a per post basis via the Ghost Editor's sidebar. It works the same way as explained above but is only added to that particular post's page.

Site Header code is injected into the <head> tag. Site Footer code is injected before the closing </body> tag. Both are added after other styles and scripts used by your theme.

<html>
  <head>
    <title>Page Title</title>
      
    <!-- Code Injection Site Header added here -->  
  </head>
  <body>
  <!-- Your beautiful content -->

  <!-- Code Injection Site Footer added here -->    
  </body>
</html>

Add CSS to the Site Header

One of the most common use cases for Code Injection is to add CSS to your Ghost site to customize the look and feel of your theme.

Let's say we had a site about animals and were using the Casper theme.

Casper theme with animal posts

Everything's looking pretty good, but let's add some fun by using a custom typeface from Google Fonts. Find the font you want to use – for our animals site, we're going to use a font called "Luckiest Guy." Click Select this style to choose the styles and weights. Then, click the icon in the top right to view the selected font family.

Google Fonts page with numbers indicating steps

On the Selected family sidebar, find the Use on the web box.

Google Fonts Use on the web box

Copy the <link> tags and paste them into the 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=Luckiest+Guy&display=swap" rel="stylesheet">

Code Injection → Site Header

Next, copy the CSS rules. Whenever you add CSS rules to the Site Header, wrap them in a <style> tag. We only want our wacky new font to affect our headings, so we'll only apply it to them. And, since this font only has a single weight, we'll specify that, too.

<style>
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Luckiest Guy', sans-serif;
        font-weight: 400;
    }
</style>

Code Injection → Site Header

That's it! The Code Injection is ready to be saved.

Code Injection Site Header with custom Google Font

And so is our animals site – but now with a funky new font 💅

Ghost animals site with funky new font

The second most common use case for Code Injection is to add JavaScript to a Ghost site. When adding JS, add it to the Site Footer so that it loads properly.

As an example, let's add a typewriter effect to our animals site. To help us along, we'll use the open-source TypewriterJS library.

Load the main script into the Site Footer.

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

Code Injection → Site Footer

Next, configure the TypewriterJS script and start it on the page. Whenever you add JS via Code Injection, wrap it in a <script> tag.

<script>
    const app = document.querySelector('.site-title + p');

    const typewriter = new Typewriter(app, {
      loop: true,
      delay: 75,
    });

    typewriter
      .typeString('356 of the best <strong>monkeys</strong>')
      .pauseFor(1000)
      .deleteChars(7)
      .typeString('<strong>parrots</strong>')
      .pauseFor(750)
      .deleteChars(7)
      .typeString('<strong>sharks</strong>')
      .pauseFor(500)
      .deleteChars(6)
      .typeString('<strong>snakes</strong>')
      .pauseFor(500)
      .deleteChars(7)
      .typeString('<strong>animals</strong> on the web')
      .pauseFor(1500)
      .deleteAll(50)
      .start();
</script>

Code Injection → Site Footer

All set! The Site Footer is ready to be saved.

Ghost Code Injection Site Footer example

And our animals site just got a little wilder 🦁

0:00
/0:16

Summary

Code Injection is a powerful and convenient tool for quickly adding CSS, JS, and more to your Ghost site.

Many of Ghost's best Integrations rely on Code Injection – and now that you're an expert with it – you're more than ready to add one to your publication.

Ghost integrations – official apps, plugins & tools
Ghost plugins, tools & apps to integrate withh your Ghost site for automation, analytics, marketing, support and much more! 👉
On this page Introduction

How was the tutorial?

Be the first to know.

Join the Ghost developer community — sign up to get early access to the latest features, developer tools, and tutorials.

No spam. Once a month. Unsubscribe any time.