Truncating multiline text with line-clamp
June 19, 2024
WooCommerce Category Title with page number
July 17, 2024
Navigation between posts with “Next/previous” links is a feature many blogs and sites have, making it easy for users to browse post content in an orderly fashion. With “previous” and “next” links users can jump to earlier or later posts without having to go back to the main page or content list. This improves user experience and increases engagement by allowing users to find more content without having to leave the site. Well designed navigation like this includes the titles of adjacent posts which encourages users to keep browsing and can lead to longer time on site.
PHP
/* ---------------------------------------------------------- */
// Snippflow post navigation //
/* ---------------------------------------------------------- */
function sp_post_nav_shortcode( $atts ) {
$atts = shortcode_atts( array(
'type' => 'next',
), $atts, 'sp_post_nav' );
// Next / Prev post
$post = $atts['type'] === 'prev' ? get_previous_post() : get_next_post();
// Next / Prev icon class
$arrow_class = $atts['type'] === 'prev' ? 'fas fa-arrow-left' : 'fas fa-arrow-right';
// Container class
$link_class = $atts['type'] === 'prev' ? 'prev' : 'next';
if ( $post ) {
$post_title = get_the_title( $post );
$sp_post_nav = '<a href="' . esc_url( get_permalink( $post ) ) . '" class="post-link ' . $link_class . '">';
$sp_post_nav .= '<i class="' . $arrow_class . '"></i>';
$sp_post_nav .= '<div class="inner-wrapper">';
$sp_post_nav .= $atts['type'] === 'prev' ? '<p>Previous article:</p>' : '<p>Next article:</p>';
$sp_post_nav .= '<h6>' . $post_title . '</h6>';
$sp_post_nav .= '</div>';
$sp_post_nav .= '</a>';
return $sp_post_nav;
}
return '';
}
add_shortcode( 'sp_post_nav', 'sp_post_nav_shortcode' );How to use Next/Previous Post Navigation?
1. Adding Shortcode to a Page or Post
[sp_post_nav type="prev"]– display link to the previous post[sp_post_nav type="next"]– display link to the next post
2. Adding Shortcode to Source Files
<?php
// Display link to the previous post
echo do_shortcode('[sp_post_nav type="prev"]');
// Display link to the next post
echo do_shortcode('[sp_post_nav type="next"]');
?>
