Introduction

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 Dashboard. To do so, please open your favorite browser and enter your domain name, followed by "/ghost". For example:

• ghost.hostarmadatutorials.com/ghost

Once logged, please navigate through the left sidebar to Settings > 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.

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.

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.

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

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.

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

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

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

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

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

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.

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!