WordPress Hack: Display Number & Next/Previous Links with wp_link_pages()

WordPress' wp_link_pages() function, used for displaying page links in multi-page posts, lacks one big feature. You can display a list of individual page links OR you can display previous and next links, but you cannot display both.

In this article, I show you how to display both next/previous links and number links with wp_link_pages().1

Adding 'next_and_number' Option to wp_link_pages()

In WordPress 3.0, a new filter, wp_link_pages_args, was added to allow easy customization of the arguments that are passed to wp_link_pages(). We will use that filter to add previous and next links to the before and after parameters.

First, we add the filter to our theme's functions.php file.

add_filter('wp_link_pages_args','add_next_and_number');

Then we write our function add_next_and_number().

function add_next_and_number($args){
    if($args['next_or_number'] == 'next_and_number'){
        global $page, $numpages, $multipage, $more, $pagenow;
        $args['next_or_number'] = 'number';
        $prev = '';
        $next = '';
        if ( $multipage ) {
            if ( $more ) {
                $i = $page - 1;
                if ( $i && $more ) {
                    $prev .= _wp_link_page($i);
                    $prev .= $args['link_before']. $args['previouspagelink'] . $args['link_after'] . '</a>';
                }
                $i = $page + 1;
                if ( $i <= $numpages && $more ) {
                    $next .= _wp_link_page($i);
                    $next .= $args['link_before']. $args['nextpagelink'] . $args['link_after'] . '</a>';
                }
            }
        }
        $args['before'] = $args['before'].$prev;
        $args['after'] = $next.$args['after'];   
    }
    return $args;
}

To use the modified wp_link_pages() function, you can call it exactly as you did before, just use the new option next_and_number as shown below.

<?php
    wp_link_pages(array(
        'before' => '<p>' . __('Pages:'),
        'after' => '</p>',
        'next_or_number' => 'next_and_number',
        'nextpagelink' => __('Next'),
        'previouspagelink' => __('Previous'),
        'pagelink' => '%',
        'echo' => 1 )
    );
?>

The output of the above code will look something like this:

wp_link_pages: Previous, Next, and Number Links

The beauty of this approach is that the core functionality of wp_link_pages() is not changed. On pages where you don't want to display both types of links, you can continue to use the next or number options.

For more information on multi-page posts and the wp_link_pages() function, visit the WordPress Codex:

 

Feel free to comment or ask questions below.

  1. To solve this problem, you can also use a plugin or write an entirely new pagination function of your own. But this option is cleaner and faster. []
Tags: ,

7 Responses to “WordPress Hack: Display Number & Next/Previous Links with wp_link_pages()”

  • George February 18, 2012 at 11:23 am

    Thanks for sharing this code! It was exactly what I was looking for.

  • Jarkko May 20, 2012 at 1:45 am

    Thanks a lot, worked like a charm :)

  • chris October 25, 2012 at 10:28 am

    Thanks for this great example. I was wondering if there is a way to modify this so it works like The Bleacher Report?

    Take a look at:

    http://bleacherreport.com/articles/1165767-european-footballs-50-biggest-wage-salaries-of-last-year-are-they-worth-it/page/2

    I’d like to display just Page Number as text and next and previous links (no page number links).

    Another really great function would be to be able to have a different for each page in the paginated post — maybe drawn from the first h1 in the element.

    Any thoughts on how that could be done — it would really enhance the WP paginated posts functionality/usability.

    Thanks,

    Chris

    • Velvet Blues October 26, 2012 at 2:16 pm

      Yes, it wouldn’t be hard to modify the code to duplicate the behavior at Bleacher Report. You would just use the variables $numpages and $pagenow

      • chris October 31, 2012 at 3:19 am

        Thanks. The annoying thing about wp_link_pages is the markup it produces. It would be nice if you could turn it into an unordered list or put class names around the Previous and Next links so that you could style them more effectively.

        How do you go about implementing the $numpages and $pagenow?

  • oscar November 20, 2012 at 1:42 pm

    Thanks a lot! Do you know if it’s feasible to tag the current page so it can also be styled? For example, in the screenshot you put, the number 3 does not have a box because it is not a (CSS-styled) link.

    • Velvet Blues November 21, 2012 at 9:46 am

      Actually, 3 is not styled because it is not a link at all. But the function does allow you to add markup. Just look at all of the arguments that it accepts.

Trackbacks

Trackback URL:

Leave a Reply

Want us to work on your project?

Contact us today for a quote. Click here to submit details regarding your project.

If you are making a general inquiry, send an email to info@velvetblues.com

Go Daddy Deal of the Week: Cheap .COM Domains! Offer expires soon!