Display navigation to next/previous post ~ Sopheap

Show navigation to next/previous post is the best to make visitor easy to more post on your website. Used on single post permalink pages, this template tag displays a link to the next post which exists in chronological order from the current post. For displaying next and previous post navigation on individual posts, we’re using next_post_link() and previous_post_link().

Add the code below to your theme’s function.php

[php] if ( ! function_exists( ‘sopheap_post_nav’ ) ) :
/**
* Display navigation to next/previous post.
*
*/
function sopheap_post_nav() {
// Don’t print empty markup if there’s nowhere to navigate.
$previous = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( false, ”, true );
$next = get_adjacent_post( false, ”, false );

if ( ! $next && ! $previous ) {
return;
}

?>
<nav class="navigation post-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( ‘Post navigation’, ‘sopheap’ ); ?></h1>
<div class="nav-links">
<?php
if ( is_attachment() ) :
previous_post_link( ‘%link’, __( ‘<span class="meta-nav">Published In</span>%title’, ‘sopheap’ ) );
else :
previous_post_link( ‘%link’, __( ‘<span class="meta-nav">Previous Post</span>%title’, ‘sopheap’ ) );
next_post_link( ‘%link’, __( ‘<span class="meta-nav">Next Post</span>%title’, ‘sopheap’ ) );
endif;
?>
</div><!– .nav-links –>
</nav><!– .navigation –>
<?php
}
endif; [/php]

Add this code to your single post file (single.php)

[php]<?php sopheap_post_nav(); ?>[/php]

Add this style to your CSS file

[php]
.screen-reader-text{
display: none;
}
.nav-links {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
border-top: 1px solid rgba(0, 0, 0, 0.1);
hyphens: auto;
word-wrap: break-word;
}
.post-navigation{
margin: 24px auto 48px;
max-width: 722px;
padding: 0 10px;
}
.post-navigation a{
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 11px 0 12px;
width: 100%;
}
.post-navigation .meta-nav {
color: #767676;
display: block;
font-size: 12px;
font-weight: 900;
line-height: 2;
text-transform: uppercase;
text-decoration: none;
}
.post-navigation a {
color: #2b2b2b;
display: block;
font-size: 14px;
font-weight: 700;
line-height: 1.7142857142;
text-transform: none;