Skip to main content Jump to list of all articles

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

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.

24 replies on “Integrate WP Single Post Navigation into your WordPress Theme”

Avatar of Mr 561

Is it possible to hide these arrows from MOBILE sites? On mobile, the arrows cover the screen & the content, I’d like to use this only on desktop & tablet

Avatar of Tracy Ridge

Yes sure. You can add a CSS media Query to prevent it from showing up on mobile. Change the width to suit your needs.

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

You can also target the device width with CSS too. Check out https://cssmediaqueries.com/

Avatar of Tracy Ridge

Ahh I see what’s happened. You installed the plugin instead of the code on my blog post?

Not to worry
I have just tested it and I have it working. Remove any code relating to the plugin from style.css (if there is any).
You need to edit wp-single-post-navigation.css in the plugin folder in wp-content

Remove

@media only screen and max-width 1100px {
.wpspn-area,#wpspn-prevpost,
#wpspn-nextpost,#wpspn-prevpost-reverse,
#wpspn-nextpost-reverse{display:none}
}

and replace it with the snippet I gave you initially. Save and empty cache if you are using a caching plugin.

Let me know how you get on.

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

Avatar of Tracy Ridge

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.

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

Avatar of Daniel Lemes
Daniel Lemes
Daniel Lemes On

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

Avatar of 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');
Avatar of David Šuška | Webni.cz
David Šuška | Webni.cz
David Šuška | Webni.cz On

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.

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

Avatar of Sohaib Afzal
Sohaib Afzal
Sohaib Afzal On

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?

Avatar of squizeers
squizeers
squizeers On

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.

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

Avatar of Wedding Dj adelaide
Wedding Dj adelaide
Wedding Dj adelaide On

A family member linked me to this website.
Thnx for the information.

Comments are closed.