Read Time — Oura

This snippet automatically calculates the estimated reading time of content and displays it anywhere on the page. You simply mark the element that contains the content and the element where the reading time should appear. The script counts the words, calculates how long it would take to read, and updates the number in the count element.

A common use case is showing something like “4 min read” near a blog title or article header. If the content changes later, the reading time updates automatically based on the new word count.

Setup

Add External Scripts

Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.

Add HTML

Place the code in an HTML widget or add it through Elementor → Custom Code (before the closing </body> tag) either globally or only on selected pages.

Add Custom CSS

Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.

Add Custom Javascript

Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.

document.addEventListener("DOMContentLoaded", () => {

  if (document.body.classList.contains("elementor-editor-active")) return

  const element = "ou-readtime-element"
  const instance = "ou-readtime-instance"
  const wpm = "ou-readtime-wpm"
  const decimals = "ou-readtime-decimals"

  const groups = {}

  document.querySelectorAll(`[${element}="content"]`).forEach(el => {
    const key = el.getAttribute(instance) || "default"
    if (!groups[key]) groups[key] = []
    groups[key].push(el)
  })

  Object.entries(groups).forEach(([key, elements]) => {

    let totalwords = 0

    elements.forEach(el => {
      const text = (el.innerText || "").trim()
      if (!text) return
      totalwords += text.split(/\s+/).length
    })

    let countel = document.querySelector(
      `[${element}="count"][${instance}="${key}"]`
    )

    if (!countel && key === "default") {
      countel = document.querySelector(`[${element}="count"]`)
    }

    if (!countel) return

    const wpmvalue = parseFloat(countel.getAttribute(wpm)) || 265
    const decimalsvalue = parseInt(countel.getAttribute(decimals)) || 0

    const readtime = totalwords / wpmvalue

    const output =
      decimalsvalue === 0
        ? Math.max(1, Math.round(readtime))
        : readtime.toFixed(decimalsvalue)

    countel.textContent = output

  })

})

Add Custom PHP

Place the PHP snippet in your theme’s functions.php file or add it using a code snippets plugin to enable the logic.

‍

Add Attributes

Add the ou-readtime-element="content" attribute to the element that contains the text you want to analyze. The script will scan this element, count the words inside it, and use that information to calculate the reading time.

If multiple content elements share the same instance value, their word counts will be combined into a single total.

Name

ou-readtime-element

Value

content

Add the ou-readtime-element="count" attribute to the element where the reading time should appear. Once the reading time is calculated, the script automatically updates the number inside this element.

Name

ou-readtime-element

Value

count

Publish and preview live

Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.

Implementation

Use the following attributes to control how the reading time is calculated and displayed.

Words Per Minute

Use the ou-readtime-wpm attribute to control the reading speed used in the calculation. This value represents the average number of words read per minute.

If this attribute is not provided, the script uses a default reading speed of 265 words per minute.

Name

ou-readtime-wpm

Value

NUMBER

Decimals

Use the ou-readtime-decimals attribute to control how many decimal places the reading time should display. This attribute should be added to the count element, since it controls how the final number is shown.

For example, if the calculated reading time is 3.76 minutes:

ou-readtime-decimals="0" → 4 min read
ou-readtime-decimals="1" → 3.8 min read
ou-readtime-decimals="2" → 3.76 min read

This allows you to choose between a simple rounded reading time or a more precise estimate.

Name

ou-readtime-decimals

Value

NUMBER

Using Instances

Use instance attributes when you have multiple reading time setups on the same page and each one should calculate its own result. Without instances, the script may not know which content belongs to which count element.

The value of ou-readtime-instance can be anything you like, such as blog, article, guide, or even numbers like 1 or 2. The only rule is that the content element and the count element must use the same value.

You can set up instances in two different ways depending on how your layout is structured.

Method 1: Add the instance directly to the elements

Use this method when the content element and the count element are not inside the same wrapper.

Add ou-readtime-instance="blog" to the element that has ou-readtime-element="content".
Add the same ou-readtime-instance="blog" value to the element that has ou-readtime-element="count".
Repeat the process with a unique value if you add another reading time setup to the page.

Method 2: Add the instance to a wrapper

Use this method when the content element and the count element are inside the same parent wrapper.

Select a parent wrapper that contains both the content and the count elements.
Add ou-readtime-instance="VALUE" to that wrapper, using a unique value.
Repeat for every instance on the page.