Live Word Count & Reading Time in WordPress
Automatically track article length and estimated reading time with vanilla JavaScript and MutationObserver
54 words • 1 min read
Understanding the Live Word Count Feature
This feature automatically calculates and displays the word count and estimated reading time for your blog posts. It updates in real-time as content changes, providing readers with immediate feedback about article length.
How Word Counting Works
The word counting algorithm extracts all text content from the article, removes extra whitespace, and splits the text by spaces. It filters out empty strings to ensure accurate counting. This approach handles various text formats including paragraphs, lists, and headings.
Reading Time Estimation
Reading time is calculated using an average reading speed of 200 words per minute (WPM). This is a standard metric used across the web. The calculation divides total words by WPM and rounds up to ensure readers have a realistic time estimate. Even short articles show at least 1 minute.
MutationObserver for Real-Time Updates
The MutationObserver API monitors DOM changes within the article container. When content is added, removed, or modified, the observer triggers a recalculation. This ensures the word count and reading time stay synchronized with the actual content without manual refreshes.
The observer configuration watches for childList changes (added/removed nodes), subtree modifications (nested changes), and characterData updates (text edits). This comprehensive monitoring captures all content variations while maintaining performance.
Edge Cases and Considerations
- Empty content: Returns 0 words and 0 minutes when no text exists
- Special characters: Punctuation and symbols are handled naturally by space-based splitting
- Multiple spaces: Extra whitespace is normalized before counting
- Hidden elements: All text nodes are counted regardless of CSS visibility
- Dynamic content: AJAX-loaded content triggers automatic recalculation
Performance Optimization Tips
For optimal performance, the script runs calculations only when necessary. The MutationObserver is scoped to the article container rather than the entire document. Text extraction uses native DOM methods which are highly optimized by browsers.
Consider debouncing the update function if you expect rapid content changes. For very long articles (10,000+ words), the performance impact remains negligible. The observer can be disconnected when not needed to free resources.
How AI Builder Can Generate This in WordPress
AI Builder automatically generates the complete Gutenberg block structure for features like this. It creates properly formatted JSON blocks with all necessary attributes, ensuring compatibility with WordPress core blocks.
The plugin generates custom CSS that styles your blocks professionally while maintaining responsiveness. It follows modern CSS practices with custom properties, mobile-first design, and accessibility considerations built in.
AI Builder includes vanilla JavaScript functionality when needed, like this word counter. It writes clean, performant code without dependencies, ensuring fast page loads and compatibility. The AI handles complex features including DOM manipulation, event listeners, and API integrations.
Accessibility is automatically addressed with proper ARIA labels, focus states, and semantic HTML. The AI ensures WCAG compliance while maintaining visual appeal and functionality across all devices and assistive technologies.
Prompt to Reproduce This Feature
Use this exact prompt with AI Builder to recreate this feature:
Create this feature: display "X words • Y min read" and update automatically when the article text changes (use a MutationObserver). Include the complete vanilla JavaScript inside an HTML block (no dependencies).
Start Building with AI Builder Today
Generate complete WordPress pages with custom functionality, styling, and JavaScript in seconds. No coding required.