How to use Code Injection in Ghost CMS

How to use Code Injection in Ghost CMS

Ghost CMS is a powerful, open-source platform designed for modern publishing. One of the many features it offers is the ability to inject custom code into your site. This guide will walk you through the process of using the code injection functionality in Ghost CMS.

What is Code Injection?

As the name hints, Code Injection injects code into your Ghost site. It’s a powerful, convenient tool to add CSS, JS, and more to your Ghost site. 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.

How to Use Code Injection

Step 1: Access Code Injection

To access the code injection feature, go to Settings → Code Injection area of Ghost admin.

Step 2: Understand the Code Injection Areas

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.

  • 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.

Step 3: 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. For example, you can add a custom typeface from Google Fonts.

First, find the font you want to use and copy the <link> tags. Paste them into the Site Header. Then, copy the CSS rules. Whenever you add CSS rules to the Site Header, wrap them in a <style> tag.

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.

Conclusion

Code Injection in Ghost CMS is a powerful feature that allows you to customize your site and add functionality without having to edit your theme files directly. Whether you’re looking to add custom styles, integrate with third-party services, or add some interactivity to your site, Code Injection makes it easy.