Add Previous Page and Next Page Posts to the bottom of single Posts

[stephenvosloo]

Hi there, I’d be forever grateful if you can help me with this request. I realize it’s out of the scope of normal support but I think I’m super close to getting the function I’m looking for, I just need a little help from a pro.

Is there any way to style the “previous” post and “next” post text so that it’s differentiated from actual post title on the bottom of single page posts? here’s a link to my site (sent in private note + login info)

Ideally I’d love for it to look like this: (see attached picture) but I’d settle to just have the navigation words look different than the actual post title.

thank you so much!

[ruenel]

Hello @stephenvosloo,

Thanks for writing in!

This has been requested some time ago. To be able to have the next/previous button in your site, please check out these threads: https://theme.co/apex/forum/t/next-previous-post-with-post-image/42512/4,

Assuming that the child theme is set up, please add the following code in your child theme’s functions.php file

// =============================================================================
// // Previous/next post navigation.
function add_entry_navigation(){
  if( is_single() || x_is_portfolio_item() ) {
    // Previous/next post navigation.
    $next_post = get_next_post();
    $previous_post = get_previous_post();
    the_post_navigation( array(
        'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentyfifteen' ) . '</span> ' .
            '<span class="screen-reader-text">' . __( 'Next post:', 'twentyfifteen' ) . '</span> ' .
            '<span class="post-title">%title</span>' . get_the_post_thumbnail($next_post->ID,'thumbnail'),
        'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentyfifteen' ) . '</span> ' .
            '<span class="screen-reader-text">' . __( 'Previous post:', 'twentyfifteen' ) . '</span> ' .
            '<span class="post-title">%title</span>' . get_the_post_thumbnail($previous_post->ID,'thumbnail'),
    ) );
  }
}
add_action('x_before_view_global__comments-template', 'add_entry_navigation' );
// =============================================================================

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

We would loved to know if this has work for you. Thank you.

[stephenvosloo]

Thanks so much. I think you must have miss-understood the question as I had already inserted the script that you posted above. I had found it from a previous user’s query. My question was related to styling the actual text, which I think I’ve now done in a rudimentary way. I find it so odd and disappointing that such a powerful theme has such few options related to using basic Word Press functionality.

[mldarshana]

Hi There @stephenvosloo

Sorry for the misunderstanding. I see that you have already fixed this issue. Basically you can assign your own custom CSS class to the code above and add a custom CSS rule into your Pro -> Theme Options -> CSS area to style according to your preference.

Thanks!