How to Customize Post Navigation Links in Twenty Fifteen

Many users of the Twenty Fifteen theme want to modify the default post navigation links that appear at the bottom of single posts. Common requests include limiting navigation to posts within the same category, changing the styling based on category, or completely removing these links to implement a custom solution. This guide explains how to achieve these customizations.

Understanding the Default Navigation

The post navigation in Twenty Fifteen is generated by the the_post_navigation() function, which is located in the theme's single.php template file. By default, this function creates "Previous" and "Next" links that navigate through all posts chronologically, regardless of their category.

Common Customization Requests and Solutions

1. Limit Navigation to the Same Category

To make the "Previous" and "Next" links navigate only within the current post's category, you need to modify the function's arguments. This requires creating a child theme and editing its single.php file.

Locate the following code in your child theme's single.php:

// Previous/next post navigation.
the_post_navigation( array(
    'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentyfifteen' ) . '</span> ' .
    '<span class="screen-reader-text">' . __( 'Next post:', 'twentyfifteen' ) . '</span> ' .
    '<span class="post-title">%title</span>',
    'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentyfifteen') . '</span> ' .
    '<span class="screen-reader-text">' . __( 'Previous post:', 'twentyfifteen' ) . '</span> ' .
    '<span class="post-title">%title</span>',
) );

Replace it with code that uses the in_same_term parameter:

// Previous/next post navigation within the same category.
$previous = get_previous_post( TRUE );
$next = get_next_post( TRUE );

?>
<nav class="navigation post-navigation" role="navigation">
    <h2 class="screen-reader-text"><?php _e( 'Post navigation', 'twentyfifteen' ); ?></h2>
    <div class="nav-links">
        <?php if ( ! empty( $previous ) ) : ?>
            <div class="nav-previous">
                <a href="<?php echo get_permalink( $previous ); ?>" rel="prev">
                    <span class="meta-nav" aria-hidden="true"><?php _e( 'Previous', 'twentyfifteen' ); ?></span>
                    <span class="screen-reader-text"><?php _e( 'Previous post:', 'twentyfifteen' ); ?></span>
                    <span class="post-title"><?php echo get_the_title( $previous ); ?></span>
                </a>
            </div>
        <?php endif; ?>
        <?php if ( ! empty( $next ) ) : ?>
            <div class="nav-next">
                <a href="<?php echo get_permalink( $next ); ?>" rel="next">
                    <span class="meta-nav" aria-hidden="true"><?php _e( 'Next', 'twentyfifteen' ); ?></span>
                    <span class="screen-reader-text"><?php _e( 'Next post:', 'twentyfifteen' ); ?></span>
                    <span class="post-title"><?php echo get_the_title( $next ); ?></span>
                </a>
            </div>
        <?php endif; ?>
    </div>
</nav>
<?php

The key change is the TRUE parameter in get_previous_post( TRUE ) and get_next_post( TRUE ), which tells WordPress to only find posts within the same category.

2. Remove the Navigation Completely

If you prefer to remove the default navigation entirely to add your own custom links, you can simply delete or comment out the entire the_post_navigation() function call in your child theme's single.php file. Look for the section containing this function and remove it.

3. Style Links Based on Category

To style the navigation links with different colors for each category, you can use CSS. The navigation links likely already have CSS classes for the post category. You can inspect these classes using your browser's developer tools and then target them in your custom CSS.

For example, you might add CSS like this in Appearance > Customize > Additional CSS:

.nav-links a.category-news { background-color: blue; }
.nav-links a.category-blog { background-color: green; }

Important Note on Child Themes

Always use a child theme when making modifications to theme files. This ensures your changes are not overwritten when the Twenty Fifteen theme receives updates. Directly editing the parent theme's files is strongly discouraged.

By understanding how the post navigation function works in single.php, you can effectively customize it to better suit your website's navigation needs.