1

By default, when adding <!--nextpage-->, the following links are displayed: Pages: 1 2

I need to replace "Pages:" with a graphic arrow which links back to the previous page, and append a graphic arrow to the end of the links that links to the next page. I'm guessing there's a way to do this in the functions file?

2 Answers 2

1

Just specify an image as the "nextpagelink" and "previouspagelink" instead of the << or >>:

<?php wp_link_pages(array('before' => '<div class="pagenav"><strong>Navigate</strong>', 'after' => '</div>', 'next_or_number' => 'number', 'nextpagelink' => __('<img src="PUT YOUR IMAGE URL HERE" />'), 'previouspagelink' => __('<img src="PUT YOUR IMAGE URL HERE" />'))); ?>

Also, you are correct that by default you are limited to either "Numbers" or "Next/Previous" links but a plugin can extend this: http://wordpress.org/extend/plugins/wp-pagenavi/

Bonus: Add this to your function.php and it will add a "Nextpage" button next to the "More" button in the WYSIWYG editor:

//  Add Next Page Button to TinyMCE Editor
add_filter('mce_buttons','wysiwyg_editor');
function wysiwyg_editor($mce_buttons) {
    $pos = array_search('wp_more',$mce_buttons,true);
    if ($pos !== false) {
        $tmp_buttons = array_slice($mce_buttons, 0, $pos+1);
        $tmp_buttons[] = 'wp_page';
        $mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1));
    }
    return $mce_buttons;
}
0

I have to admit that <!--nextpage--> isn't a very well-documented feature (there's not even a button for it in the UI of the post editor!). But it's still incredibly useful and I've used it a few times to break up longer posts on my own site.

According to what documentation exists, though, this tag uses the function wp_link_pages(). This function accepts a few parameters that allow you to style the output as needed.

In your case, you'd want to use the next_page_link and previous_page_link arguments.

So at the bottom of single.php, use the following code to generate your page links:

<?php 

wp_link_pages( array(
    'before' => '<p>',
    'after' => '</p>',
    'next_or_number' => 'next', 
    'previouspagelink' => ' &laquo; ', 
    'nextpagelink' => ' &raquo;'
    )
); 

?>

This will replace the page numbers with << and >> arrows. It will also remove the "Pages:" text while keeping your links contained within a <p></p> block.

Related:

3
  • Thanks, @EAMann. Just need a bit of clarification. I want this to appear on a "page", rather than on posts, and I need it to be repeatable several times on a particular page (the client wants up to 8-10 page splits per page). Will this code you've given me for the bottom of the page template apply to each instance of a page split on a given page?
    – Ray Gulick
    Sep 3, 2010 at 22:36
  • Also, is it "either" numbers or previous/next links? Can't have both?
    – Ray Gulick
    Sep 3, 2010 at 22:42
  • So a little research tells me it's repeatable (essentially, that's the difference between <!--more--> and <!--nextpage-->). Still wondering if I can display page numbers AND prev/next links.
    – Ray Gulick
    Sep 3, 2010 at 23:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.