Modern web magazines and blogs show to their visitors estimated read time for each article. This information encourage visitors to read an article, increases visitor engagement on the web site and improves user experience. It results with more page views and lower bounce rate. The reading time estimate is usually displayed in the article header together with other meta data. This function can be implemented into a WordPress blog using a dedicated plugin, but in this article we’ll show you how to write a simple Estimated read time PHP script for this purpouse.
How does Estimated read time PHP script for WordPress work?
Reading speed for adults largely depeds on the readability of the text. It averages between 200 to 300 words per minute. An article where short sentences prevail is easier and faster to read. Correspondingly, an article in which long sentences prevail is slower to read and more difficult to understand.
Estimated read time PHP script for WordPress calculates the reading time by a simple formula. Firstly, it counts the words inside the single post content. Secondly, it divides words quantity by predefined average reading speed value. Moreover, it rounds the result to the closest integer and shows it within the post template.
Note: Lower average reading speed values (closer to 200) will result with longer reading time estimates. Accordingly, setting higher reading speed values (closer to 300) will result with shorter read times. Shorter reading time will encourage more visitors to read the article. Otherwise, if you write technical articles or other harder to understand articles, it’s better to display longer but more realistic reading time estimates.
The final result of this tutorial will be a nicely styled Estimated read time information displayed in your article’s header.
A custom Estimated read time PHP script for WordPress
The following Estimated read time PHP script calculates read time as described above. Additionally it has a dynamic suffix that changes from singular to plural, depending on the reading time. It shows “1 minute read” or “X minutes read”. There are also visual enhancements like the clock unicode symbol as prefix, and CSS classes for additional styling.
/* Reading time */
function display_read_time() {
$content = get_post_field( 'post_content', $post->ID );
$count_words = str_word_count( strip_tags( $content ) );
$read_time = ceil($count_words / 250);
$prefix = '<span class="rt-prefix">? </span>';
if ($read_time == 1) { $suffix = '<span class="rt-suffix"> minute read</span>'; }
else { $suffix = '<span class="rt-suffix"> minutes read</span>'; }
$read_time_output = $prefix . $read_time . $suffix;
return $read_time_output;
}
Add the code snippet above to your WordPress web site following this procedure:
- enter the theme editor from your WordPress Dashboard
- it’s preferable to edit the child theme to avoid loosing the changes if updating the main theme
- find and open the
functions.php
Theme functions file - paste the Estimated read time PHP script on the end of
functions.php
to define the read time function - if needed, change the average reading speed (250 words per minute in our example)
- if needed, change the prefix and suffix content
- save the changes
Displaying the Estimated read time in the post template
As we defined the function that estimates the read time, now we have to display the calculated result inside the single post template. The best practice is to display the information within the article header. To achieve that, we need to call the function immediately after the post title. The code snippet that calls the Estimated read time function from our example and displays the calculated result is </?php echo display_read_time(); ?>. To display the result as a block element and to additionally style it with CSS, we’ll wrap the snippet with a <div> element like this:
<div class="reading-time">
<?php echo display_read_time(); ?>
</div>
To embed the snippet into your single post template, follow this procedure:
- open the WordPress theme editor, preferable edit your child theme
- open the Single post template
single.php
file - go to the position right after the post title and before the post content template tags
- paste the snippet that calls the Estimated read time function between the post title and the post content code
- save the changes
Pro Tip: Different themes have slight variations in the way their template files are coded. Some themes, like for example the default Twenty Nineteen WordPress theme doesn’t have the post title and post content code blocks right inside the single.php
file. In this theme, the code that generates the article title and content is located inside the file content-single.php
in the theme folder /template-parts/content/
. A bit more experienced developers won’t have any troubles locating the right position inside any theme.
Styling the Estimated read time display
We added a couple of CSS classes to the Estimated read time output HTML code to maximize styling possibilities. Here are some basic CSS styles which you can paste into your theme’s stylesheet. You can furthermore customize and modify it to exactly match the template you are working on.
.reading-time { font-weight: bold; color: #6d6d6d;}
.rt-prefix { color: green; }
.rt-suffix { font-weight: normal; color: #969696; font-style: italic; }
More tutorials on how to display Estimated reading time in WordPress
If you’re not comfortable with code editing, read our review of the most used Free Estimated read time plugins. Otherwise, check this advanced tutorial we found on GitHub while doing the research and see how far can implementation of Estimated reading time go.