Adding reading time to blog posts in WordPress

The other day, I was searching for a topic on Strapi’s blog page, and I noticed how the reading times of the articles influenced my decision on which one to read. One showed 27 minutes, and the other showed 6 minutes, and I decided to read the content with the 6-minute reading time.

At this point, you can ask questions like the importance of the content and whether it meets my needs, of course. However, if I can find the information I need in a 6-minute blog post, why should I read a 27-minute one?

Then came the question every developer faces, “how can I do this?” And as a result, I added the reading time to this website I created with WordPress, and I wanted to share it with you.

What Do I Want and What Am I Using?

I wanted the code to calculate the approximate reading time based on the word count of the relevant blog content and to be able to display this calculated time using [shortcode] wherever I wanted.

The average reading speed is used as 200 words per minute, and I wanted to be able to change this on the code as well. But I didn’t change it 🙂

I also wanted to add an if condition that would allow me to use “Less 1 min” instead of “1 min read” for posts shorter than one minute.

I use the Breakdance page builder on my website. Breakdance does not use templates (this is a separate blog post topic), so we don’t have a function.php file that we can use and customize in template codes.

Instead, I have the WPCodeBox code snippet plugin, which is more useful than function.php and allows me to manage my codes easily. I will explain this plugin in detail in a separate blog post later because I plan to share many similar code snippets here, and we will use WPCodeBox very often.

Code

First, let me give you the whole code, then I’ll give you detailed information about it.

<?php 
function reading_time_shortcode() {
    $reading_speed = 200;
    $content       = get_post_field( 'post_content', get_the_id() );
    $word_count    = str_word_count( strip_tags( $content ) );
    $reading_time  = ceil( $word_count / $reading_speed );

    if ( $reading_time < 1 ) {
        $output = '<p>Less 1 min</p>';
    } else {
        //$output = '<p>Reading time: ' . absint( $reading_time ) . ' ' . _n( 'minute', 'minutes', $reading_time ) . '</p>';
        $output = '<p>' . absint( $reading_time ) . ' ' . _n( 'min', 'min', $reading_time ) . ' ' . 'read </p>';
    }
    return $output;
}
add_shortcode( 'reading_time', 'reading_time_shortcode' );

Code Explanation

function reading_time_shortcode() { ... }:

• This defines a function named reading_time_shortcode. In WordPress, shortcodes are created using such functions.

$reading_speed = 200;:

• This line sets the average reading speed (number of words read per minute) to 200. You can change this value according to your users’ reading speed.

$content = get_post_field( 'post_content', get_the_id() );:

• The get_the_id() function retrieves the ID of the current post. The get_post_field( 'post_content', get_the_id() ) function retrieves the content (post_content) of the post with this ID and assigns it to the $content variable. In other words, this line retrieves the content of the currently displayed post.

$word_count = str_word_count( strip_tags( $content ) );:

• The strip_tags( $content ) function removes HTML tags from the post content. This ensures that only the text content is counted. The str_word_count() function calculates the number of words in the text content and assigns it to the $word_count variable.

$reading_time = ceil( $word_count / $reading_speed );:

• This line calculates the reading time of the post. The word count is divided by the reading speed. The ceil() function rounds the result up. Thus, the reading time is always displayed as an integer.

if ( $reading_time < 1 ) { ... } else { ... }:

• This is a conditional statement. If the reading time is less than 1 minute (i.e., $reading_time < 1), the message “Less 1 min” is assigned to the $output variable. Otherwise, the message displaying the reading time is assigned to the $output variable. The absint() function returns the absolute value of its parameter as an integer. The _n( 'min', 'min', $reading_time ) WordPress function selects the singular and plural words correctly based on the counted values.

return $output;:

• The function returns the calculated reading time message.

add_shortcode( 'reading_time', 'reading_time_shortcode' );:

• This line creates a shortcode named reading_time. When users type [ reading_time ] in the post content, this function is executed, and the returned message is displayed on the screen.

There is another output commented out with // in the output. This is actually the original output and returns “Reading time: __ minute” if the reading time is one minute or less, or “Reading time: __ minutes” if it’s longer than one minute. I use a shorter and clearer output: “__ min read”.

You can adjust the relevant code according to which one you want to use.