Adding Custom CSS & JS: Code Injection and Custom Assets

You can customize your Ghost theme by adding CSS and JavaScript. The recommended way is using Ghost’s built-in Code Injection feature, but you can also use custom asset files. Here’s how both methods work:

Method 1: Ghost Code Injection (Recommended)

Code Injection is the safest way to add custom CSS/JS—your changes won’t be lost during theme updates.

Add Custom CSS

1. Log in to Ghost Admin.

2. Go to Settings → Advanced → Code injection and click Edit.

3. Paste your CSS in the Site header editor, for example:

   <style>
   .footer-copyright > span {
       display: none;
   }
   </style>

Add Custom JS

1. Go to Settings → Advanced → Code injection and click Edit.

2. Paste your JS in the Site footer editor, for example:

   <script>
   console.log("Hello from Code Injection!");
   </script>

Method 2: Custom Asset Files (Alternative)

You can also add code to /assets/custom.css or /assets/custom.js in your theme folder.

How to Use

1. Open /assets/custom.css or /assets/custom.js in a text editor.
2. Add your custom code.
3. Save the file.

Preserving Custom Asset Changes

1. Back up your custom.css and custom.js before updating your theme.
2. After updating, compare your backups and reapply any changes as needed.

Which Method Should I Use?

We strongly recommend using Ghost’s Code Injection feature:

• Your changes survive theme updates.
• You can manage everything from the Ghost admin panel.
• Less risk of breaking your theme.

Use custom asset files only if you have advanced needs that Code Injection can’t cover—and always keep backups!