[Resolved] Show Reading time on WP Show Posts (home page)

Try this one.

<?php
    global $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 = ceil( $word_count / $wpm );

    echo '<div class="read-time">'.$time.' Min. Read</div>';
?>

See it demo-ed here – https://dev-generate-press.pantheonsite.io/wp_show_posts-id7/

Try adding this CSS:

/*border radius*/
section:not(#wpsp-18217)  .wp-show-posts-inner {
    border-radius: 10px;
    overflow: hidden;
}

section:not(#wpsp-18217) .wpsp-content-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/**/
section:not(#wpsp-18217) .wp-show-posts-entry-meta{
    margin-right: auto;
}

.read-time {
    font-size: .8em;
}

Let me know if i missed any styling.

No problem. 🙂

Hi there,

These aren’t WPSP listings so the hook won’t work for these.

You should post this on your theme’s support forum to ask which hooks to use as they’ll know more about the ins and outs if their theme. 🙂

To help out, check GP’s hook visual guide.
https://docs.generatepress.com/article/hooks-visual-guide/

Although, I think if you want to make it display inline w/ the Read more button, you may have to filter the read more button output instead. 😀

Remove the current hook you have for the theme and try this:

add_filter( 'generate_content_more_link_output', function($output){

	$output = sprintf(
				'<p class="read-more-container"><a title="%1$s" class="read-more content-read-more" href="%2$s" aria-label="%4$s">%3$s</a></p>',
				the_title_attribute( 'echo=0' ),
				esc_url( get_permalink( get_the_ID() ) . apply_filters( 'generate_more_jump', '#more-' . get_the_ID() ) ),
				__( 'Read more', 'generatepress' ),
				sprintf(
					/* translators: Aria-label describing the read more button */
					_x( 'More on %s', 'more on post title', 'generatepress' ),
					the_title_attribute( 'echo=0' )
		)
	);

    global $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 = ceil( $word_count / $wpm );

	$output = '<div class="read-more-with-time">'.$output.'<div class="archive-read-time">'.$time.' Min. Read</div></div>';

    return $output;
},10,1);

And then style it with this CSS:

.read-more-with-time {
    display: flex;
    justify-content: space-between;
}

Result on page – https://share.getcloudapp.com/xQujxmx4

Ah I see. I may have missed the manual excerpt.

This one should do it.

add_filter( 'generate_excerpt_more_output', 'add_read_time_to_read_more', 10, 1 );
add_filter( 'generate_content_more_link_output', 'add_read_time_to_read_more', 10, 1 );

function add_read_time_to_read_more($output){

    global $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 = ceil( $word_count / $wpm );

    $output = '<div class="read-more-with-time">'.$output.'<div class="archive-read-time">'.$time.' Min. Read</div></div>';

    return $output;
}

Ah my bad.

You have to completely replace the one provided here – https://wpshowposts.com/support/topic/show-reading-time-on-wp-show-posts-home-page/page/2/#post-35456

With the one provided here – https://wpshowposts.com/support/topic/show-reading-time-on-wp-show-posts-home-page/page/2/#post-35481