Code Injection and Custom Assets
There are multiple ways to add customizations to your Ghost theme, including CSS and JS code injection, as well as custom asset files. This article will cover both methods, with an emphasis on the recommended approach.
Ghost Code Injection (Recommended)
The preferred method for adding custom CSS and JS is through Ghostβs built-in Code Injection feature. This method is safe from theme updates and provides a user-friendly interface.
Custom CSS
To add custom CSS, follow these steps:
- Log in to Ghost admin
- Go to Settings β Advanced β Code injection and click Edit
- Add custom CSS to Site header editor, for example:
<style> .footer-copyright > span { display: none; } </style>
Custom JS
To add custom JS, follow these steps:
- Log in to Ghost admin
- Go to Settings β Advanced β Code injection and click Edit
- Add custom JS to Site footer editor, for example:
<script> window.pvs?.addSocialLink?.( 'https://www.instagram.com/instagram', 'Instagram', '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"></path></svg>' ); </script>
Custom Asset Files (Alternative Method)
As an alternative to Code Injection, our themes now include /assets/custom.css
and /assets/custom.js
files. These files provide another way to add custom CSS and JS to your theme.
Using Custom Asset Files
- Locate the
/assets
folder in your theme directory - Open
custom.css
orcustom.js
file in a text editor - Add your custom CSS or JS code to the respective file
- Save the changes
While custom asset files offer flexibility, they come with a significant drawback: changes made directly to these files may be overwritten during theme updates. To prevent loss of customizations, always backup your changes before updating your theme.
Preserving Custom Asset Changes
To ensure your customizations persist through theme updates:
- Before updating your theme, create backups of
custom.css
andcustom.js
- After the theme update, compare your backups with the new versions of these files
- Carefully reapply your custom code to the updated files
Recommendation
We strongly recommend using Ghostβs built-in Code Injection feature for adding custom CSS and JS. This method offers several advantages:
- Changes are preserved during theme updates
- Easier to manage through Ghostβs admin interface
- Reduces the risk of accidentally modifying core theme files
Only use the custom asset files if you have specific requirements that cannot be met through Code Injection, and always remember to backup your changes before theme updates.