25% off ProSNIPC25OFF

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">&larr;</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">&rarr;</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