[Resolved] Update + Published + reading time + Author

[Mathieu]

Hi there,

I’m trying to add at the beginning of my blog content the following informations: “Updated date + Published date + reading time + Author”, exactly as shown in this topic.

For this reason, I got the following code that I added to Code Snippets :

add_filter( 'generate_post_date_output', function( $output, $time_string ) {
	
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Published on %2$s</time>';

if ( get_the_date() !== get_the_modified_date() ) {
	$time_string = '<time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">Updated: %4$s</time>
	<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Published: %2$s</time>';
}

$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);

return sprintf( '<span class="posted-on">%s</span> ',
$time_string
);
}, 10, 2 );

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

    return $time . ' mins';
}

add_filter( 'generate_post_date_output', function( $output ) {
    $output .= '~' . tu_estimated_reading_time() . ' to read';

    return $output;
} );

But then I’m getting lost : nothing is displayed on my articles.
How to indicate that the PHP code must be displayed at this precise place ?

Should I use “elements” >> Hook ?

Many thanks !
Mathieu

[David]

Hi there,

that code has to be added using one of the method in this doc:

https://docs.generatepress.com/article/adding-php/

TLDR: Are you using a Child Theme?
If Yes, then the code goes in your Child Theme functions.php file
If No, then install the Code Snippets plugin and add the code to a New code snippet.

[Mathieu]

Hi David,

Thanks for your answer.
Code has been added using “Code Snippets plugin” as recommanded in your method

I’m not using any child theme.
Please check screenshot in private information if you want to check

Thanks !

[David]

Aah sorry – i should have checked your URL.
Can you remove that PHP Code as that will only apply to the standard theme templates.
Then:

1. Add this PHP Snippet to create a Shortcode called [tu_reading_time] which can be used to display the 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');

2. Go to Appearance > Elements and edit the Element titled: Single Post Hero

2.1 You need to add a Headline Block, for each of the dynamic data options. Published Date, Updated Date and Author. And i1 more for the read time which you will add the [tu_reading_time] shortcode,

[Mathieu]

Thanks David !
Works great, i can get all datas i wanted. Only thing is that shortcode for “reading time” do not use same CSS, so font-size for example is different.

How am i suppose to have the same font-size for “reading time” than “update or publish date” ?
(sent you the link on private info)

[Ying]

Hi Mathieu,

You can select the container block and set the font size there, so the text inside the container can inherit the font size from the container.

[Mathieu]

Thanks David, thanks Ying for your precious help 🙂
Best support ever !

[Ying]

You are welcome 🙂

[Author]

Posts