Skip to main content

Reading Time

Calculates and displays an estimated reading time directly from the rendered post body content. No extra CMS field needed — it reads whatever text is already on the page.

Assumes an average reading speed of 200 words per minute (a conservative estimate; typical range is 200–250 wpm).

Page Settings script​

Add to Page Settings → Custom Code → Before </body> on the blog post template:

<script>
(function () {
  var body    = document.querySelector('.post-body');
  var display = document.querySelector('.read-time');
  if (!body || !display) return;

  var words = body.innerText.trim().split(/\s+/).filter(Boolean).length;
  var mins  = Math.max(1, Math.round(words / 200));
  display.textContent = mins + ' min read';
})();
</script>

Setup​

StepAction
1Add the combo class post-body to the Rich Text element bound to your blog post body field.
2Add a Text element wherever you want the reading time to appear (e.g. next to the publish date). Give it the combo class read-time.
3Add the script to the blog post collection template via Page Settings.

Customisation​

Different words-per-minute rate:

var mins = Math.max(1, Math.round(words / 250)); // faster reading speed

Custom label format:

display.textContent = mins + ' min read · ' + words + ' words';

Show only on longer posts (e.g. hide for posts under 2 minutes):

if (mins >= 2) display.textContent = mins + ' min read';

Notes​

  • innerText strips HTML tags and returns only visible text, so it naturally excludes code in hidden elements, alt attributes, etc.
  • The filter(Boolean) removes empty strings caused by multiple spaces or newlines.
  • If your rich text element has a different class, swap .post-body for whatever class or ID you use.
  • Works equally well on any long-form content page — not just blog posts.