in ,

Display navigation to next/previous post

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;

}
.post-navigation a:hover {
color: rgb(234, 34, 55);
text-decoration: none;
}
[/php]

What do you think?

Written by Sopheap

The goal of me is sharing new ideas, inspiration art, fresh and useful resource, covering web design and development, graphic design, advertising, mobile development and life style.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Male Hair With Adobe illustrator ~ Sopheap

Male Hair With Adobe illustrator

Allowed Memory Size Exhausted

Downgrade WordPress To Earlier Version