Creating reading time to WordPress posts

Providing a number of reading time will help the visitor know in advance how much time it takes to finish reading the post. Let’s find out how to have this reading time number in each article on your WordPress blog. We’ll use the MB Views from Meta Box.

This is an example for a number of reading time that we will create in this practice.

Video version

Why MB Views?

To have the reading time number on posts, we should use some code.

In the meantime, we cannot deny that using a plugin to add code indirectly brings more advantages than doing it in the theme’s files.

There are some plugins that can help to add code. But, if you have Meta Box on your site, MB Views will be the best option to avoid installing too many plugins from diverse authors on your site.

Preparation

In this practice, we need some tools:

• Meta Box core plugin: to create custom fields.
• MB Views: to create a template to display the reading time number.

1. Setting an area for displaying the time information

I will create a template to show the time information in the top section of the post. We should put the reading time on the top since it should be noticed before the visitor reads the post.

Go to Meta Box > Views, and create a new template for setting the position to display timing information.

In the Template tab, add some lines of code like this:

<div class="reading-time">
    <span class="dashicons dashicons-clock"></span>
    <div class="time">
        <span id="time"></span>
    </div> 
</div> 

Explanation:

<span class="dashicons dashicons-clock"></span>

This line is to get the time icon. It’s just for decoration.

id="time": is an ID I set for this area. It’ll be used to automatically display the time number after calculating using JavaScript later.

After getting all of the information of the time as you want, move to the Settings section of the view, set the Type as Singular, and choose the name of any post type that we set the author for in Location.

Pay heed that I choose the option which shown in below picture to set the reading time display right before the post content.

Since I added only the icon into this template, there will be only the icon appearing from this template on the posts as well.

To have the reading time number, we need to create another view.

2. Calculating the reading time

I’m creating a new template to calculate the reading time based on the number of words in the post content.

Come back to Meta Box > Views and create a new view.

We should use JavaScript, so move to the JavaScript tab and add code.

// Get the article text
const articleText = document.querySelector('.entry-content').innerText;
const time = document.getElementById('time');

// Split the text into an array of words
const wordsArray = articleText.split(' ');

// Count the number of words in the array
const wordCount = wordsArray.length;

// Calculate the estimated reading time
const wordsPerMinute = 200;
const readingTime = Math.ceil(wordCount / wordsPerMinute);

// Display the estimated reading time
time.innerHTML = `${readingTime} MIN`;

In there:

const articleText = document.querySelector('.entry-content').innerText;

This line of code is to get all the text from the post content.

I also create an object to connect with the ID that we created in the previous view for the reading time.

const wordsArray = articleText.split(' ');

This line is to put all the text from the post content to an array.

const wordCount = wordsArray.length;

This array is to count the words.

const wordsPerMinute = 200;

This line is to have the reading time, I stipulate a number of words that people usually read in a minute. You definitely can change this 200 number.

const readingTime = Math.ceil(wordCount / wordsPerMinute);

This line is the formula to calculate the minute.

time.innerHTML = `${readingTime} MIN`;

This line will help to pass the number that the formula figure out to the section where we set to display the number in the previous view.

MIN is just the text I added to display along with the number as the unit of time.

We’ve done it with JavaScript.

Now, move down to assign this view to the post where I did for the previous view.

Notice that we should choose the position as ‘After the post content’. The reason is that this script has to get all the post content, so the post content must be loaded first, then the script. If the script runs first, it will get nothing because there is nothing from the post content loaded.

This also is the reason that I have two views to set the reading time: one for displaying area, one for calculating.

Now, go to a singular page, you will see the reading time displayed.

Go to another post, you also can see that the number has also changed. It means that each post will have its own number of reading time based on its number of words.

3. Styling the section for reading time

If you want to make the reading time display with a better look, go back to one of the views, and add some CSS.

Back to the page on frontend, the new look has been done.