Ghost: Pin Featured Post on Top

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

Resources

https://docs.ghost.org/api/handlebars-themes/structure/