Home › Forums › Support › How can additional content be included in each grid (post) on the home page?
- This topic has 19 replies, 3 voices, and was last updated 3 years, 11 months ago by David.
-
AuthorPosts
-
April 13, 2020 at 8:33 pm #1238074Anonymous
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?
April 14, 2020 at 3:30 am #1238364DavidStaffCustomer SupportHi 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-6453672. 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?
April 14, 2020 at 12:00 pm #1239104AnonymousThanks 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?
April 14, 2020 at 4:11 pm #1239280DavidStaffCustomer SupportAlmost ๐
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.
April 14, 2020 at 9:08 pm #1239447AnonymousHi 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?
April 15, 2020 at 2:25 am #1239645DavidStaffCustomer SupportFor 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.April 15, 2020 at 11:15 am #1240544AnonymousThanks 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 );
April 15, 2020 at 8:32 pm #1240918TomLead DeveloperLead DeveloperHi 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 ๐
April 15, 2020 at 11:51 pm #1241038AnonymousThanks Tom. It doesn’t. The reading time does not appear on top of entry title.
April 16, 2020 at 9:17 am #1241829TomLead DeveloperLead DeveloperLet’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(); } );
April 16, 2020 at 12:04 pm #1242016AnonymousThanks Tom.
It displays the time now.
Interestingly it also comes across at the top of the post (which although unintended works out).
April 16, 2020 at 3:53 pm #1242218TomLead DeveloperLead DeveloperThat code should only make it display above the title of the page.
April 16, 2020 at 5:27 pm #1242272AnonymousHi Tom,
It displays in within the post article at the top as well.
April 17, 2020 at 2:32 am #1242589DavidStaffCustomer SupportYou 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 nowtu_estimated_reading_time()
only gets displayed if you’re NOT on a single post.April 19, 2020 at 8:56 pm #1246054AnonymousHi 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}} • {{post_date}} </div>
-
AuthorPosts
- You must be logged in to reply to this topic.