How to Display Post Estimated Reading Time and Word Count in Divi (with ReadingTime.js)

Posted on October 27, 2020 by in Divi Resources | 11 comments

How to Display Post Estimated Reading Time and Word Count in Divi (with ReadingTime.js)

Some people (including me) appreciate a little heads up on the length of a blog post or, more importantly, how much time is it going to take to read. A great way to do this is to display an estimated reading time and/or word count at the top of your blog posts. You see this feature on popular blogs like medium.com. It doesn’t have to be intrusive or distract the user from engaging with the content. But it can add a nice UX boost for those who spend a lot of time devouring content on the web.

In this tutorial, we are going to show you a quick and easy way to add an estimated reading time and word count to your Divi blog posts. The readingTime.js library we are going to use is simple, lightweight, and easy to implement on your Divi site. Plus you can have more control over the style and placement of the reading time and word count placement. All this without having to rely on another plugin!

We’ll be adding the estimated reading time and word count to a blog post template using the Divi Theme Builder. So, once it is added to the template, the reading time and word count will display nicely on all your posts throughout your site.

Let’s get started.

Sneak Peek

Here is a quick look at the reading time and word count we’ll be adding to a post template in Divi.

post estimated reading time and word count

post estimated reading time and word count

post estimated reading time and word count

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

How to Upload The Template

Go to Divi Theme Builder

To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

blog post template for Divi's Copywriter Layout Pack

Upload Website Template

Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

blog post template for Divi's Copywriter Layout Pack

Navigate to the import tab, upload the JSON file which you were able to download in this post, and click on ‘Import Divi Theme Builder Templates’.

blog post template for Divi's Copywriter Layout Pack

Save Divi Theme Builder Changes

Once you’ve uploaded the file, you’ll notice a new template with a new body area that has been assigned to All Posts. Save the Divi Theme Builder changes as soon as you want the template to be activated.

divi Copywriter blog post template

Let’s get to the tutorial so we can learn to build this thing from scratch, shall we?

How to Display Post Estimated Reading Time and Word Count in Divi

What You Need to Get Started

To get started, you will need to do the following:

  1. Navigate to the Divi Theme Builder
  2. Click the portability icon at the top right of the page.
  3. Select the Import tab in the Portability popup.
  4. Choose/Import the Divi Business Consultant Post Template File (download here).
  5. Click the Import Button

After that, you will have a post template ready to edit.

post estimated reading time and word count

Adding the Text/HTML to the Post Template

To edit the post template, click the edit icon on the custom body area.

post estimated reading time and word count

In the post layout editor, add a new one-column row under the row containing the post meta data in the top section of the layout.

post estimated reading time and word count

Once done, add a text module to the new row.

post estimated reading time and word count

In the text module settings, paste the following HTML inside the body (using the text tab):

<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>

post estimated reading time and word count

The important thing to remember is that the span tag with the class “eta” will eventually display the estimated reading time of the post content. And the span tag with the class “word-count” will display the word count of the post content.

post estimated reading time and word count

Styling the Reading Time Text

Under the design tab, update the text styles as follows:

  • Text Font: Poppins
  • Text Font Weight: Bold
  • Text Font Style: TT
  • Text Text Color: #ffffff
  • Text Text Size: 14px (desktop), 12px (phone)
  • Text Letter Spacing: 2px
  • Text Alignment: center

post estimated reading time and word count

Styling the Row

Once the text settings are complete, open the settings for the row and update the following:

  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%

post estimated reading time and word count

In the Advanced Tab, update the position:

  • Position: Absolute
  • Location: bottom left

post estimated reading time and word count

Adding the Code

To add the necessary code to generate the estimated reading time and word count, first, add a code module under the text module.

post estimated reading time and word count

We are going to use the readingtime.js library with some custom code to target our post content area, reading time target class eta, and word count target class word-count.

Paste the following code in the code block making sure to wrap the code in the script tags:

(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'), 
wordsPerMinute: 275,
lang: 'en',
});
}); 
})( jQuery );

About the Code

The target class et_pb_post_content is what is used to designate the post content area in Divi that holds the post content so the code knows the text it needs to count and estimate reading time. For example, if you used body as the target, the code would calculate all content/text on the entire page, not just the content of the article.

The readingTimeTarget is assigned to the class eta which corresponds to the class we added to the span tag in the text module. And the wordCountTarget is assigned to the word-count class we add to the other span tag in the text module.

Also, feel free to update the words per minute value (currently 275) to represent what you think it should be. This will of course affect the reading time displayed. From what I’ve researched, the average adult reads about 300 words per minute. Plus you can always update the language value as well. For example, you can replace ‘en’ for ‘fr’ if you want the text displayed in French). For more info you can check out the documentation on github.

post estimated reading time and word count

Save the Template layout and Theme Builder.

Then, navigate to Divi > Theme Options > Integrations.

Then add the library to the header area with the script tags:

src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"

post estimated reading time and word count

It should look like this…

post estimated reading time and word count

Final Result

Now all you need to do is visit a live blog post on your site to see the estimated reading time and word count at the top of the post content.

post estimated reading time and word count

post estimated reading time and word count

post estimated reading time and word count

Final Thoughts

Adding a post estimated reading time and word count to your Divi blog posts is surprisingly easy. Plus you can choose where you want the element displayed on your post template and style it using the built-in Divi design settings. Hopefully, this will come in handy!

I look forward to hearing from you in the comments.

Cheers!

Premade Layouts

Check Out These Related Posts

11 Comments

  1. Screenshot shows the clear demo how to set the word count

    • Yeah, I was hoping that would clear things up a bit. Thanks

  2. Thanks Jason!!
    It works with Divi as well as with Extra.
    Super happy with this! Much more flexible than the reading time plugin.
    Being a newbie I had to do some trial and error though:
    – missing quotes (“) at the end of the (Divi > Theme Options > Integrations) script piece. Just check the picture for how it should look like.
    – figuring out how to put the other code in script tags
    – removing the word count part (which I don’t need) For who wants that: just remove the HTML word count part in the text module so it looks like this: Reading Time:
    So I learned new things. And it works!

    • Thanks for pointing out the missing quote. I updated the post. And I’m glad you got it working and learned something!

  3. This is a great enhancement to blog posts and something I miss when reading a blog that doesn’t incorporate it.

  4. Very nice! Will definitely try it this week and hope it will work well with our blog.

  5. You have provided a great information and included a great review.Every time you comes up with an ideas that truly helpful in every aspect and every time i gain helpful ideas through your post.

  6. Great, but made the sticky menu background invisible.

    Could you also add the script around the code (usability) as not everyone is a developer. cheers

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest