Code Injection in Ghost CMS is a robust and powerful feature that provides you with the ability to inject custom scripts or styles directly into your website. This feature opens up a realm of possibilities for customization that extends far beyond the limitations of your chosen theme. With Code Injection, you can seamlessly integrate third-party tools, implement custom styles, or embed tracking scripts to enhance your site's functionality.
How Code Injection works?
As the name suggests Code Injection injects code into your website in specific predefined places. Code can be injected into either the header or the footer of a webpage. These two areas of a webpage serve different purposes when it comes to code injection. The Site Header box is designed for styles and code that need to run early in the loading process, while the Site Footer box is catered towards code that is meant to run later, such as tracking scripts.
Code Injection is added via the {{ghost_head}} and {{ghost_foot}}
helpers, which are included
in the default.hbs of Ghost themes, before the closing </head> and
</body> tags respectively.
<html>
<head>
<title>{{title}}</title>
{{ghost_head}}<!-- Code Injection Header added here -->
</head>
<body>
<!-- Your elements & content -->
{{ghost_foot}}<!-- Code Injection Footer added here -->
</body>
</html>
Furthermore, Code Injection can be defined at the site level or at individual post/page level. Site-wide code injection applies to all pages across the site, allowing you to add custom code that will affect the entire site. On the other hand, post-specific code injection only applies to individual posts, allowing for unique customization on a per-post basis.
How to use Code Injection?
To access the site-wide Code Injection in your Ghost Admin go to Settings > Code Injection.
(/ghost/#/settings/code-injection). There you have the two main sections: Site header
and Site footer.
<style>
/* custom styles and css should go in the header */
</style>
Everything in the site footer will be injected before the closing </head> tag.
<script>
/* custom scripts and js generally go in the footer */
</script>
Everything in the site footer will be injected before the closing </body> tag.
For individual post/page injections you can open a specific post/page in the Admin, then from the Post settings > Code injection you get the two main sections: Post header and Post footer.
Common use cases for Code Injection
By injecting custom code, you can tailor your site to meet specific needs and preferences. Here are some common use cases for code injection in Ghost CMS:
Adding custom styles
One of the most frequent uses of code injection is to add custom styles to your Ghost site. While Ghost themes provide a great starting point, there are times when you need to fine-tune the design to align with your brand's identity or specific aesthetic preferences. By injecting CSS code, you can make these adjustments seamlessly.
For example, if you want to change the background color of your site’s header or
adjust the font size of your blog titles, you can easily achieve this with custom
CSS. In such a case, you should add the code in the header section, between
<style></style> tags, for example:
<style>
.header { background-color: blue; }
.post-hero-title { font-size: 4rem; }
</style>
By adding this code in the Code Injection section under Settings > Code Injection > Site Header, you ensure that these styles are applied across all pages of your site.
Adding third party integrations
Another common use case for code injection is integrating third-party services. Whether you want to add analytics, social media widgets, or marketing tools, code injection provides a straightforward way to embed these services into your Ghost site.
For instance, if you want to integrate Google Analytics to track your website traffic, you can do so by injecting the necessary script into the Site Footer section:
<script async src="https://www.googletagmanager.com/gtag/js?id={your_id}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{your_id}');
</script>
These integrations generally provide the code you need to add in Code Injection.
Adding extra features & functionality
Beyond styles and integrations, code injection allows you to add extra features to your Ghost site that enhance functionality and user experience. This could include custom JavaScript to create interactive elements, or add new widgets.
For example, you might want to add a custom JavaScript feature that opens all external links in a new tab. Here’s a simple example of how you could achieve this:
<script>
document.querySelectorAll('a').forEach(link => {
if(link.hostname != window.location.hostname)
link.target = '_blank';
});
</script>
This script looks for all <a> elements checking for the hostname and if it's
different from yours, it will add a target="_blank" attribute which in turn
makes sure that when links are clicked they are opened in a new window.
In conclusion, the potential use cases for Ghost CMS Code Injection are wide-ranging. From aesthetic customization and third-party integrations to advanced dynamic content and interactive features, it's a powerful tool that can greatly enhance the functionality, appearance, and user experience of a Ghost CMS website.