- This topic has 5 replies, 3 voices, and was last updated 3 years, 1 month ago by Elvin.
-
AuthorPosts
-
February 4, 2021 at 3:59 am #1645340antware
Hi Tom, Dave and Leo, how would I add the post excerpt below the post title in the Post Navigation that appears at the bottom of single post pages?
Currently it shows just the post title with an arrow pointing back if previous post and forward if next post.
Thanks in advance you guys are great.
February 4, 2021 at 11:08 am #1645989TomLead DeveloperLead DeveloperHi there,
Something like this would require you to disable the default pagination and add your own custom code via a hook.
Do you have a specific example/design in mind? We may be able to point you in the right direction.
February 4, 2021 at 12:10 pm #1646048antwareHi Tom, I’ve sent through a Google Drive link to a screengrab of what my UX designer is wanting and then a link to the dev site with what I’ve done thus far. (In the Private Area)
February 4, 2021 at 9:05 pm #1646381ElvinStaffCustomer SupportHi there,
To add to Tom’s suggestion, Here’s one:
Site Library’s Dispatch template has a custom post navigation hooked to
generate_after_content
in it.We can reuse and modify it a bit to add our custom excerpt.
Here’s a sample code:
<div id="post-nav"> <?php global $post; $prevPost = get_previous_post(false); $post_type = get_post_type(); if ( $prevPost ) { $args = array( 'posts_per_page' => 1, 'include' => $prevPost->ID, 'post_type' => $post_type, ); $prevPost = get_posts($args); foreach ($prevPost as $post) { setup_postdata($post); ?> <a class="post-previous" href="<?php the_permalink(); ?>"> <div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.1),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');"> <div class="post-nav"><?php _e( 'Previous', 'generatepress' ); ?></div> <h3 class="post-nav-title"><?php the_title(); ?></h3> <div class="post-nav-excerpt"> <?php echo wp_trim_words(get_the_content(), 40).'...'; ?> </div> </div> </a> <?php wp_reset_postdata(); } //end foreach } // end if $nextPost = get_next_post(false); if ( $nextPost ) { $args = array( 'posts_per_page' => 1, 'include' => $nextPost->ID, 'post_type' => $post_type, ); $nextPost = get_posts($args); foreach ( $nextPost as $post ) { setup_postdata($post); ?> <a class="post-next" href="<?php the_permalink(); ?>"> <div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.6),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');"> <h3 class="post-nav-title"><?php the_title(); ?></h3> <div class="post-nav-excerpt"> <?php echo wp_trim_words(get_the_content(), 40).'...'; ?> </div> <div class="post-nav"><?php _e( 'Next', 'generatepress' ); ?></div> </div> </a> <?php wp_reset_postdata(); } //end foreach } // end if ?> </div>
I’ve modified this a bit to include the excerpt by adding:
<div class="post-nav-excerpt"> <?php echo wp_trim_words(get_the_content(), 40).'...'; ?> </div>
Here’s the CSS that comes with it: (you can edit this to match your preferred styling)
/* Post Navigation */ #post-nav a { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 768px) { #post-nav a { -webkit-box-flex: 1; -ms-flex: 1 0 100%; flex: 1 0 100%; } } #post-nav, #post-nav .post-nav-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; -webkit-box-sizing: border-box; box-sizing: border-box; } #post-nav { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 60px; } #post-nav .post-nav-wrap { background-size: cover !important; background-position: center center !important; min-height: 120px; height: 100%; padding: calc(6% + 1em) 5%; -webkit-box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5); box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5); -webkit-transition: -webkit-box-shadow 500ms; transition: -webkit-box-shadow 500ms; transition: box-shadow 500ms; transition: box-shadow 500ms, -webkit-box-shadow 500ms; position: relative; box-sizing: border-box; } #post-nav .post-nav-wrap:hover { -webkit-box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5); box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5); } .post-nav-wrap>* { color: #fff; } .post-nav-date { font-size: 0.9em; } .post-nav-title { margin: 5px 0 !important; } .post-nav { min-width: 60px; position: absolute; top: 0; border-radius: 0 0 2px 0; } .post-nav:first-child { left: 0; } .post-nav:last-child { right: 0; } .post-nav { padding: 6px 12px; border-radius: 3px; font-size: 0.7em; text-transform: uppercase; background-color: #ff1956; color: #fff !important; }
Here’s what it looks like:
https://share.getcloudapp.com/llu94BmRNow I understand that it’s quite different with the UX designer’s peg but all the dynamic contents you’ll be needing are already included.
You can modify the code’s HTML structure and completely remove the CSS so you can apply your own style to match the UX designer’s peg. π
February 5, 2021 at 7:21 am #1647098antwareTHANK YOU Elvin !!!!
Worked a treat. Will certainly be using that a lot more in future sites.
Included a link in the private information section to show you how it turned out.
Thanks again to Tom and the rest of you guys for offering such a wonderful theme and support to back it up.
February 7, 2021 at 5:25 pm #1649675ElvinStaffCustomer SupportWorked a treat. Will certainly be using that a lot more in future sites.
Nice one. It’s definitely reusable and style customizable. π
I forgot to mention but if in case you need it, you can control the number of words on the excerpt by changing the number value within the
wp_trim_words(get_the_content(), 40)
.I’ve added
40
but you can change that up to your preference.Included a link in the private information section to show you how it turned out.
Thanks again to Tom and the rest of you guys for offering such a wonderful theme and support to back it up.
I wasn’t able to see how it turned out as private information details are automatically deleted when the topic is resolved but I’m glad it works for you. π
Thank you for sharing it with us. No problem. π
-
AuthorPosts
- You must be logged in to reply to this topic.