Integrate WP Single Post Navigation into your WordPress Theme

This tutorial shows you how to integrate the WP Single Post Navigation into your theme without using the plugin. I initially attempted to use the plugin and for some reason it didn’t work on my custom child theme based on TwentyEleven so I decided to hard code it into my theme by adding it to my functions.php. I will show you two methods, one to display the default WordPress single post navigation and one to display how to reverse the links for a book like affect.

Prerequisites

Access to a text editor or IDE with a built in FTP client. A little knowledge of how the WordPress single post permalink navigation works, may also be of use.

Further Reading

• previous_post_link() – WordPress Codex
• next_post_link() – WordPress Codex

First Method- Default Single Post Navigation

We will start with the default WordPress post navigation. First and foremost open up the functions.php with your text editor or IDE and add the following code.

<?php 
function wpspn_previous_post_link() {

	$args = array (
		'format'       		=> '%link',     // Link format (default: %link)
		'link'                	=> '&raquo;',   // Link string (default: &raquo;)
		'in_same_cat'        	=> FALSE,       // Apply only to same category (default: FALSE)
		'excluded_categories' 	=> ''           // Exclude categories (default: empty)
	);

	$args = apply_filters( 'wpspn_previous_link_args', $args );

	previous_post_link( $args['format'], $args['link'], $args['in_same_cat'], $args['excluded_categories'] );
}
/**
 * Create "next post link" and add filters for it
 * Set default values for args - so it could be overwritten via theme/child theme
 *
 * @since 1.4
 */
function wpspn_next_post_link() {
	$args = array (
		'format'       		=> '%link',     // Link format (default: %link)
		'link'                	=> '&laquo;',   // Link string (default: &laquo;)
		'in_same_cat'        	=> FALSE,       // Apply only to same category (default: FALSE)
		'excluded_categories' 	=> ''           // Exclude categories (default: empty)
	);
	$args = apply_filters( 'wpspn_next_link_args', $args );

	next_post_link( $args['format'], $args['link'], $args['in_same_cat'], $args['excluded_categories'] );
}
function ddw_wpspn_single_prev_next_links() {
if ( is_single() ) {
		?>
		<div class="wpspn-area">
			<div id="wpspn-prevpost">
				<?php
					// Check for custom filters for "previous post link" parameters
					if ( has_filter( 'wpspn_previous_post_link', 'custom_wpspn_previous_link' ) ) {
						custom_wpspn_previous_link();

					} else {  // If nothing is found apply default parameters
						wpspn_previous_post_link();
					}
				?>
			</div>
			<div id="wpspn-nextpost">
				<?php
					// Check for custom filters for "next post link" parameters
					if ( has_filter( 'wpspn_next_post_link', 'custom_wpspn_next_link' ) ) {
						custom_wpspn_next_link();

					} else {  // If nothing is found apply default parameters
						wpspn_next_post_link();
					}
				?>
			</div>
		</div>
		<?php

	}  // end elseif
}
	add_action( 'wp_footer', 'ddw_wpspn_single_prev_next_links' );
?>

If you are happy with the default method you may skip the next section and jump in to adding the CSS.

2nd Method – Reverse Single Post Navigation

Now for the reverse order with the left arrow now navigating to the older items for a book like effect. Simply add the following to your functions.php

<?php 
/**
 * Create "previous post link" and add filters for it
 * Set default values for args - so it could be overwritten via theme/child theme
 *
 * @since 1.4
 */
function wpspn_previous_post_link() {

	$args = array (
		'format'       		=> '%link',     // Link format (default: %link)
		'link'                	=> '&laquo;',   // Link string (default: &raquo;)
		'in_same_cat'        	=> FALSE,       // Apply only to same category (default: FALSE)
		'excluded_categories' 	=> ''           // Exclude categories (default: empty)
	);

	$args = apply_filters( 'wpspn_previous_link_args', $args );

	previous_post_link( $args['format'], $args['link'], $args['in_same_cat'], $args['excluded_categories'] );
}
/**
 * Create "next post link" and add filters for it
 * Set default values for args - so it could be overwritten via theme/child theme
 *
 * @since 1.4
 */
function wpspn_next_post_link() {

	$args = array (
		'format'       		=> '%link',     // Link format (default: %link)
		'link'                	=> '&raquo;',   // Link string (default: &laquo;)
		'in_same_cat'        	=> FALSE,       // Apply only to same category (default: FALSE)
		'excluded_categories' 	=> ''           // Exclude categories (default: empty)
	);

	$args = apply_filters( 'wpspn_next_link_args', $args );

	next_post_link( $args['format'], $args['link'], $args['in_same_cat'], $args['excluded_categories'] );
}
/**
 * Output single post navigation, reverse order, links for display  
 *
 * @since 1.0
 * @version 1.2
 */
function ddw_wpspn_single_prev_next_links() {

	if ( is_single()  ) {

		?>
		<div class="wpspn-area">
			<div id="wpspn-nextpost-reverse">
				<?php
					// Check for custom filters for "next post link" parameters
					if ( has_filter( 'wpspn_next_post_link', 'custom_wpspn_next_link' ) ) {
						custom_wpspn_next_link();

					} else {  // If nothing is found apply default parameters
						wpspn_next_post_link();
					}
				?>
			</div>
			<div id="wpspn-prevpost-reverse">
				<?php
					// Check for custom filters for "previous post link" parameters
					if ( has_filter( 'wpspn_previous_post_link', 'custom_wpspn_previous_link' ) ) {
						custom_wpspn_previous_link();

					} else {  // If nothing is found apply default parameters
						wpspn_previous_post_link();
					}
				?>
			</div>
		</div>
		<?php
	} 
}
add_action( 'wp_footer', 'ddw_wpspn_single_prev_next_links' );  // end of function ddw_wpspn_single_prev_next_links
?>

Add the CSS

Open up style.css and add the following.

/**
/* Table of Contents

* Main Container for the Prev & Next Links
* Prev & Next Links Style
* CSS3 Media Query

*/
/* Main Container for the Prev & Next Links
------------------------------------------------------------ */
.wpspn-area {
}
/* Prev & Next Links Style
------------------------------------------------------------ */
#wpspn-prevpost a,
#wpspn-nextpost a,
#wpspn-prevpost-reverse a,
#wpspn-nextpost-reverse a {
	border-bottom: 1px dotted #ccc;  /* bottom border for link container */
	border-top: 1px dotted #ccc;  /* top border for link container */
	color: #999;  /* link color */
	font-size: 100px;
	line-height: 105px;
	padding-bottom: 15px;
	position: fixed;
	text-align: center;
	top: 42%;
	vertical-align: middle;
	width: 80px;
}
#wpspn-prevpost a:hover,
#wpspn-nextpost a:hover,
#wpspn-prevpost-reverse a:hover,
#wpspn-nextpost-reverse a:hover {
	color: #666;  /* mouse hover link color */
	text-decoration: none;
}
/* Default direction: previous post on left side */
#wpspn-prevpost a {
	right: 10px;
}
/* Default direction: next post on right side */
#wpspn-nextpost a {
	left: 10px;
}
/* Custom, reversed direction: previous post on left side (book-like) */
#wpspn-prevpost-reverse a {
	left: 10px;
}
/* Custom, reversed direction: next post on right side (book-like) */
#wpspn-nextpost-reverse a {
	right: 10px;
}
_#wpspn-prevpost a,
_#wpspn-nextpost a,
_#wpspn-prevpost-reverse a,
_#wpspn-nextpost-reverse a {
	position: absolute;
}
/* Theme specific: Twenty Ten hack to remove WP logo image from the browse areas */
#site-generator #wpspn-nextpost a,
#site-generator #wpspn-prevpost a,
#site-generator #wpspn-nextpost-reverse a,
#site-generator #wpspn-prevpost-reverse a {
	background: 0 none !important;
}
/* CSS3 Media Query - Hide from smaller displays/ viewports
------------------------------------------------------------ */

@media screen and (max-width: 480px) {
	.wpspn-area,
	#wpspn-prevpost,
	#wpspn-nextpost,
	#wpspn-prevpost-reverse,
	#wpspn-nextpost-reverse {
		display: none;
	}
}

Conclusion

There are pros and cons to hardcoding a plugin directly into your functions.php especially when a plugin needs updating. This plugin, however is pretty stable and if all you need is another way of navigating then why not hard code it into your theme. I have left the plugin on my site, deactivated so if any new features arise I will simply update this post to inform you.