How to add display estimated reading time in Joomla Article

How to add display estimated reading time in Joomla Article

Take a look at the top right corner of "Full Article Image", you will see the estimated time to read for each article. It is really useful for users to estimate how long it will take to read the current article.

In this article, I will guide you to add it without using any 3rd party extensions.

We will add a small code to the article info section of the Joomla article to show the time to read. However do this via override of the template you are using instead of editing Joomla source code. It will disappear if you update to new Joomla version!

First determine where you want to insert it then open the necessary override file to add the source code. As you can see I want it to be on the top right of the post, next to the hits counter.

Therefore I will edit this file:

your-domain.com/templates/your-template/html/layouts/joomla/content/info_block/hits.php 

Then I would add this piece of code:

<script>
       $(function () {
            var txt = $(".blog-content-body")[0].textContent,          
            wordCount = txt.replace( /[^\w ]/g, "" ).split( /\s+/ ).length;        
            var readingTimeInMinutes = Math.floor(wordCount / 168) + 1;           
            var readingTimeAsString = readingTimeInMinutes + " mins read";     
            $('.article-details .reading-time').html(readingTimeAsString);
        });
</script>
  • The jQuery-code inside the $(function() { ... }) will only run once the DOM is ready for Javascript code to execute (see the jQuery api reference for details on the .ready() function).
  • Line 3 retrieves the text contained in the 'blog-content-body' section of the page and stores it inside the txt-variable.
  • Word count magic happens in line 4 where the text is processed in 3 steps:
    1. Remove all non word-characters, (i.e. not alphanumeric or underscore).
    2. Split the text by the space-character (i.e. the actual words in the text). This returns an array of words.
    3. Count the number of entries in the array (i.e. words in the text).
  • Line 6 divides the number of words by 168, as we decided 168 would be the average amount of words per minute an adult would be able to read.
  • Line 7 finalizes the text to be displayed by adding the word ' min' (for 'minutes') to the reading time.
  • Line 8 substitutes the html inside the reading-time class within the article-details tag, with the text to be displayed.

How to add display estimated reading time in Joomla Article

Just save and closed, then tweak the CSS for the span name: reading-time, we will have good results.

How to add display estimated reading time in Joomla Article
Display estimated reading time in Joomla Article

Related Articles

Fast Joomla Templates & Premium Joomla Templates Provider

A provider of premium fast Joomla templates and offers weekly free Joomla templates and professional tutorials, tips for the Joomla website

Subscribe to our newsletter

Subscribe for our Joomla templates updates, tutorials, giveaways & more!
↑↑