---
title: 'Integrate WP Single Post Navigation into your WordPress Theme'
url: 'https://worldoweb.co.uk/2012/integrate-wp-single-post-navigation-into-your-wordpress-theme'
markdown: 'https://worldoweb.co.uk/2012/integrate-wp-single-post-navigation-into-your-wordpress-theme.md'
date: '2012-03-11'
description: 'Learn how to integrate the WP Single Post Navigation into your WordPress theme without using the plugin.'
taxonomy:
  category:
    - WordPress
  tag:
    - PHP
    - Hacks
    - Tutorial
    - CSS
---

# Integrate WP Single Post Navigation into your WordPress Theme

 Published on March 11, 2012 by Tracy Ridge in  [WordPress](https://worldoweb.co.uk/category/category:WordPress) 

This tutorial shows you how to integrate the **[WP Single Post Navigation](https://genesisthemes.de/en/wp-plugins/wp-single-post-navigation/ "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](https://codex.wordpress.org/Template_Tags/previous_post_link "previous_post_link()")
- [next\_post\_link() – WordPress Codex](https://codex.wordpress.org/Template_Tags/next_post_link "next_post_link()")

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

<?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](#add-css "Jump to 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

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

```css
/**
/* 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.

### Share

 [X](https://x.com/intent/tweet?text=Integrate%20WP%20Single%20Post%20Navigation%20into%20your%20WordPress%20Theme&url=https%3A%2F%2Fworldoweb.co.uk%2F2012%2Fintegrate-wp-single-post-navigation-into-your-wordpress-theme&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fworldoweb.co.uk%2F2012%2Fintegrate-wp-single-post-navigation-into-your-wordpress-theme "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fworldoweb.co.uk%2F2012%2Fintegrate-wp-single-post-navigation-into-your-wordpress-theme&title=Integrate%20WP%20Single%20Post%20Navigation%20into%20your%20WordPress%20Theme "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fworldoweb.co.uk%2F2012%2Fintegrate-wp-single-post-navigation-into-your-wordpress-theme "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=Integrate%20WP%20Single%20Post%20Navigation%20into%20your%20WordPress%20Theme%20https%3A%2F%2Fworldoweb.co.uk%2F2012%2Fintegrate-wp-single-post-navigation-into-your-wordpress-theme "Share on Bluesky") [Email](mailto:?subject=Integrate%20WP%20Single%20Post%20Navigation%20into%20your%20WordPress%20Theme&body=https%3A%2F%2Fworldoweb.co.uk%2F2012%2Fintegrate-wp-single-post-navigation-into-your-wordpress-theme "Share via email") 

#### Tags

 [ PHP](https://worldoweb.co.uk/tag/tag:PHP) [ Hacks](https://worldoweb.co.uk/tag/tag:Hacks) [ Tutorial](https://worldoweb.co.uk/tag/tag:Tutorial) [ CSS](https://worldoweb.co.uk/tag/tag:CSS) 

##### Next

 [ ← HTML5 & CSS3 Resources to Kickstart your First HTML5 Project ](https://worldoweb.co.uk/2012/html5-css3-resources-start-your-project) 

OR

##### Previous

 [ Display Your WordPress Recent Posts on a Static Page → ](https://worldoweb.co.uk/2012/display-your-wordpress-recent-posts-on-a-static-page)

---

## Navigation

- Previous: [HTML5 & CSS3 Resources to Kickstart your First HTML5 Project](https://worldoweb.co.uk/2012/html5-css3-resources-start-your-project.md)
- Next: [Display Your WordPress Recent Posts on a Static Page](https://worldoweb.co.uk/2012/display-your-wordpress-recent-posts-on-a-static-page.md)