How do I get users to read more of my content? you may think sometimes. Well, one of the methods that can help on this is Related Posts, which basically recommends content to your audience that's relevant.

In this tutorial I will show you how you can show related posts in your Ghost blog theme.

For this we will use the Ghost Content API, previously Public API, with Ghost 3.0 this is enabled by default and you don't have to do anything.

Now, we will use the Content API through the get helper provided by Ghost.

A basic example of code for getting related posts looks like this:

{{!-- Related Posts --}}
{{#get "posts" include="tags,authors" limit="3" filter="id:-{{id}}+tag:{{primary_tag.slug}}" as |related|}}
  <section class="related-posts">
    <h3 class="related-title">{{t "Recommended for you"}}</h3>
    {{#foreach related}}
      // post layout
      {{> post-card}}
    {{/foreach}}
  </section>
{{/get}}

So let's go through the code and explain it a bit.

  1. get "posts" is fetching a the posts
  2. include="tags,authors" is making sure that the fetched posts include the author and tag data as well
  3. limit="3" is the number of posts that will be fetched, you can change that according to your needs
  4. filter="id:-{{id}}+tag:{{primary_tag.slug}}" this is how we restrict the fetching
  • id:-{{id}} excluding the current post
  • tag:{{primary_tag.slug}} look for posts where primary tag is the same as in current post
  1. as |related| is used to be able to reference these posts as "related" later on (this is optional)
  2. {{#foreach related}} we iterate through the posts found
  3. {{> post-card}} we call the partial "post-card.hbs" which has to be defined by you, but you can also write a custom layout here without calling any partial.

The related posts coding should be placed in the post.hbs file before the closing {%raw%}{{/post}}{%endraw%} tag, because we use the post information(id, primary_tag) when filtering the posts, searching for related posts.

Advanced post filtering

We saw a basic usage of the get helper to show 3 related posts. Maybe you need more control over the results, so now we will take a look on how we can restrict the filtering even more.

Let's assume we want 3 related posts but besides the conditions we used before, we also want to show posts that are featured, in this case the code will look like this:

{{!-- Related Posts --}}
{{#get "posts" include="tags,authors" limit="3" filter="id:-{{id}}+tag:{{primary_tag.slug}}+featured:true" as |related|}}

The addition +featured:true makes sure the get fetches posts that are featured.

Now if we want additionally to show only posts that have an image, we need to add feature_image:-null, which will only look for posts that have a feature image set.

{{!-- Related Posts --}}
{{#get "posts" include="tags,authors" limit="3" filter="id:-{{id}}+tag:{{primary_tag.slug}}+feature_image:-null" as |related|}}

As you can see you have many possibilities to restrict the end result, making it easy it achieve what you need in different situations.

That's it for this time, hope you find this tutorial helpful.

Tags:#ghost theme#ghost development#ghost api