How to use Code Injection in Ghost

https://ghost.org/tutorials/use-code-injection-in-ghost/ • 110 KB fetched
Open original page
How to use Code Injection in Ghost

Open menu

Product

For Creators

YouTubers, bloggers, podcasters, musicians & artists

For Publishers

Writers, journalists, local news and new media outlets

For Business

Modern brands & companies with ambitious content marketing

For Developers

Source code, documentation, guides and tutorials

Explore

Resources

Marketplace

Professional themes, custom integrations and qualified experts

Start here New

A huge library of guides, stories, interviews and tips for success

Themes

Hundreds of beautifully designed publication templates

Help center

Get help with product features and answers to common questions.

Integrations

Connect thousands of apps and services with your website

Product updates

All the latest changes and improvements to Ghost

Experts

Get help building your site from certified Ghost developers

About us

Learn more about the people behind the platform (We're hiring!)

Pricing

Sign in
Get Started — free

Close menu

For Creators

Join thousands of creators using Ghost to share their work

For Publishers

The platform for independent publishers

For Business

Content marketing for modern business

For Developers

Source code, documentation, guides and tutorials

Explore
Pricing
Marketplace
Themes
Integrations
Resources
Help center
Product updates
Developers
About us

Get Started — free

Existing customer?
Sign in

Tutorials Fundamentals
4 min read
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 .

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 using the Casper theme.
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." Go to the typeface's page and click Get font .
Then, click Get embed code .
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, add 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.
And so is our animals site – but now with a funky new font 💅
Add JS to the Site Footer
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.
And our animals site just got a little wilder 🦁

0:00

/ 0:16

1×

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! 👉
Ghost - The Professional Publishing Platform

On this page
Introduction

How was the tutorial?

Give us some feedback

Keep on learning

Send a custom welcome email

5 min read

Open a theme in a code editor

1 min read

Download a code editor

1 min read

Download and upload a theme

5 min read

The complete guide to comments

3 min read

How to add social media icons to your site

4 min read

How to add an offer banner

4 min read

Be the first to know.

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

Subscribe

Email sent
Try again

No spam. Once a month. Unsubscribe any time.

Most helpful

Essential tutorials to get you started

Funda mentals

The basics of Ghost theme development

Level up

Next-level development techniques

Do more

Ideas & inspiration for whatever comes next

Docs
Content API
Help Center

Published with Ghost
How to use Code Injection in Ghost

Links found on this page
