How to add a reading time and a number of views to your blog posts?

You may have noticed the little bar at the end of Divi Tips articles? In this bar, you'll find the number of words in the article, the reading time, the number of views and a clapping system.

I recently sent you an email (newsletter with the sign-up form in the sidebar of this article) asking if you would be interested in learning how to add this data to your articles. You were quite enthusiastic! So here is my answer...

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - Counting words and reading time with WP Word Count

WP Word Count is a free extension (freemium) and lightweight available on the official WordPress extensions directory.

Its settings are easy to make. After installing and activating the extension, here is what you need to do:

1. Go to the Word Count > Calculate tab.
2. Click on "Calculate Word Count" and wait. The extension will retrieve the number of words in your posts.
3. Then, from the Reading Time tab, you can enter how many words correspond to one minute of reading. By default, 250 words are equivalent to 1 minute of reading.
4. You can activate the automatic display of the reading time within your publications by simply checking the box provided for this purpose (not useful for the rest of the tutorial).
5. You can also insert a text that will be placed before and/or after the playback time.

Finally, in the other tabs (Top Content, All Content...), you will find statistics: how many articles, how many pages, how many words, the total reading time, etc.

2 - Display the number of views of an article with Post Views Counter

Post Views Counter is also a free plugin and easy to set up. The nice thing about this plugin is that you can display or not the number of views in a public way. This means that you can install Post Views Counter for statistical purposes in the back office.

Once the extension is installed and activated, you will find its settings options in the Settings > Post Views Counter tab. Its settings are separated in 2 tabs: General and View.

1. You can activate the counting of views according to publication types. Just check it. You can also decide on the counting method (PHP, JS, etc.).
2. You can add a new column in the back office. It will appear in the list of articles (and/or pages, depending on your choices) in order to obtain the statistics of views per publication.
3. You can adjust the frame counting methods and intervals.
4. You can exclude certain visitors from the count.
5. Then, from the View tab, you can set up anything that has to do with the display of the number of views at the front. For example, you can add a text next to the number of views.
6. You can automatically insert the number of views according to the type of publication (not useful for the rest of the tutorial).
7. But also the position of the automatic display, for example: before the content.
8. Finally, you can choose whether or not to display an icon next to the number of views and you can change the the Dashicons icon, which is the official WordPress icon font.

That's it, it's a pretty simple extension but the options are enough to enhance your blog posts.

3 - Adding applause with WP Applaud

The last element I suggest you add to your articles is a voting system with WP Applaud. But you could have chosen a star system like KK Star Ratingfor example.

This extension is free but, let's say it right away, it is not often updated...

Once installed and activated, it works as follows:

1. Go to the WPApplaud tab to check the types of publications on which you want the "little clap" to appear.
2. You can exclude publications manually.
3. You can disable CSS to embed your own.
4. You can choose the counting method (Ajax and maximum count per user).
5. You have the possibility to add customised titles.
6. Finally, and this is what interests us most for the rest of the tutorial: the other display methods. You can use a shortcode to display the clap at the desired location rather than automatically.

4 - Integrating elements into blog posts with the Theme Builder

Now that you have installed and configured the 3 extensions, I suggest you display this reading information in your blog posts.

For this you will need a article template created with the Theme Builder. If you haven't already done so, you can follow this tutorial to create a Divi article template.

So you see, you either create or modify your article template created with the Theme Builder.

You add a new row (the green "+") split into 4 columns.

In each column of this row, you add a text module in which you place the appropriate shortcodes:

• [ wp-word-count ]* to display the number of words.
• [ wp-word-count-reading-time ]* to display the reading time.
• [ post-views ]* to display the number of views.
• [ wp_applaud ]* to display the voting system.

*Note: do not copy and paste the above shortcodes as I have deliberately added a space between the square brackets to allow them to be displayed.

It's as simple as that, here is the result:

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

5 - Adjusting the display with a little CSS

Finally, it is possible that you are not entirely satisfied with the final rendering, in which case you can add some CSS code to perfect the display.

In the following example, I have added a Code module with a little CSS but you have many more solutions for adding code to Divi.

For example, you can add a "before " and an "after " to display text around the reading time. This is possible in the options of the WP Word Count plugin but the visual is not optimal... You can also change the colour of the vote counter (WP Applaud)...

So, how about these tips for enhancing your blog posts with Divi?