Site logo

Archived topic

Read time for a blog post

19 replies · Started by June on October 18, 2021

Viewing posts 16–20 of 20

With the author link, this gets tricky.

I think the better solution would be create a shortcode for the estimated reading time, then use a shortcode block to insert it after the author headline in the block element.

So disable the PHP code I provided before, and use this PHP code to create a shortcode:[tu_reading_time]

function tu_estimated_reading_time() {
    ob_start();
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.

    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $time ='<div class="read-time"><span class="gp-icon">•</span>Reading time: '. ceil( $word_count / $wpm ) . ' minutes'. '</div>';

    return  $time; 
    return ob_get_clean();
}

add_shortcode('tu_reading_time', 'tu_estimated_reading_time');

You can insert it like this:
https://www.screencast.com/t/jV1VZFk4X

Let me know when it's done, and please disable the CSS I provided before, so I can see how to write the new CSS :)

Thank you, Ying :) Its done. We can proceed with CSS.

Try this CSS:

@media (min-width: 548px) {
    .blog .read-time, .archive .read-time {
        padding-left: 11px;
    }
}
.read-time .gp-icon{
    padding-right: 0.5em;
}
.single-post .read-time {
    padding-left: 10px;
}

The text style can be set at the Container level of the block element - content template for single posts.

PERFECT!!!!!!! Thank you so very much, Ying
Exactly how I wanted it. I really really loved the support. Thanks once again :D

You are welcome, glad to help!

This archived topic is closed to new replies.