Prev Next Post Navigation
Appends a clean previous/next post navigation block after single post content, with post titles and arrow indicators.
Module2 parts · by SnipCraft
PHPContent Filter
php
<?php
if ( ! function_exists( 'scseed_post_nav' ) ) {
function scseed_post_nav( $content ) {
if ( ! is_single() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
$prev = get_previous_post();
$next = get_next_post();
if ( ! $prev && ! $next ) {
return $content;
}
$nav = '<nav class="scseed-post-nav" aria-label="' . esc_attr__( 'Post navigation', 'default' ) . '">';
if ( $prev ) {
$nav .= '<a class="scseed-post-nav__item scseed-post-nav__prev" href="' . esc_url( get_permalink( $prev ) ) . '">';
$nav .= '<span class="scseed-post-nav__arrow">←</span>';
$nav .= '<span class="scseed-post-nav__dir">' . esc_html__( 'Previous', 'default' ) . '</span>';
$nav .= '<span class="scseed-post-nav__title">' . esc_html( get_the_title( $prev ) ) . '</span>';
$nav .= '</a>';
}
if ( $next ) {
$nav .= '<a class="scseed-post-nav__item scseed-post-nav__next" href="' . esc_url( get_permalink( $next ) ) . '">';
$nav .= '<span class="scseed-post-nav__dir">' . esc_html__( 'Next', 'default' ) . '</span>';
$nav .= '<span class="scseed-post-nav__title">' . esc_html( get_the_title( $next ) ) . '</span>';
$nav .= '<span class="scseed-post-nav__arrow">→</span>';
$nav .= '</a>';
}
$nav .= '</nav>';
return $content . $nav;
}
}
add_filter( 'the_content', 'scseed_post_nav' );CSSStyles
css
.scseed-post-nav {
display: flex;
gap: 16px;
margin-top: 40px;
border-top: 1px solid #e5e7eb;
padding-top: 24px;
}
.scseed-post-nav__item {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
border: 1px solid #e5e7eb;
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
}
.scseed-post-nav__item:hover {
border-color: #7c5cff;
box-shadow: 0 0 0 3px rgba(124,92,255,0.1);
}
.scseed-post-nav__next { align-items: flex-end; text-align: right; }
.scseed-post-nav__arrow { font-size: 18px; color: #7c5cff; line-height: 1; }
.scseed-post-nav__dir { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.05em; }
.scseed-post-nav__title { font-size: 15px; font-weight: 600; color: #111; line-height: 1.4; }
@media (max-width: 540px) {
.scseed-post-nav { flex-direction: column; }
.scseed-post-nav__next { align-items: flex-start; text-align: left; }
}#ux#posts#content#navigation