Add reading time to WordPress automatically without plugin

Did you check the reading time on this article? In the world of content creation, it’s essential to provide your readers with a clear understanding of the time investment required for your articles. Whether your readers have a busy schedule or are simply curious, showing the estimated reading time of your posts is a helpful feature. While there are plugins available to achieve this, you can also add reading time to WordPress manually without the need for additional plugins.

In this comprehensive guide, we’ll explore why displaying reading time is important, and we’ll provide step-by-step instructions on how to add this feature to your WordPress site. We’ll cover saving reading time data, displaying it in the admin area for all your posts, and enabling it on the front end using a shortcode or plain HTML for template files.

Why Show Reading Time

Enhance User Experience

Displaying estimated reading time offers multiple benefits for both you and your readers. First and foremost, it improves the user experience. Readers appreciate knowing in advance how long an article will take to consume. This transparency encourages them to click on your content, as it helps manage their time more effectively.

Improve Engagement

Additionally, providing reading time data can lead to increased user engagement. When readers know what to expect, they’re more likely to stay on your page and read through your entire article. This can result in lower bounce rates and higher average session durations.

Better SEO

From an SEO perspective, longer dwell times and lower bounce rates can positively influence your website’s search engine ranking. Google and other search engines consider user engagement metrics when determining the relevance and quality of a web page. By helping readers engage with your content, you’re more likely to rank higher in search results.

Adding Reading Time in WordPress: Step by Step

Now, let’s get into the practical part of adding the reading time feature to your WordPress site. We’ll break this process down into three main sections: saving the reading time data, displaying it in the admin area for all posts, and enabling it on the front end.

You’ll have to add custom code to the functions.php file of your child theme. This vital file contains functions and code specific to your theme, allowing you to customize the behavior and appearance of your WordPress site. To locate the functions.php file, navigate to your WordPress dashboard and access the “Appearance” section. From there, select “Theme Editor.” On the right-hand side, you’ll find a list of theme files. Look for the functions.php file within your child theme, and click on it to open it for editing.

Now, here’s where the magic happens. You’ll be pasting code into this file to automate the process of calculating and displaying reading time. This means that once set up, your WordPress site will automatically handle the task of estimating and presenting reading times, saving you time and enhancing the experience for your visitors. You’re in full control, and these adjustments will make your content more user-friendly and engaging. So, let’s dive into each step in detail.

Saving Reading Time Data

To save reading time data for your posts, you’ll need to add custom fields to your WordPress posts. These fields will store the estimated reading time in minutes. You can accomplish this by adding the following code to your child theme’s functions.php file:

// Get individual post word count
function wpr_post_wordcount($post_id) {
    $wpr_post_content = get_post_field('post_content', $post_id);
    $wpr_final_wordcount = str_word_count(strip_tags(strip_shortcodes($wpr_post_content)));
    return $wpr_final_wordcount;
}
// Automatically update word count and reading time when a post is saved
add_action('save_post', 'update_wordcount_and_reading_time');
function update_wordcount_and_reading_time($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; // Don't run on autosave
    if (wp_is_post_revision($post_id)) return; // Don't run on post revisions

    // Calculate word count
    $word_count = wpr_post_wordcount($post_id);
    update_post_meta($post_id, 'word_count', $word_count);

    // Calculate and update reading time
    $minutes = (int)(($word_count / 200) + 1);
    update_post_meta($post_id, 'reading_time', $minutes);
}
add_action('save_post', 'save_reading_time');

In this code, we calculate the reading time based on the word count and an assumed reading speed of 200 words per minute. You can adjust this number if needed. The code uses the save_post action to update the custom field whenever a post is saved. By now, you’ll discover that custom field are already set up in the post edit page, right after you save every post.

Displaying Reading Time in the Admin Area

Now that you’re saving the reading time data, let’s display it in the admin area for all your posts. This will make it easy for you to see the estimated reading time as you manage your content. Add the following code to your functions.php file:

// Add WordPress WordCount Column
add_filter('manage_posts_columns', 'wpr_add_wordcount_column');
function wpr_add_wordcount_column($wpr_columns) {
    $wpr_columns['wpr_wordcount'] = 'Word Count';
    $wpr_columns['wpr_reading_time'] = 'Reading Time'; // Add a new column for reading time
    return $wpr_columns;
}

// Show WordCount and Reading Time in Admin Panel
add_action('manage_posts_custom_column', 'wpr_show_wordcount_and_reading_time', 10, 2);
function wpr_show_wordcount_and_reading_time($column_name, $post_id) {
    switch ($column_name) {
        case 'wpr_wordcount':
            $wpr_wordcount = get_post_meta($post_id, 'word_count', true);
            echo $wpr_wordcount;
            break;
        case 'wpr_reading_time':
            $reading_time = get_post_meta($post_id, 'reading_time', true);
            if ($reading_time) {
                echo $reading_time . ' min read';
            } else {
                $wrdcnt = get_post_meta($post_id, 'word_count', true);
                $minutes = (int)(($wrdcnt / 200) + 1);
                update_post_meta($post_id, 'reading_time', $minutes); // Save reading time as a custom field
                echo $minutes . ' min read';
            }
            break;
    }
}

This code adds a “Reading Time” column to your admin post list and populates it with the estimated reading times. That will help you with managing the posts.

Front End Implementation

To enable reading time on the front end, you have two options: using a shortcode or adding plain HTML to your template files. Here, we’ll cover both methods.

Using a Shortcode

Create a Shortcode Function: Add the following code to your functions.php file to create a shortcode function.

// Create a shortcode to display word count and reading time
function display_wordcount_and_reading_time_shortcode() {
    $post_id = get_the_ID();
    $word_count = get_post_meta($post_id, 'word_count', true);
    $reading_time = get_post_meta($post_id, 'reading_time', true);

    $output = '<div class="wordcount-and-reading-time">';
    $output .= '<p>Reading Time: ' . $reading_time . ' min read</p>';
    $output .= '</div>';

    return $output;
}
add_shortcode('wordcount_reading_time', 'display_wordcount_and_reading_time_shortcode');

This code defines a shortcode named ‘reading_time’ that fetches the reading time data and returns it in the desired format.

Use the Shortcode: In your posts and pages, you can now use the [wordcount_reading_time] shortcode to display the estimated reading time. For example, [wordcount_reading_time] will output “Reading time: X min read” on your content. First, add the shortcode in post editor:

After that, the reading time will be available in the frond-end:

Using Plain HTML in Template Files

Edit Your Template File: Locate the template file (e.g., single.php, page.php) where you want to display the reading time. Open the file for editing.

Add HTML Code: Insert the following HTML code where you want the reading time to appear:

<div class="reading-time">
    <?php
    $post_id = get_the_ID();
    $reading_time = get_post_meta($post_id, 'reading_time', true);
    echo $reading_time . ' min read';
    ?>
</div>

This code fetches the reading time data and displays it within a div with the class “reading-time.”

Show reading time for your visitors in WordPress!

By adding the estimated reading time to your WordPress website, you can enhance the user experience, improve reader engagement, and potentially boost your site’s SEO performance. The process may seem complex, but with the provided step-by-step instructions, you can accomplish it without the need for additional plugins. Remember to customize the code to fit your specific needs and enjoy the benefits of transparent content presentation. Happy blogging!