How to Create Related Posts Section in Ghost

A related posts, or a read next section is an essential component of any blog or website that aims to increase user engagement and provide a seamless browsing experience. By offering visitors relevant content based on their interests, you can extend their time on your site.

In this blog post, we will delve into the process of creating a related posts section in Ghost, but first let's discuss about the benefits.

Benefits of related posts sections

Some of the key advantages include:

1. Improved user experience: By suggesting relevant content, you enhance the browsing experience, making it easier for visitors to discover and access articles of interest.

2. Increased engagement: Encouraging readers to explore more content can lead to longer session durations, decreased bounce rates, and a higher likelihood of conversion or interaction.

3. Enhanced SEO: A well-implemented related posts section can contribute to improved search engine optimization by increasing the number of internal links and reducing the likelihood of orphaned pages.

4. Cross-promotion: Utilize the related posts section to highlight older or lesser-known articles, giving them increased visibility and potentially driving traffic to older posts.

Now that we have an understanding of the benefits, let's delve into the technical part.

Identify where to implement the changes

To create a related posts section in Ghost, you'll need to make some modifications to your theme. Before making any changes, it's a good idea to create a backup of your theme to ensure you can revert to the original version if needed.

In general, in Ghost themes the post.hbs is responsible for rendering individual blog posts, locate the theme folder you are currently using and find the post.hbs file.

Within the file, you will see the opening and closing {{post}} tags, which gives us the context:

{{#post}}

  // your post layout here

{{/post}}

All the necessary changes for the related section can be done in this file.

Define the related posts query

Now that we have the place, let's get to the code part. Ghost provides a powerful Content API that allows you to fetch related posts based on various criteria, such as tags.

Ghost uses the Handlebars templating engine, so you can use its helpers and filters to filter and sort the posts.

You have two main options to get related posts:

1. Based on the primary tag of your posts
2. Based on all associated tags

In both cases we will be using the {{get}} helper.

Fetch related posts based on the primary tag

If you are only interested in the primary tag (the first tag assigned to your posts), then you can use the following code inside the {{#post}} {{/post}} context:

{{#get
  'posts'
  include='tags,authors'
  limit='3'
  filter='id:-{{id}}+tag:[{{primary_tag.slug}}]'
}}

  <!-- Display related post details here -->

{{/get}}

As you can see in the code above, we are using some specific filters:

• id:-{{id}} - to exclude the current post
• tag:[{{primary_tag.slug}}] - to fetch posts that have the current posts' primary tag

Fetch related posts based on all associated tags

It's also possible to get related posts for all tags that are associated with a post. For this add the following code after the closing {{/post}} tag:

{{#get
  'posts'
  include='tags,authors'
  limit='3'
  filter='id:-{{post.id}}+tags:[{{post.tags}}]'
}}

  <!-- Display related post details here -->

{{/get}}

As you can see, there are some minor differences compared to the precious code, this is because of the context:

• id:-{{post.id}} - to exclude the current post
• tags:[{{post.tags}}] - to fetch posts using all tags from the current post

Render the related posts

Now that we have the data (posts) available, we can go on and display it. This can be done by adding HTML markup and CSS styling. In most themes there is a partial to render post cards in a specific way.

In our case, this is partials/post-card.hbs, assuming you have something similar, we can render the posts using this partial, by adding the following code inside the our previously defined {{get}}:

<section class="related-section">
  <h2 class="related-title">{{t "Read next"}}</h2>

  <div class="related-posts">

    {{#foreach related}}
      {{> post-card}}
    {{/foreach}}

  </div>
</section>

Within the {{#foreach posts}} block, you have each posts' details, which will be used to display various information about the post, for example, you can display the post title, excerpt, and a link to the post.

In our case what information is displayed is defined in the {{> post-card}} partial (partials/post-card.hbs).

To give you a complete example, for fetching 3 related posts based on the primary tag:

{{#get "posts" include="tags,authors" limit="3" filter="id:-{{id}}+tag:[{{primary_tag.slug}}]"}}

  <section class="related-section">
    <h2 class="related-title">{{t "Read next"}}</h2>

    <div class="related-posts">

      {{#foreach related}}
        {{> post-card}}
      {{/foreach}}

    </div>
  </section>

{{/get}}

In this guide we won't cover the styling, as that is specific to each theme, and in most cases the you can reuse class names to match the style of your current theme.

After following these steps, your Ghost CMS should display a related posts section on individual blog posts, showing posts that are related based on the criteria you defined.

Conclusions

By adding a related posts section to your Ghost blog, you can significantly enhance user engagement, improve the browsing experience, and drive more traffic to your content.

Follow the steps outlined in this guide to seamlessly integrate this feature into your Ghost theme and create a dynamic and engaging environment that keeps visitors exploring your content and coming back for more.