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.

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' );
?>

<?php

function wpspn_previous_post_link() {

$args = array (

'format' => '%link', // Link format (default: %link)

'link' => '»', // Link string (default: »)

'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' => '«', // Link string (default: «)

'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() ) {

<?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>

<?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>

<?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
?>

<?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' => '«', // Link string (default: »)

'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' => '»', // Link string (default: «)

'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() ) {

<?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>

<?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>

<?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: 1100px) {
	.wpspn-area,
	#wpspn-prevpost,
	#wpspn-nextpost,
	#wpspn-prevpost-reverse,
	#wpspn-nextpost-reverse {
		display: none;
	}
}

/**

/* 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: 1100px) {

.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.

doron
hey,
i used your codex ang it great. it works excellent. thanks. still i have one problem and i hope you could help me with that.
my blog is in hebrew, that mean that the readers read from right to left. the problem begin with the NEXT/PREV icons. in english the next post icon is on the right side of the screen but in hebrew it should be on left side of the screen. (the same idea with PREV post icon).
how can i change it?
- http://worldoweb.co.uk Ridgey
  If it’s just the icons that need to be changed. You can swap line 13.
```
& laquo;
```
  with line 37
```
& raquo;
```
  I had to add a space after the & to demonstrate as Disqus wouldn’t display the code correctly.
az
hi, can you you please help me make Previous, Random, And next buttong inside of post like in this blog, i’ve searched everywhere but no help can u plzzz help>>.the website that is using right now is
http://weknowmemes.com/2012/05/optimus-is-prime/
i want to use this on my website….
http://www.apk2all.com….plzzz reply as soon as you can thanks…
- http://www.worldoweb.co.uk/ Tracy Ridge
  The buttons you already have seem suitable, why would you want to change them? Just style them with a little CSS.

Daniel Lemes

Super! I just miss the title tag (maybe post title) on links, but anyway your code is very useful, thanks.

http://www.worldoweb.co.uk/ Tracy Ridge

Try adding the following to your functions.php

function filter_next_post_link($link) {
    global $post;
    $post = get_post($post_id);
    $next_post = get_next_post();
    $title = $next_post->post_title;
    $link = str_replace("rel=", 'title="' . $title . '" rel=', $link);
    return $link;
}
add_filter('next_post_link', 'filter_next_post_link');

function filter_previous_post_link($link) {
    global $post;
    $post = get_post($post_id);
    $previous_post = get_previous_post();
    $title = $previous_post->post_title;
    $link = str_replace("rel=", 'title="' . $title . '" rel=', $link);
    return $link;
}
add_filter('previous_post_link', 'filter_previous_post_link');

Daniel Lemes
Perfect, thanks!

David Šuška | Webni.cz
Is it possible to do it in default way in the default templates of the wordpress. For example the default twentytwelve that is also responsive have it in itself.
- http://www.worldoweb.co.uk/ Tracy Ridge
  It currently supports resolutions from 1100px upwards as it may overlap content in resolutions under that. Are you wanting to place it anywhere in particular? Like at the bottom of your blog posts in lower resolutions. This may be done with CSS but I haven’t tried it yet and I have yet to test it in directly inside a template although I will give it a bash.
http://mughalz.tk Sohaib Afzal
I want to make the WP Single Post Navigation fixed, I mean I want that the links of next and previous posts remain in the post are or fixed in the sides of post. Can Anyone Help Me On This?
- http://www.worldoweb.co.uk/ Tracy Ridge
  Am I right in thinking that you want them inside the area of your blog post? For example; If I would apply it to my theme i would go inside the white area. Can you provide me a URL?
vlad
Why does the div is on the footer? how can i move it to header section?
- http://www.worldoweb.co.uk/ Tracy Ridge
  It places the code before the closing body tag so it would be valid. Using wp_head() would place it before the closing head tag.
squizeers
This is really a good piece of code.
I am in need of a post navigation where the posts can be navigated if they are in same ancestor category.
For example, I have category structure as follows:
CATEGORY-A
subcat1
subcat1A
subcat1B
subcat2
subcat3
I want the post navigation to work on all the posts in CATEGORY-A and its children categories.
Or is there any way to navigate posts if they have same tags????
Thanks in advance.
- http://www.worldoweb.co.uk/ Tracy Ridge
  Have you tried changing ‘in_same_cat’ value from FALSE to TRUE on lines 7 and 30 (First Method). The code has been stripped from this plugin so all credit should go to the original author.
Seven
Hello, the wp single post navigation plugin didn’t show up on my set up, too. Thanks for this!
Just had a little trouble with the php codes above, though. If I just copy and pasted it, it will say it encountered an unexpected T_VARIABLE at the line where you assign $args an array. It turns out there was some weird whitespace character that isn’t a “normal” space, and that was why it keeps returning an error.
http://platinumdjs.com.au Wedding Dj adelaide
A family member linked me to this website.
Thnx for the information.
http://freepremiumwp.com/ Kristian
I have read so many articles about the blogger lovers but this article is actually a good article, keep it
up.

Integrate WP Single Post Navigation into your WordPress Theme

Prerequisites

Further Reading

First Method- Default Single Post Navigation

2nd Method – Reverse Single Post Navigation

Add the CSS

Conclusion

Related Posts