How to Hide a Post From the Home Page in Ghost CMS

Most Ghost themes will show the latest posts on your home page by default, but there are a number of reasons you might want to hide certain posts.

Whether some posts are intended to be sent just as a newsletter, or you have a different layout in mind for the home page, or simply there is no need for the post to appear on the home page.

Whatever the reason, you can hide a post on the homepage of your Ghost site in a few easy steps. Let’s look at the different options you have to achieve this.

Hide posts using the routes file

The easiest option is to add a filter in the routes.yaml file. (Learn more about routing and the routes.yaml file).

The part we need to change is the main collection:

collections:
  /:
    permalink: /{slug}/
    template: index
    filter: tags:-hash-hide

The important part here is the filter property. In this case, we are excluding every post from the main collection that has the internal tag #hide. Any post that has this tag, will not appear on the home page anymore.

Of course, this is just an example and you could use any tag for this, maybe in your case, it makes more sense to have #newsletteror #hidden.

For example:

channels:
  /blog/:
    permalink: /blog/{slug}/
    template: blog
    filter: tags:-hash-hide
  /portfolio/:
    permalink: /portfolio/{slug}/
    template: portfolio
    filter: tags:-hash-hide

Hide posts modifying the theme files

Another option to achieve this is modifying your theme files.

For the home page that is usually index.hbs, where you usually have a section where you loop over the posts, and you can check for a specific tag.

{{#foreach posts}}
	{{^has tag="#hide"}}
	  {{!-- you post card probably --}}
	{{/has}}
{{/foreach}}

The {{#has}} checks if the post has the #hide tag. {{#has}} is like {{#if}} but with the ability to do more than test a boolean. It allows theme developers to ask questions about the current context and provide more flexibility for creating different layouts.

Like all block helpers, {{#has}} supports adding an {{else}} block or using ^ instead of # for negation.

If it's needed you can also implement this change in the author.hbs and tag.hbs templates as well.

Hide posts using CSS

A third option is using CSS, but this depends on your theme. In the usual case, inside a {{#foreach}} there is a .post-card and the {{post_class}} outputs all the tags assigned to that post.

To hide post with the #hide tag you can add the following in Code Injection:

<style>
  .post-card.tag-hash-hide {
    display: none;
  }
</style>

The drawback of this solution is that the post can still be found in the source code.

In the end, all of this will work. I hope you find it useful.