I’ve read that adding an estimated reading time to a web page can help improve website visitor engagement. The idea is that it can help readers feel more comfortable opening the content, as they know they won’t have to spend too much time reading it. I’m not sure how useful it really is, but I’m always looking for ways to increase user engagement.

Below is how I set this up on my website using ACF. I’ve also added options for adding this to a WordPress template, displaying it via a shortcode, or by using it in a YOOtheme dynamic field.

Important note: To get the reading time to appear to posts created before you’ve added this feature, you’ll just need to re-save the old posts.

Step 1: Setting Up Advanced Custom Fields (ACF)

First, you’ll need to have the ACF plugin installed and activated on your WordPress site.

Create a New Custom Field

  1. Navigate to ACF: Go to Custom Fields > Add New in your WordPress dashboard.
  2. Create a Field Group: Name your field group something like “Post Reading Time.”
  3. Add a Field:
    • Field Type: Text
    • Field Label: Reading Time
    • Field Name: reading_time
    • Instructions: Add a custom reading time if needed, such as “30 Minute Video.”
    • Default Value: Leave this blank.
  4. Location Rules: Set the rules so this field group appears only on Posts.
  5. Publish the Field Group.

Now, whenever you create or edit a post, you’ll see a field labeled “Reading Time” where you can manually enter a time if needed.

Step 2: Adding the Custom Function in functions.php

Next, we’ll add a custom function to automatically calculate the reading time based on the content of your post. This will update the ACF field whenever a post is saved.

Here’s the code to add to your theme’s functions.php file:

// =========================================================================
// Add Reading Time to Posts
// =========================================================================

function ess_save_reading_time($post_id) {
  if (get_post_type($post_id) != 'post') {
    return;
  }

  // Get the current content and calculate the reading time
  $content = get_post_field('post_content', $post_id);
  $word_count = str_word_count(strip_tags($content));
  $reading_time = ceil($word_count / 200);

  // Retrieve any existing custom reading time
  $custom_time = get_field('reading_time', $post_id);
  $stored_content = get_post_meta($post_id, '_stored_content_hash', true);
  $current_content_hash = md5($content);

  // Force recalculation if the field is empty or the content has changed
  if (empty($custom_time) || $stored_content !== $current_content_hash) {
    // Calculate and save the reading time
    if ($reading_time > 0) {
      update_field('reading_time', $reading_time . ' Minute Read', $post_id);
    } else {
      update_field('reading_time', '1 Minute Read', $post_id);
    }
    // Update the stored content hash
    update_post_meta($post_id, '_stored_content_hash', $current_content_hash);
  }
}
add_action('save_post', 'ess_save_reading_time');

How Reading Time is Calculated

The reading time is automatically calculated based on the length of your post, assuming that the average reader reads at a pace of around 200 words per minute. This standard helps provide a consistent estimate across different types of content.

Customizing the Reading Speed

If you want to adjust the assumed reading speed, you can change the 200 in this line of the code:

$reading_time = ceil($word_count / 200);

For example, if you think your readers read at a pace of 250 words per minute, you can update it like this:

$reading_time = ceil($word_count / 250);

This gives you the flexibility to tailor the reading time estimate to your audience.

Step 3: Displaying the Reading Time on Your Posts

Finally, you’ll want to display the reading time on your posts. There are two ways to do this, depending on how your site is set up.

Option 1: Adding to a Template File

You can add the reading time directly to your theme’s template files (likely single.php or content-single.php) using the following code:

<?php
  $reading_time = get_field('reading_time');
  if ($reading_time) {
    echo '<div class="reading-time">' . esc_html($reading_time) . '</div>';
  }
?>

This code checks if the reading time field has a value and, if so, displays it within a paragraph tag. You can style this output using CSS to match your theme.

Option 2: Adding a Shortcode

If you’d like to have more control over where and how the reading time appears in your posts or pages, you can create a shortcode. This allows you to place the reading time anywhere in your content using a simple shortcode.

Add the following code to your functions.php file:

function ess_reading_time_shortcode() {
  $reading_time = get_field('reading_time');
  if ($reading_time) {
    return '<div class="reading-time">' . esc_html($reading_time) . '</div>';
  }
  return '';
}
add_shortcode('reading_time', 'ess_reading_time_shortcode');

Now, you can add [reading_time] anywhere in your post or page content, and the reading time will appear there.

Option 3: Adding to a YOOtheme Dynamic Field

If you’re using YOOtheme, you can display the reading time as a dynamic field within the page builder. Here’s how:

  1. Open the YOOtheme Builder: Edit your post or page where you want the reading time to appear.
  2. Add a Dynamic Field:
    • Add a text element or any other element where you want the reading time to be displayed.
    • Click on the Dynamic Content icon (the database symbol) next to the content field.
  3. Select the ACF Field:
    • In the dynamic content options, select ACF Field.
    • Choose the Reading Time field you created earlier.
  4. Style as Needed: Customize the styling within YOOtheme to match your site’s design.

This allows you to easily integrate the reading time into your YOOtheme layouts without touching the code.

I hope this helps!