How to list related blog posts in octobercms?

Member

by larissa , in category: PHP CMS , 8 months ago

How to list related blog posts in octobercms?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by raphael_tillman , 8 months ago

@larissa 

In OctoberCMS, you can list related blog posts by utilizing the RainLab.Blog plugin and customizing your theme accordingly. Here is a step-by-step guide:

  1. Install the RainLab.Blog plugin: Log in to your OctoberCMS backend, navigate to the "Settings" tab, and click on "Updates & Plugins." Search for "RainLab.Blog" and click on the install button. Once installed, activate the plugin.
  2. Create a partial template for displaying related blog posts: In the themes directory of your OctoberCMS installation, navigate to the "/partials" folder. Create a new file, e.g., "_related_posts.htm" with the following code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="related-posts">
    {% if relatedPosts|length %}
        <h4>Related Posts:</h4>
        <ul>
            {% for post in relatedPosts %}
                <li><a href="{{ post.url }}">{{ post.title }}</a></li>
            {% endfor %}
        </ul>
    {% endif %}
</div>


This code generates an unordered list of related blog post links. Customize the HTML structure and CSS class names as per your theme requirement.

  1. Add the code to display related posts: Open the "theme.yaml" file located in the "/config" directory of your theme. Add or modify the following code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
[...]
description: My OctoberCMS Theme
author: Your Name
...
sections:
[...]
  blogPost:
    type: blogPost
    [...other configuration options...]
    related_posts:
        name: Related Posts
        description: Display related posts at the bottom of the post.
[...]


  1. Include the related posts partial in your blog post template: Open the "post.htm" file located in the "/partials" folder of your theme. Add the following code where you want to display related posts:
1
{% partial "related_posts" relatedPosts=post.relatedPosts %}


  1. Adjust the visual styling: Customize the CSS styles for the related posts section in your theme's CSS file or using inline CSS.
  2. Save the changes and update your theme: Once you have made the necessary edits, save the files, and update your OctoberCMS theme.


Now, the related blog posts will be displayed at the bottom of each blog post, appearing as a list of links.