How can additional content be included in each grid (post) on the home page?

Hi there,

you can use Hooks to add / change code without editing the themes files - so theme updates will not affect them.

Filter Hooks allow you to 'change' existing code. Couple of relevant examples:

1. Tom provides a filter for post date to include his Reading Time Function:
https://generatepress.com/forums/topic/creating-an-estimated-reading-time/#post-645367

2. This doc provides the filter for the Read More button container which could be used to add your image:

https://docs.generatepress.com/article/generate_content_more_link_output/

Instead of a Filter Hook you can use Action Hooks to insert new code, which can be also be accessed using the Hook Element.

Question is how do you intend to add your 'reade more' images to your Post ? Will you be using Custom Fields?

Thanks David. Questions below.

The example of reading time is great although the requirement is to add it above entry title.

According to the documentation https://docs.generatepress.com/article/generate_before_entry_title/, it suggest using hooks. If yes, can this be added verbatim?

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 );
    
    if ($time == 1) {
        return $time . ' minute';
    } else {
        return $time . ' minutes';
    }
}

add_filter( 'generate_before_entry_title', function( $output ) {
    $output .= '<div class="read-time">Reading time: ' . tu_estimated_reading_time() . '</div>';

    return $output;
} );

The requirement to add the image should be clarified. It isn't to include it as part of the "Read More" button instead to the right of the button so it appears adjacent to it.

Does this change the instructions?

Almost :)
generate_before_entry_title is an Action Hook so instead of:

add_filter( 'generate_before_entry_title', function( $output ) {
    $output .= '<div class="read-time">Reading time: ' . tu_estimated_reading_time() . '</div>';

    return $output;
} );

you would do:

add_action( 'generate_before_entry_title', 'tu_estimated_reading_time', 10);

Action hooks are fairly straight forward, first declare the Hook, the the function callback and then ( optional ) the priority. So Action Hooks can have multiple functions called from them, the lower the priority the sooner that function gets called.

For the Read More - i thought it better that it was output within the same wrapper as the Read More button - this will make it a lot easier to align the button and the image.

Hi David,

For the avoidance of doubt, do you mean the code should be introduced as a hook or should it be added to the functions.php file?

For the code above you would add it to your functions.php

The add_action function and the code that the GP Hook Element generates are the same thing.

Thanks David. To be absolutely clear, is the only code that needs to be embedded in the functions.php file as follows? If yes, it does not display the reading time.

add_action( 'generate_before_entry_title', 'tu_estimated_reading_time', 10 );

Hi there,

You also need the tu_estimated_reading_time() function.

So your full code would look like this:

add_action( 'generate_before_entry_title', 'tu_estimated_reading_time' );

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 );
    
    if ($time == 1) {
        return $time . ' minute';
    } else {
        return $time . ' minutes';
    }
}

Let me know if that works or not :)

Thanks Tom. It doesn't. The reading time does not appear on top of entry title.

Let's try this instead:

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 );
    
    if ($time == 1) {
        return $time . ' minute';
    } else {
        return $time . ' minutes';
    }
}

add_action( 'generate_before_entry_title', function() {
    echo tu_estimated_reading_time();
} );

Thanks Tom.

It displays the time now.

Interestingly it also comes across at the top of the post (which although unintended works out).

That code should only make it display above the title of the page.

Hi Tom,

It displays in within the post article at the top as well.

You can see the Hooks positioning here:

https://docs.generatepress.com/article/hooks-visual-guide/

the before_entry_title hook is above the Title on the archive and single post.

You can add a conditional tag to your function like so:

add_action( 'generate_before_entry_title', function() {
    if ( !is_single() ) {
        echo tu_estimated_reading_time();
    }
} );

! = not
So now tu_estimated_reading_time() only gets displayed if you're NOT on a single post.

Hi David,

What is the recommended template tag to call the function within "Elements"?

For example, what template tag should be included with the code below?

<div class="hero-meta">
	{{post_author}} &bull; {{post_date}}
</div>