How to Build a "Related Posts" Section in Webflow CMS by Category

To show related blog posts in Webflow, you can either filter a collection list automatically by matching the category of the current post, or use a multi-reference field to hand-pick specific articles. The automatic method is fast but includes the current post unless you hide it with custom code, while the manual multi-reference method gives you perfect control at the expense of manual updates.

I have built over 450 Webflow sites, and almost every blog layout requires a related posts section. It is one of the most effective ways to lower your bounce rate, increase average session duration, and build a strong internal link structure that search engines love.

Here is the exact guide on how to set up both methods, including the code you need to fix the native Webflow limitation of displaying the current post.

Why Related Posts Matter for SEO and Engagement

When a visitor finishes reading an article on your website, they reach a decision point. They can either press the back button and return to their search results, or they can click another link on your site. If you do not give them an obvious next step, they will leave.

Related posts solve this by keeping the user journey going. For coaches and SaaS founders, this directly translates to higher trust and more opportunities to introduce your offer. From an SEO perspective, related sections distribute link equity throughout your site. Search engines like Google crawl your site by following links, and a related posts section ensures that older posts do not become orphaned, meaning they remain connected to the rest of the site and easy for bots to index.

Internal links also help keep older articles discoverable in general. The same well-linked structure that helps traditional search crawlers reach every post makes your content easier for any automated reader to navigate, rather than leaving valuable articles stranded with no links pointing to them.

Option 1: The Automatic Category Match Method

The automatic method is the most popular choice for busy teams because it requires zero ongoing maintenance. Once you set it up on your blog post template page, Webflow handles the filtering automatically whenever you publish a new article.

Here is how to build it:

1. Open your Webflow project and navigate to the Blog Posts Template page.
2. Add a new section below your main rich text content area.
3. Inside that section, add a container and a heading that says "Related Articles" or "Read Next."
4. Drag a Collection List element into the container.
5. In the Collection List settings, bind it to your Blog Posts collection.
6. Click the plus icon next to Filters in the settings panel.
7. Set the filter rule: Category equals Current Blog Post.
8. Set the limit to show a maximum of 3 or 4 items.

This setup tells Webflow to look at the category of the article the visitor is currently reading, find other articles sharing that exact category, and display them.

However, you will immediately notice a problem. If your current post is categorized as "Marketing," it will show up inside the related posts list. Webflow does not have a native filter option that says "Slug does not equal Current Blog Post."

To fix this, you have to write a small script.

Hiding the Current Post with JavaScript

You do not need to install complex libraries to hide the current post. A tiny script placed in your page settings will compare the URL of each related post to the URL of the page the visitor is currently viewing. If they match, the script removes that item from the page.

First, select your Collection Item inside your related posts Collection List. Give it a class name, like related-post-item.

Next, select the link block or heading link inside that Collection Item that points to the blog post. Give it a class name, like related-post-link.

Now, open the settings for your Blog Posts Template page. Scroll down to the Before tag custom code section and paste the following code:

<script>
document.addEventListener("DOMContentLoaded", () => {
  const currentPath = window.location.pathname;
  const relatedItems = document.querySelectorAll(".related-post-item");
  
  relatedItems.forEach(item => {
    const linkElement = item.querySelector(".related-post-link");
    if (linkElement) {
      const itemPath = new URL(linkElement.href, window.location.origin).pathname;
      if (itemPath === currentPath) {
        item.remove();
      }
    }
  });
});
</script>

This script waits for the page to load, gets the current URL path, loops through every related post item, and compares its link to the current path. If they match, the item is removed from the DOM. Because this happens almost instantly, the user never sees the current post flash on the screen.

If you want to ensure your layout does not break when an item is removed, make sure your grid or flexbox layout handles dynamic item counts gracefully. For example, if you limit the collection list to 4 items and remove 1, you will be left with 3 items, which still looks great in a standard column layout.

Option 2: The Manual Multi-Reference Field Method

If you need absolute control over which articles are recommended, the automatic method will not work. For instance, if you are a coach writing a post about client acquisition, you might want to manually pair it with a specific case study rather than a random post from the same category.

The manual method solves this by using a multi-reference field in your CMS collection.

Here is how to set it up:

1. Go to your CMS Collections panel and open the settings for your Blog Posts collection.
2. Click Add New Field and select Multi-Reference.
3. Label this field Related Posts and point it to the Blog Posts collection itself.
4. Save the field and save the collection.
5. Go into your individual blog posts. You will now see a field at the bottom where you can select specific posts. Choose 3 or 4 articles for each post.
6. Navigate back to your Blog Posts Template page.
7. Add a Collection List element in your related section.
8. In the settings, instead of binding the list to the main Blog Posts collection, bind it to the multi-reference field: Related Posts.
9. Design your cards inside the collection list just like you would normally.

The major benefit of this approach is that you do not need any custom code to hide the current post. Since you manually select the related articles, you simply choose not to select the post you are editing.

The downside is the maintenance loop. Every time you publish a new article, you must manually go back to older, relevant posts and add the new post to their multi-reference fields. If you do not, your older content will never point to your newer content.

Comparing the Two Approaches

Choosing between these methods depends on who is managing your site and how often you publish.

For most SaaS founders and agencies, I recommend the Automatic Category Match method. It ensures your site remains dynamic without adding administrative overhead to your content team. If you need to feature specific posts for conversion, you can build a static call-to-action block inside the rich text instead.

Best Practices for Related Posts UX

Regardless of the method you choose, follow these layout and design guidelines to make sure your related posts section actually gets clicked:

• Keep the card count to three: A three-column grid is highly readable on desktop and stacks perfectly on mobile. Showing too many options creates decision paralysis.
• Use consistent image aspect ratios: Set your thumbnail images to a specific ratio, such as 16:9, and use the fit: cover property in Webflow. This prevents alignment issues if your uploaded CMS images have different dimensions.
• Show metadata: Include the publication date and estimated reading time. These small details act as trust signals and help users set expectations before clicking.
• Make the whole card clickable: Do not limit the hover state to just the title. Wrap the entire card in a Webflow Link Block so the user has a larger target area.

If you want to take your site design to the next level or need help setting up advanced CMS structures, check out my Webflow strategy page to see how I help businesses build high-performing marketing sites. You can also explore my white-label Webflow services if you are an agency looking to scale your development capacity.

Building a functional related posts section keeps readers in your ecosystem, builds trust, and helps search engines understand your content structure. Take the time to implement the JavaScript fix or set up your reference fields, it is a small development effort that pays long-term SEO dividends.