Filtering the page links

Nothing is ever truly perfect. There are some things that do come close though. In the mean time we can make just a few changes to get our desired result. The photo above is a quick comparison of a photo I took a few years back while at Yosemite National Park.

As you can see there is a huge difference between the two. One is more vibrant and full of color while the other is just a little flat with little to no contrast. Yeah, I critique my own photos constantly. The left is the raw untouched file taken with my camera and the right is the edited version. As you can see it made it better by correcting some color and adding a little more light to the overall image.

Now, in WordPress one way of altering is by using filters. Recently I’ve been messing with one in particular that I feel can be a good practice for any theme developer. Filtering the arguments of wp_link_pages() to style post pagination.

Pagination?

Yes, pagination in posts. Often times when a tutorial or a written work is far too long that it needs to be divided into segments of easy to read, easy to consume blocks of text. In WordPress the

<!--nextpage-->

tag is used in the text editor to create another page within that post. WordPress handles this in one of two ways. The first is by listing the pages and the other is by using simple next/previous links. All themes tend to style that in different ways. The default Twenty Thirteen handles it like:

The way it is styled uses the same code throughout all the content related files. The reason I say it that way is because 2013 has support for all the post formats available within WordPress, which is amazing! Now the downside to that is that it can mean you have to copy/paste, type out a lot more code than you’d want to. I know I can be that way. I just want to be able to set it once and be done. I mean who doesn’t, right?

So, the way 2013 is coded is by calling wp_link_pages and then passing to it an array with some settings.

 wp_link_pages(
        array(
                'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>',
                'after' => '</div>',
                'link_before' => '<span>',
                'link_after' => '</span>'
        ) );

As you can see you would copy and paste that code on all the files depending on how you have all your content files setup. While it does create that nice little HTML structure for us to style it may be tedious to have to copy and paste over and over. I know I got tired of it.

Solution

What I did was looked at the source code for the function. I took notice at one particular line of code that made me happy. That line was:

$r = apply_filters( 'wp_link_pages_args', $r );

The reason it made me happy was because I realized that I could filter the arguments and not have to type out all that code over and over again or even have to copy and paste it all. So all I now had to do was create a callback function and hook it through a filter.

add_filter( 'wp_link_pages_args', 'theme_link_pages_args' );
function theme_link_pages_args( $args ){
    $args = array(
        'before'           => '<div class="link-pages">Page ',
        'after'            => '</div>',
        'link_before'      => '',
        'link_after'       => '',
        'next_or_number'   => 'number',
        'separator'        => '<span>',
        'nextpagelink'     => 'Next Page',
        'previouspagelink' => 'Previous Page',
        'pagelink'         => '%',
        'echo'             => 1
    );
    return $args;
}

*If you are going to filter the $args make sure you use all the settings or you may end up getting some errors.

There we have it! Keep in mind that if you want the theme to be translation ready don’t forget to add the proper functions where needed and prefix the function with your theme’s name.