Learn Ghost

Young blogging platform build on tope of node.js for fast loading speed and easy scalability!

• Last Updated: 05/11/2020
• ( 3 minutes reading )

How to inject code in the header and footer of your Ghost blog


As an open-source application, Ghost provides you the utility of adding custom styles and codes to the header and footer of your blog pages or posts. This gives them the flavor and that unique look you always wanted to achieve. You are provided with one more tool to distinguish your blog from the rest of the competition. Other useful things you can do include injecting tracking codes and meta tags. In this tutorial, we are going to talk about how you can add custom styles and codes to your posts and your pages on the Ghost publishing platform. Let’s get started.


Getting Started

For a start, you have to log into your Ghost Admin DashboardTo do so, please open your favorite browser and enter your domain name, followed by "/ghost". For example:

  • ghost.hostarmadatutorials.com/ghost


Login page


Once logged, please navigate through the left sidebar to Settings Code injection.


Access Code Injection


Upon doing that, you will be redirected to the intended page.


Inserting Code into Pages

The "Code injection" page is split into two sections - “Site Header” and “Site Footer”. Under each one, you will find content boxes, where you can inject your custom codes and styles.


Header and Footer Code injection sections


To insert a code, simply click in the respective content box and enter it into it. If the snippet of code is bought or generated from a third-party site, you can just paste it inside.


Save Header and Footer code changes


Finally, when you populate the content boxes with the desired code, please press the “Save” button located on the top corner of the screen.


Insert Code into Selected Posts

To insert code inside a specific post, you need to access the "Post" section of your Ghost blog. To do so, please click on the “Posts” link in the left sidebar.


Access Posts


This will display all your posts in the middle of the screen. Please select one by clicking on it.


Select Post


This action will redirect you to the page overview section. Once there, please click on the cogwheel icon located on the top right corner of the screen.


Cogwheel button


Upon clicking on it you will be presented with a menu. Please select the “Code injection” option.


Select Code Injection option


This will present another dialog, containing two content boxes - the “Post header” and the “Post footer”.


Post Header and Footer


After entering or pasting your code snippet, please click the back arrow located on the top right side of the side menu.


Return to Post settings


Afterward, click the “X” icon, located on the top right corner of the side menu.


Edit Post settings


Clicking the “X” icon will unveil the cogwheel again, along with the “Update” dropdown menu, located on its left side.


Update post

To publish the new changes you made, please click the “Update” dropdown menu. After the menu is expanded, please select the “Update” button located in the bottom right corner.


Post updated notification


To go to your post and view your changes, please click on the “View Post” link inside the blue bubble displayed on the left side of the screen. If the code you inject is correct, you will see this reflected in your post!


There you have it. The methods you can follow to inject code inside your Ghost blog’s pages and post. Hopefully, following this tutorial proved insightful, and you are now fully able to use this great functionality!



Content Marketing Specialist

Sebahat is a young and bright woman who has become an invaluable part of our team. She started as a Customer Care Representative, mastering that role and, along the way, growing into a tech-savvy individual who is well acquainted with every support layer of the company. Driven by her aim to improve our customers’ experience constantly, she is committed to enhancing the extraordinary support we deliver.