WordPress Next-Previous Links Vastly Improved

One of the most important parts of site design is developing or maintaining a good interface.  Your visitors should be able to easily figure out how to get from one place to another or find what they’re looking for, and WordPress has done a great job providing a consistent experience.  But even with the best pieces of software, there’s always room for improvement.

One of the more regular complaints we get about WordPress is how it handles pagination, a.k.a those Next / Previous buttons that pop-up under posts on some WordPress websites (and very possibly your own).  By default, WordPress sees your body of posts in much the same way it displays them:  A chronological stream of unfiltered data, and for the vast majority of the world’s Blogs, that’s perfectly fine.  But let’s face it!  WordPress ISN’T your father’s old blog any longer.  It’s evolved into an incredibly powerful platform that’s more often used to develop full webs like news sites, corporate webs, etc., and in these environments, a simple chronological list simply won’t cut it for your visitors.

For example:
If a visitor has arrived on your site in search of information on a jack-hammer by way of Google, they expect to land on a page containing that information, and for the most part, we can assume they have.  But if your site talks about all kinds of tools your interface may have a problem.

The visitor finishes reading the article, but it doesn’t give them what they’re looking for.  They notice that there are next and previous links at the bottom of the article, so they click previous…  With WordPress’s default setup, if you wrote a post about toothbrushes just before your jack-hammer post, this is the post they would see!  Now we know what they’re looking for.  Why on earth would we show them a post on toothbrushes?

Well with a little trickery and some help from a WordPress plug-in by Michael Ambrosio, we can correct this flaw in our interface, limiting the Next / Previous links to posts within the same category thereby increasing your chances of keeping the visitor on your site and getting them the information they need.

Here’s how it works:
Requirements:  This will work with WordPress 2.5 or higher and requires PHP5!

First, Download the Plug-in at http://wordpress.org/extend/plugins/ambrosite-nextprevious-post-link-plus/
You can also find it within WordPress by clicking Plug-ins / Add New within your WordPress Dashboard and searching for “ambrosite-next”.

Once installed, activate the plug-in.  This, in and of itself, won’t change anything, but now you have everything you need to fix the issue.
Note:  If you’re on a Multi User (MU) site, do not Network Activate the plug-in.  Instead, once the plug-in is installed, visit each sub-site you wish to do this on and activate it individually.

As you probably know, we build our wordpress websites almost exclusively in Headway, so these instructions are written specifically for this framework.  The configuration for themes or other frameworks will vary, so check with the developer for how to implement this fix in your site.

With Headway you’ll need to download and open two files.  The first is custom_functions.php and the second is custom.css.  Open them in your favorite editor.

 

Custom_functions.php changes:

The default custom_functions.php file contains an example of what might be added to it, followed by “ */ ”.  These additions should be made after that line.

Add:

function nextprev() {
if(is_single()) { ?>
<div class=”nav-previous2″><?php previous_post_link_plus( array(
‘link’ => ‘Previous Post’,
‘in_same_cat’ => true,
‘before’ => ”,
‘after’ => ”,
‘num_results’ => 1,
‘echo’ => true
) ); ?></div>

<div class=”nav-next2″><?php next_post_link_plus( array(
‘order_by’ => ‘post_date’,
‘link’ => ‘Next Post’,
‘in_same_cat’ => true,
‘before’ => ”,
‘after’ => ”,
‘num_results’ => 1,
‘echo’ => true
) ); ?></div>
<?php }
}

NOTE: The code above was fixed to address an issue reference by Vin in the comments below.  Thanx again Vin!  😉

If there were other entries in your custom_functions.php, you’ll need to scroll all the way down to the bottom of the file and add the following line as well:

add_action(‘headway_after_post’, ‘nextprev’);

If there were no entries, simply add it below the first bit of code.

These changes will add a new set of links to your post pages, just below the content and above the comment section.  If you view your site now, you should see Next Post and Previous Post text links as well as the Next Post and Previous Post buttons that were there originally.  Now it’s time to remove the standard buttons and style your new links in your custom.css file.

 

Custom.css Changes:

Scroll to the bottom of your custom.css file and add the following lines:

body.custom div#nav-below-single {
visibility:hidden;
}

body.custom div.nav-previous2 {
color: #333333;
font-family: arial,sans-serif;
font-size: 12px;
line-height: 150%;
width:auto;
float:left;
}

body.custom div.nav-next2 {
color: #333333;
font-family: arial,sans-serif;
font-size: 12px;
line-height: 150%;
width:auto;
float:right;
}

body.custom div.nav-next2 a, div.nav-previous2 a {
background-color: #DEDEDE;
color: #888;
font-family: arial,sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0;
line-height: 110%;
text-decoration: none!important;
text-transform: none;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
display: inline-block;
padding-bottom: 6px;
padding-left: 8px;
padding-right: 8px;
padding-top: 7px;
clear:none;
}

body.custom div.nav-next2 a:hover, div.nav-previous2 a:hover {
color:#333;
}

The code above does several things.  The first thing it does is hide the standard Next/Previous navigation items.  It also makes your new links look like nice gray buttons.  You can edit the CSS above to match your website’s styling as needed.

Now go back to your website and go to any single post page.  Hover your mouse over the next or previous buttons.  The first thing you’ll notice is a nifty title pops up with the title of the article you’ll go to if you click it.  The next thing you’ll notice is that the article is in the *same category as the one you’re reading!  Even if you don’t see the value in this small change, I promise you your visitors will, so go enjoy your longer visit times!

* Note that posts made to more than one category may forward visitors to any of the categories that post is in.  There is presently no good way of addressing this, so, well…  Deal with it. 🙂

If you like what you read here – feel free to subscribe to our blog, and you’ll get new and nifty posts in your email.  We don’t spam.

Related Posts:

7 Responses to WordPress Next-Previous Links Vastly Improved
  1. Vin Carrillo
    May 30, 2011 | 10:03 pm

    Okay glad to help – but something is still broken. See my Previous and Next buttons show up under the content like it is supposed to be but so does:
    ,’after’ =>

    See my previous response. I don’t know how to remove this extra PHP code.

    Also I was really hoping instead of the typical Next & Previous to instead show the title of the next and previous article. Is that possible?

    • Jon Hardison
      May 30, 2011 | 10:10 pm

      You should see Next and Previous buttons just like the ones above these comments. The article titles are popping up in the tooltips of each, so you “should” be all set. Do me a fav and use our contact form to send me your URL and I’ll have a quick look to see what we can get figured out.

    • Jon Hardison
      May 30, 2011 | 10:12 pm

      Also… What browser (and version) are you using?

  2. Vin Carrillo
    May 30, 2011 | 9:46 pm

    Okay I got it – I was using the WP Dashboard / Appearance / Editor and something got screwed when I copy/pasted from your page here. Used an external editor and it worked. However your CSS does not. You mention 2 DIVs in your PHP code, but how does the CSS elements relate to the DIVs? In other words the DIVs have no names associated with them, right, so the CSS aint gonna change anything. Or did I miss something cuz all I get on my pages is:

    , ‘after’ => « Previous Post
    , ‘after’ => Next Post »

  3. Jon Hardison
    May 29, 2011 | 8:52 pm

    Hey Vin:
    Thanx for stoppin’ by. Not sure why it would be crashing your WP dash. Just to confirm… You’ve installed the plug-in at http://wordpress.org/extend/plugins/ambrosite-nextprevious-post-link-plus/ and activated it?

    Are you a headway user? If not, are you sure you’re nesting everything using the correct hook? If not, you should check the WP hook docs or the codex of your theme framework. Feel free to write back. Curious why it isn’t working for you.

  4. Vin Carrillo
    May 29, 2011 | 5:27 pm

    This is exactly what I was looking for however your first block of code added to the custom_function.php crashes the WP dashboard. I have to open the custom_function.php in an external editor, remove your block of code to gain access to the dashboard.

    This is a vanilla WP/Headway install with only the plugin you mentioned. Too bad it seemed like a nice idea.

    • Jon Hardison
      May 30, 2011 | 9:58 pm

      LOL! You are correct! You can just include the class=”nav-previous2″ and class=”nav-next2″ in the appropriate divs in the custom_functions.php and you should be all set. Didn’t even notice it. I’ll go back and edit so no one else has that issue. Glad it all worked out though, and good catch on the external editor. I’m just so accustomed to working with external editors I forget these problems occur. 😉

Leave a Reply

Wanting to leave an <em>phasis on your comment?

Trackback URL http://teamhardison.com/wordpress-web-site-tips-and-tricks/wordpress-nextprevious-links-vastly-improved/trackback/