Related Posts Generator

Add a dynamic “Related Posts” section to your Squarespace blog. Customize layout, card style, and content — no plugins required.

Why this matters

Blog readers who finish an article are primed to read more — but only if you surface relevant content. A related posts section keeps visitors on your site longer, reduces bounce rate, and increases page views per session. This replaces expensive third-party plugins with clean, lightweight code that uses Squarespace’s own JSON API.

<!-- Related Posts Section -->
<style>
  .sqs-related-wrap {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
  }
  .sqs-related-heading {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #000000;
  }
  .sqs-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
  }
  .sqs-related-card {
    background: #fff;
    border: 1px solid #e2e2e2;
    
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
  }
  .sqs-related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  }
  .sqs-related-thumb {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #eee;
  }
  .sqs-related-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }
  .sqs-related-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
  }
  .sqs-related-card:hover .sqs-related-title {
    color: #000000;
  }
  .sqs-related-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sqs-related-date {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .sqs-related-loading {
    text-align: center;
    padding: 40px;
    color: #999;
    font-size: 14px;
  }
  .sqs-related-empty {
    text-align: center;
    padding: 40px;
    color: #999;
    font-size: 14px;
  }
  @media (max-width: 640px) {
    .sqs-related-grid {
      grid-template-columns: 1fr !important;
    }
  }
</style>

<div class="sqs-related-wrap">
  <h2 class="sqs-related-heading">Related Posts</h2>
  <div class="sqs-related-grid" id="sqs-related-grid">
    <div class="sqs-related-loading">Loading related posts&hellip;</div>
  </div>
</div>

<script>
(function() {
  // ── Configuration ──
  var MAX_POSTS = 3;
  var BLOG_URL = '/blog'; // Change this to your blog collection URL if different
  var SHOW_THUMB = true;
  var SHOW_EXCERPT = true;
  var SHOW_DATE = true;
  var LAYOUT = 'grid';

  var grid = document.getElementById('sqs-related-grid');
  if (!grid) return;

  // Get current post URL to exclude it from results
  var currentPath = window.location.pathname;

  // Fetch blog posts via Squarespace JSON API
  var xhr = new XMLHttpRequest();
  xhr.open('GET', BLOG_URL + '?format=json&nocache=' + Date.now(), true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState !== 4) return;

    if (xhr.status !== 200) {
      grid.innerHTML = '<div class="sqs-related-empty">Could not load related posts.</div>';
      return;
    }

    try {
      var data = JSON.parse(xhr.responseText);
      var items = data.items || [];

      // Filter out current post
      var filtered = [];
      for (var i = 0; i < items.length; i++) {
        if (items[i].fullUrl !== currentPath && items[i].urlId !== currentPath.split('/').pop()) {
          filtered.push(items[i]);
        }
      }

      // Shuffle for variety, then limit
      for (var j = filtered.length - 1; j > 0; j--) {
        var k = Math.floor(Math.random() * (j + 1));
        var temp = filtered[j];
        filtered[j] = filtered[k];
        filtered[k] = temp;
      }
      filtered = filtered.slice(0, MAX_POSTS);

      if (filtered.length === 0) {
        grid.innerHTML = '<div class="sqs-related-empty">No related posts found.</div>';
        return;
      }

      // Build HTML
      var html = '';
      for (var n = 0; n < filtered.length; n++) {
        var post = filtered[n];
        var title = post.title || 'Untitled';
        var url = post.fullUrl || '#';
        var excerpt = '';
        var thumbUrl = '';
        var dateStr = '';

        // Extract excerpt from body or excerptHtml
        if (post.excerpt) {
          excerpt = post.excerpt;
        } else if (post.body) {
          var div = document.createElement('div');
          div.innerHTML = post.body;
          excerpt = (div.textContent || div.innerText || '').substring(0, 150);
          if (excerpt.length >= 150) excerpt += '...';
        }

        // Thumbnail
        if (post.assetUrl) {
          thumbUrl = post.assetUrl + '?format=500w';
        }

        // Date
        if (post.publishOn) {
          var d = new Date(post.publishOn);
          var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
          dateStr = months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();
        }

        var listClass = LAYOUT === 'list' ? ' sqs-related-list-layout' : '';

        html += '<a href="' + url + '" class="sqs-related-card' + listClass + '">';
        if (SHOW_THUMB && thumbUrl) {
          html += '<div class="sqs-related-thumb" style="background-image:url(' + thumbUrl + ')"></div>';
        } else if (SHOW_THUMB) {
          html += '<div class="sqs-related-thumb"></div>';
        }
        html += '<div class="sqs-related-body">';
        html += '<h3 class="sqs-related-title">' + title + '</h3>';
        if (SHOW_EXCERPT && excerpt) {
          html += '<p class="sqs-related-excerpt">' + excerpt + '</p>';
        }
        if (SHOW_DATE && dateStr) {
          html += '<span class="sqs-related-date">' + dateStr + '</span>';
        }
        html += '</div></a>';
      }

      grid.innerHTML = html;
    } catch (e) {
      grid.innerHTML = '<div class="sqs-related-empty">Error loading posts.</div>';
    }
  };
  xhr.send();
})();
</script>

How to add this to Squarespace

1. Copy the code above.
2. Go to Settings → Advanced → Code Injection.
3. Paste into the Footer field.
4. If your blog collection URL is not /blog, update the BLOG_URL variable in the script to match (e.g., /journal).
5. Click Save. Related posts will appear automatically at the bottom of every blog post page.