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

Home Forums Support [Resolved] How can additional content be included in each grid (post) on the home page?

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1238074
    Anonymous

    The “Split” site library features posts on the home page.

    If there is a requirement to include additional content such as an image that is right aligned to the “Read More” button, how can this be added? Each image would vary between posts.

    If there is a requirement to include a header for each grid (post) on the home page that includes text such as “Reading time”, how can this be added? Each heading title would differ.

    Lastly, assuming these can be added, how does it affect future updates to the GeneratePress themes or plugins?

    #1238364
    David
    Staff
    Customer Support

    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?

    #1239104
    Anonymous

    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?

    #1239280
    David
    Staff
    Customer Support

    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.

    #1239447
    Anonymous

    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?

    #1239645
    David
    Staff
    Customer Support

    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.

    #1240544
    Anonymous

    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 );

    #1240918
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #1241038
    Anonymous

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

    #1241829
    Tom
    Lead Developer
    Lead Developer

    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();
    } );
    #1242016
    Anonymous

    Thanks Tom.

    It displays the time now.

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

    #1242218
    Tom
    Lead Developer
    Lead Developer

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

    #1242272
    Anonymous

    Hi Tom,

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

    #1242589
    David
    Staff
    Customer Support

    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.

    #1246054
    Anonymous

    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>
Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.