Ghost: Pin Featured Post on Top
Ghost is a wonderful blogging platform. Besides being a hands-down blogging tool (and nothing more), it is also very easy to customize and adapt it to various needs. This article describes the changes required to show the featured posts on top of other posts.

The Ghost platform currently ships with Casper as the default theme. Casper is beautiful and simple, but sometimes I personally feel that it lacks some features I wish they were there. Other Ghost themes may support these features, yet I prefer the simplicity and robustness of Casper with the flexibility of Ghost to produce the functionality I need.
Take for example the simple case of showing a featured post on top of other posts. By marking the Feature this post checkbox in Post Settings the post won't show on the very top, with Casper as active theme.

To add this functionality to your Ghost blog you have to make a few additional changes. The steps described here assume that you have a self-hosted Ghost platform and you have access to the Ghost deployment files on your host, and that your Ghost blog is using Casper as default theme.
SSH into your Ghost host and make sure you're not the root
user. (This is one of the requirements of the Ghost installation guidelines). At the terminal, switch to your non-root user account that you've been using to setup Ghost. (Replace <user>
with your own account).
su - <user>
Go to your Ghost theme directory (Casper) and check for the index.hbs
and home.hbs
files.
cd /var/www/ghost/current/content/themes/casper/
ls -la
You may not have the home.hbs
file created yet, so make a copy of the index.hbs
and name it home.hbs
:
cp index.hbs home.hbs
home.hbs
home.hbs
is an optional template to provide special content for the home page. This template will only be used to render the home page (/
). Using your editor of choice (e.g. vi
, nano
), make the following change to the <div class="post-feed">
element in home.hbs
(and save):
<div class="post-feed">
{{#get "posts" include="tags,author" filter="featured:true" limit="all" as |featured|}}
{{#foreach featured}}
{{> "post-card"}}
{{/foreach}}
{{/get}}
{{#foreach posts}}
{{#unless featured}}
{{> "post-card"}}
{{/unless}}
{{/foreach}}
</div>
index.hbs
index.hbs
is the standard required template for a list of posts. Change the <div class="post-feed">
element in index.hbs
as follows (and save):
<div class="post-feed">
{{#foreach posts}}
{{#unless featured}}
{{> "post-card"}}
{{/unless}}
{{/foreach}}
</div>
Restart Ghost
To activate these changes you'll need to restart Ghost. You must be located at the root of your Ghost deployment directory (e.g. /var/www/ghost
), in order to use the ghost
CLI:
cd /var/www/ghost
ghost restart