Providing a number of reading time will help the visitor know in advance how much time it takes to finish reading the post. It might be a key feature to improve the user experience. 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.

An example for a number of reading time

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.

Before Getting Started

In this practice, we need the Meta Box core plugin to create custom fields. You can install it directly from wordpress.org.

Along with that, we also need the MB Views to create a template to display the reading time number.

Set 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.

The time information in the top section of the post

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

Go to Views, and create a new template for displaying time position

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>

In the Template tab, add some lines of code

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.

Assign this template to the posts

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

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.

The icon appearing from this template on the posts without the reading time number

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

Calculate 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.

Go 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`;

Add some lines of code in JavaScript

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.

An object to connect with the ID that we created 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.

This is where we set to display the reading time number

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.

Assign this view to the post

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

Go to a singular page, 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.

Go to another post, the number has also changed

Style 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.

Add CSS to make the reading time display with a better look

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

This is final look of reading time section

Last Words

Hopefully, this tutorial will give you a hand in creating reading time on your site no matter what theme or builders using MB Views from Meta Box.

In the case that you want to show the simple reading progress bar at the top of the singular page of each blog post to let the visitors know how much they have read and how much is left after all, this tutorial is useful for you.

Let’s try and enjoy it. If you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Thanks for reading!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Custom Fields to Products in WooCommerce - Using Meta Box and Bricks
  13. How to Add Guest Authors and Guest Posts - Using Meta Box
  14. How to Add Related Posts - Using Custom Fields
  15. How to Build a Hotel Booking Website Using Meta Box - P1
  16. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  17. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  18. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  19. How to Create a Classified Ads Website using Meta Box
  20. How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
  21. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  22. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  23. How to Create a Product Page - P3 - Using Meta Box and Bricks
  24. How to Create a Product Page - P4 - Using Meta Box and Elementor
  25. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  26. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  27. How to Create a Product Page - P7 - Using Meta Box + Kadence
  28. How to Create a Product Page - P8 - Using Meta Box and Brizy
  29. How to Create a Product Page - P9 - Using Meta Box and Divi
  30. How to Create a Product Page using Meta Box Plugin
  31. How to Create a Reading Progress Bar in WordPress Posts - P1 - Using MB Views
  32. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  33. How to Create a Recipe - P3 - Using Meta Box and Elementor
  34. How to Create a Recipe - P4 - Using Meta Box and Bricks
  35. How to Create a Recipe - P5 - Using Meta Box and Zion
  36. How to Create a Recipe - P6 - Using Meta Box and Brizy
  37. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  38. How to Create a Recipe - P8 - Using Meta Box and Kadence
  39. How to Create a Recipe - P9 - Using Meta Box and Divi
  40. How to Create a Recipe with Meta Box Plugin
  41. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  42. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  43. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  44. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  45. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  46. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  47. How to Create a Team Members Page - P4 - Just Meta Box
  48. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  49. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  50. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  51. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  52. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  53. How to Create a Video Gallery Page - P5 - Using MB Views
  54. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  55. How to Create a Video Gallery Page Using Meta Box + Oxygen
  56. How to Create ACF Flexible Content Field with Meta Box
  57. How to Create an Auto-Updated Cheat Sheet in WordPress
  58. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  59. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  60. How to create an FAQs page - P4 - Using Meta Box and Bricks
  61. How to Create an FAQs Page - P6 - Using MB Views
  62. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  63. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  64. How to Create an FAQs Page - P9 - Using MB Blocks
  65. How to Create an FAQs Page -P3- Using Meta Box
  66. How to Create Buttons with Dynamic Link using Custom Fields
  67. How to Create Category Thumbnails & Featured Images Using Custom Fields
  68. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  69. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  70. How to Create Download and Preview Buttons - P3 - Using MB Views
  71. How to Create Download Buttons in WordPress - Using Custom Fields
  72. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  73. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  74. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  75. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  76. How to Create Notification Using Custom HTML Field
  77. How to Create Online Admission Form for School or University
  78. How to Create Online Reservation Form for Restaurants using Meta Box
  79. How to Create Reading Time to Your WordPress Posts - Using MB Views
  80. How to Create Relationships - P1 - Using Meta Box and Oxygen
  81. How to Create Relationships - P2 - Using Meta Box and Bricks
  82. How to Create Relationships - P3 - Using MB Views
  83. How to Create Relationships - P4 - Using Meta Box and Breakdance
  84. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  85. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  86. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  87. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  88. How to Display a Video Playlist - P1- Using MB Views
  89. How To Display All Listings On A Map With Meta Box
  90. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  91. How to Display Author Bio in WordPress - P2 - Using MB Views
  92. How to Display Dynamic Banners in WordPress - P3 - Using MB Views
  93. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  94. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  95. How to Display Images from Cloneable Fields - P3 - with Elementor
  96. How to Display Images from Cloneable Fields - P4 - with Bricks
  97. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  98. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  99. How to Display Product Variations - P1 - Using Meta Box and Gutenberg

1 thought on “How to Create Reading Time to Your WordPress Posts - Using MB Views

Leave a Reply

Your email address will not be published. Required fields are marked *