[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 - 31 through 45 (of 52 total)
  • Author
    Posts
  • #35508
    Charbel
    Participant

    Thank you @Elvin, much appreciated!

    Now it’s working as expected except for the styling:

    11.16.2021-07.30.53

    The Read More is centered, it should remain like before on the left and the read time is correct on the right.

    I used this CSS code:

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

    Please advise?

    Thank You!

    #35510
    elvin
    Moderator

    Would it be fine to remove the ellipsis? (...)

    If yes, try this filter:

    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 );
    	
    	$readtime = '<div class="archive-read-time">'.$time.' Min. Read</div>';
    	
    	$settings = wp_parse_args(
    		get_option( 'generate_blog_settings', array() ),
    		generate_blog_get_defaults()
    	);
    	
    	$output = sprintf(
    		'<p class="read-more-container"><a title="%1$s" class="read-more button" href="%2$s" aria-label="%4$s">%3$s</a></p>%5$s',
    			the_title_attribute( 'echo=0' ),
    			esc_url( get_permalink( get_the_ID() ) . apply_filters( 'generate_more_jump', '#more-' . get_the_ID() ) ),
    			wp_kses_post( $settings['read_more'] ),
    			sprintf(
    				/* translators: Aria-label describing the read more button */
    				_x( 'More on %s', 'more on post title', 'gp-premium' ),
    				the_title_attribute( 'echo=0' ),
    			), 
    			$readtime
    		);
    
        $output = '<div class="read-more-with-time">'.$output.'</div>';
    
        return $output;
    }

    And then add this CSS: ( It’s a slight improvement. I’ve added align-items so the buttton and the read time are vertically aligned)

    .read-more-with-time {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #35512
    Charbel
    Participant

    Thank you so much @Elvin, well done!

    It’s beautifully aligned now… Here you go 🙂

    11.16.2021-08.06.45

    So it’s not possible to keep the ellipsis? (...) It does not make sense, right?
    How the text excerpt looks like after removing the ellipsis?

    Last, is there any performance hit by adding this code and styling it?

    Thank You!

    #35514
    elvin
    Moderator

    It’s pretty tricky to align w/ the way it was addd. But we can try adding it back w/ CSS.

    Can you try this?

    .entry-summary > p:first-child:after,
    .entry-content > p:first-child:after {
        content: '...';
    }
    #35524
    Charbel
    Participant

    Thank You @Elvin,

    I tried the CSS code above, it works for the Archives and Search Results, however, it affected my home page (I saw the directly under the Featured Post), and then I saw the after the first paragraph at the beginning of each and every article (post).

    We are almost there, could please advise if you can customize it further?

    Thanks!

    #35549
    elvin
    Moderator

    This should apply on the Blog index, Archive pages and the search page only –

    body.blog .entry-summary > p:first-child:after,
    body.blog .entry-content > p:first-child:after,
    body.search .entry-summary > p:first-child:after,
    body.search .entry-content > p:first-child:after,
    body.archive .entry-summary > p:first-child:after,
    body.archive .entry-content > p:first-child:after {
        content: '...';
    }
    #35576
    Charbel
    Participant

    Thank you @Elvin, much appreciated!

    You are great. It works now as expected so beautiful 🙂

    One question, what is the Blog index, please?
    I have tested on Archive pages and the search pages and it works.

    Many Thanks, keep up the good work!

    #35583
    elvin
    Moderator

    One question, what is the Blog index, please?

    Blog index page is the default main blog page of WordPress sites. It’s like an archive page but for ALL the posts of the site.

    It’s the “post page” you set on Dashboard > Settings > Reading as shown here – https://share.getcloudapp.com/L1ueDRyd

    #35595
    Charbel
    Participant

    Thank you @Elvin!

    Yes, it’s working too on my Blog page here: https://charbelnemnom.com/blog

    One question please, is the updated CSS code you shared here: https://wpshowposts.com/support/topic/show-reading-time-on-wp-show-posts-home-page/page/3/#post-35549 will show the ellipsis (…) on the WP Show Posts (Home Page) too?
    Because I can see the ellipsis? (…) on the text excerpt, or this is a part of WP Show Posts by default?

    Last, is there any performance hit by adding this code and styling it?

    Many Thanks!

    #35600
    elvin
    Moderator

    Because I can see the ellipsis? (…) on the text excerpt, or this is a part of WP Show Posts by default?

    That’s part of WPSP.

    Last, is there any performance hit by adding this code and styling it?

    It’s very minimal. I don’t think it will have any significant effect as it’s basically just adding ... which won’t effect any metric.

    #35604
    Charbel
    Participant

    Thank you @Elvin, much appreciated!

    #35606
    elvin
    Moderator

    No problem. 😀

    #35838
    Charbel
    Participant

    Hello @Elvin,

    Hope you are doing well.

    I need to come back to this topic, please. If you look at the archive page here: https://charbelnemnom.com/category/microsoft-azure/ and then keep scrolling down.

    You will see that the Read Time is gone and the ellipsis (…) becomes double (6 dots).

    I have a feature enabled (I don’t know what’s called) that when you scroll down for archived pages, more posts will load, however, what we have done above is not applicable in this case.

    Could you please advise?

    • This reply was modified 2 days, 10 hours ago by Charbel.
    #35852
    elvin
    Moderator

    You probably meant the AJAX pagination.

    I’ve checked the page and I didn’t see what you were pertaining to.

    Here’s a recording of what I see when I checked it –
    https://share.getcloudapp.com/E0uKNBkZ

    On the video, I’ve scrolled through the for a whole minute. All the AJAX loaded pages had ellipsis and Read time.

    #35861
    Charbel
    Participant

    Hello @Elvin,

    Thank you for sending the video. This is really weird!

    I’ve just checked now using Google Chrome in Incognito mode and I don’t see the time for the AJAX pagination: https://charbelnemnom.com/category/microsoft-azure/
    Please see the screenshot below. The Read Time is gone and the ellipsis (…) becomes double (6 dots).

    11.29.2021-08.24.05

    Which browser did you use?

Viewing 15 posts - 31 through 45 (of 52 total)
  • You must be logged in to reply to this topic.