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

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Show Reading time on WP Show Posts (home page)

Viewing 15 posts - 16 through 30 (of 52 total)
  • Author
    Posts
  • #35257
    elvin
    Moderator

    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/

    #35269
    Charbel
    Participant

    Hello @Elvin,

    Finally, now it’s working 🙂 Thank You!

    We just need to adjust the font and alignment, please.

    2) I would like to inherit the Author’s exact font size, type, and density. The time for the font is big now.
    3) Next, I want to align the display output for the time on the right-hand side and NOT under the Author’s name. Author’s name on the left and time on the right (same line).

    I have cleared the cache, so you could see it from your side to develop the right CSS code.

    Since now we working on the design, would be possible please to round all the WP Show Posts border a bit by 3 or 5?

    Thank You, Elvin!

    #35271
    elvin
    Moderator

    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.

    #35273
    Charbel
    Participant

    Thank you @Elvin, much appreciated!

    You nailed it 🙂

    I’ll get back to you if I need further assistance.

    Many Thanks!
    -Charbel

    #35275
    elvin
    Moderator

    No problem. 🙂

    #35436
    Charbel
    Participant

    Hello @Elvin, hope you are doing well.

    I am looking to include the Read Time under the author and search results page:

    https://charbelnemnom.com/author/charbel-nemnom/

    https://charbelnemnom.com/?s=sftp

    I have tried to add a new location rule on the same Element (Custom Hook) that we created above such as Author Archives, Search Results, and All Archives but the Read Time is not getting displayed.

    How this can be accomplished, please?

    Thank You!

    #35446
    elvin
    Moderator

    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. 🙂

    #35450
    Charbel
    Participant

    Thank you @Elvin for the update!

    I am using the GeneratePress theme 🙂 I will post it on the support forum there.

    Many Thanks!

    #35452
    elvin
    Moderator

    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. 😀

    #35454
    Charbel
    Participant

    Thank you @Elvin, much appreciated!

    I succeeded to create a new Element hook with the “generate_after_content” and display rules set to All Archives and Search Results.

    As you noted, the display is shown below the Read more button. How to filter read more button output as you noted above?

    Could you please provide more details?

    Here is the code I used, I created a new div class so we can style it with CSS code if needed.

    <?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="archive-read-time">'.$time.' Min. Read</div>';
    ?>

    Thank You, Elvin!

    #35456
    elvin
    Moderator

    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

    #35458
    Charbel
    Participant

    Thank you @Elvin, much appreciated!

    You are up to the challenge 🙂

    I have exactly copied the code above and added it to my functions.php child theme, as well as the CSS code.
    I was able to save the code without any syntax error.

    I don’t see the Read time is showing neither on the archive page nor under the search results.
    On the screenshot you shared above, it’s showing.

    Could you please advise?

    Thank You!

    • This reply was modified 2 weeks, 1 day ago by Charbel.
    #35481
    elvin
    Moderator

    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;
    }
    #35504
    Charbel
    Participant

    Thank you @Elvin,

    Shall I add (combine) both codes or the latest one you shared above?

    First, https://wpshowposts.com/support/topic/show-reading-time-on-wp-show-posts-home-page/page/2/#post-35456
    +
    Second, https://wpshowposts.com/support/topic/show-reading-time-on-wp-show-posts-home-page/page/2/#post-35481

    I am confused.

    Could you please advise?

    #35506
    elvin
    Moderator
Viewing 15 posts - 16 through 30 (of 52 total)
  • You must be logged in to reply to this topic.