How to Add Reading Time to Your Blog Posts using PHP Code
If you would like to add a reading time to your blog posts, you can install and activate the Read Meter plugin, which works just fine.
I was earlier hoping to find a no-plugin solution, and eventually found a way to do it using code.
Unfortunately, it still requires me to download the WPCode plugin to insert the PHP code. So, I still end up with 1 more plugin on my website. :p
This is how it looks.
If you are interested in using a bit of code for the fun of it, here is a step-by-step guide to do so.
Step 1 - Download WPCode Plugin
Install and activate the WPCode plugin
Step 2 - Add the Code
Follow the steps below:
2.1 - Click on Add New
2.2 - Click on "Add Custom Snippet"
2.3 - Select PHP Snippet
2.4 Add a title (e.g. Estimated Reading Time) and code in Code Preview
The full code I used is as follows:
function estimate_reading_duration(){
$content = get_post_field( 'post_content', get_the_ID());
$content = preg_replace('/\[.*?\]/','',$content);
$stripped_content = strip_tags($content,'<p><a>');
$word_count = str_word_count($stripped_content);
$average_reading_speed = 238;
$reading_time = ceil( $word_count / $average_reading_speed);
$label = $reading_time === 1 ? ' min read' : ' mins read';
return '<span class="reading-time">' . $reading_time . $label . '</span>';
}
add_shortcode( 'read-estimate', 'estimate_reading_duration' );
the
2.5 - Select Auto Insert and Location 'Run Everywhere'.
In the Insertion section, click on Auto Insert and for Location, choose 'Run Everywhere'. Click on 'Save Snippet' on the top right.
2.6 - Add Shortcode [read-estimate]
I used the GeneratePress Premium theme, so I used Block Elements to apply this shortcode.
As shown below, one interesting decoration is that I can add a Clock emoji in the shortcode.
2.7 - Go to Customizer to add CSS
Add the Additional CSS below to style your reading time. You can change to your brand colours accordingly.
.reading-time {
display: inline-block;
background-color: #AE9672; /* Background colour */
color: #FFFFFF; /* Text Color*/
padding: 4px 8px;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 600;
}
Once the above is done, you should see the reading time appearing in your blog posts.
Hope this is useful to you!
Regards,
Richard
p.s. Special thanks to Phil (@feigner), Andrej (@apache1) and Richard (@richardgb) for your inputs.
Recent Comments
7
A plugin is the best method because when WordPress updates, so do themes and plugins to stay on top of security. If you hand-code it, the next theme update, you will need to hand-code it again. With a plugin, you never have to update that code again.
Hi Richard. It's good to see you using WPCode. You can use it for many functions. I see that the code you found requires insertion of shortcode and CSS.
If you want to try it, I can give you code that neither needs a short code nor CSS.
Let me know if you want it.
;-)
Richard
Here's the code: Estimated reading time: ' . $reading_time . ' Min
function add_reading_time_to_posts( $content ) {
if ( is_single() && is_main_query() ) {
$reading_speed = 250; // words per minute
$word_count = str_word_count( strip_tags( $content ) );
$reading_time = ceil( $word_count / $reading_speed );
$reading_text = '
return $reading_text . $content;
}
return $content;
}
add_filter( 'the_content', 'add_reading_time_to_posts' );
There are pros and cons of course:
The advantage of a shortcode is that you can place it anywhere.
But if you want to delete the shortcode you'll need to visit every site.
Also, there's slightly more processing going on with the shortcode.
This code should add the Estimated reading time at the top of your text and beneath a featured image.
It should work with any theme.
If you try it, make sure you have a copy of the old version in case you need it.
;-)
Richard
I place the shortcode in the Block Element using GeneratePress theme, because that Block Element also Author, Published Date, Comment and Last Updated date. I put the shortcode right below this line. :)
Let me test this out too. :)
Thank you so much, Richard!
See more comments
Great advice here my friend, appreciate the share! :-)