[Resolved] Add post excerpt below post title in post navigation

Home Forums Support [Resolved] Add post excerpt below post title in post navigation

Home Forums Support Add post excerpt below post title in post navigation

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1645340
    antware

    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.

    #1645989
    Tom
    Lead Developer
    Lead Developer

    Hi 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.

    #1646048
    antware

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

    #1646381
    Elvin
    Staff
    Customer Support

    Hi 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/llu94BmR

    Now 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. πŸ™‚

    #1647098
    antware

    THANK 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.

    #1649675
    Elvin
    Staff
    Customer Support

    Worked 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. πŸ˜€

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.