I searched in a few places and couldn’t find what I thought would be a pretty obvious helper functionality, similar to reading_time. So I made it myself! Here’s an example:
How to implement:
- On a post page, create a
spanwhere you want your word count to go:
<span class="word-count"></span>
- Figure out the code block in theme theme where your content shows up (in the example below, I am using
.post-contentas the div class where my content goes. Then, add the following code at the bottom of your post template:
<script>
document.addEventListener("DOMContentLoaded", function () {
const content = document.querySelector(".post-content"); // or whatever your main content class is
const text = content?.textContent || '';
const wordCount = text.trim().split(/\s+/).length;
document.querySelector(".word-count").textContent = `${wordCount.toLocaleString()} words`;
});
</script>
It’s that easy, and I’m surprised it hasn’t already been implemented in Ghost Core. Here’s to hoping that this gets turned into a default feature similar to my last post, Creating a Custom "Announcements" Bar for your Ghost Blog (Hint hint, wink wink).