Support » Themes and Templates » wp_link_pages Next/Prev Links in Separate Divs?

  • Resolved MattRichardson



    I’m modifying a WordPress template’s next/previous links for paginated posts. At the bottom of the post, I’d like it to show, a left-aligned “Go Back” (when applicable) and then, on the same line a right-aligned “Continue Reading” (again, when applicable). In order to do this, I presume I need these links in separate divs. Using wp_link_pages, I can see that I can customize the text, but I don’t see how to put them into separate divs.

    I thought perhaps I could also call the function twice and suppress “next” and “previous” in each call respectively.

    Here’s what I have so far, with both links appearing in the same div:
    <?php wp_link_pages( array( 'before' => '<div class="page-link-next-prev">', 'after' => '</div>', 'next_or_number' => 'next', 'nextpagelink'=> __('Continue Reading'), 'previouspagelink' => __('Go Back') ) );?>

    Is there a way I can make this happen with the “stock” wp_links_pages function? Or will I need to create a new function for this?

    Matt Richardson

Viewing 7 replies - 1 through 7 (of 7 total)
  • I have a function in my functions.php for handling this. It’s a nice a clean way of doing it really.

    Add this to your functions.php file:

    function ShowPostsNav() {
       global $wp_query;
       return ($wp_query->max_num_pages > 1);

    And then put this wherever you want the links to appear:

    <?php if ($wp_query->max_num_pages > 1) : ?>
       <?php next_posts_link(__('<span class="older_posts">&larr; Older posts</span>')); ?>
       <?php previous_posts_link(__('<span class="newer_posts">Newer posts &rarr;</span>')); ?>
    <?php endif; ?>

    Should work just fine for you 🙂


    Perhaps I’m mistaken, but I think you’re answering the wrong question. I have very long posts which are paginated with the <!–nextpage–> tag. I need to be able to have “next page” and “previous page” in seperate divs at the bottom of each of these post pages.

    The code you posted looks to be for post listings, like on archive, tag, and category pages. I did try the code anyway, and I couldn’t get it to work in my loop-single.php


    Ah! My apologies, should have read your question more thoroughly.

    I’m not wholly familiar with the function but I believe it is possible to place them in their own divs based on the example in the codex (

    You could try something like this maybe?

    <?php $args = array(
        'before'           => '<div class="page-link-next-prev">',
        'after'            => '</div>',
        'link_before'      => ,
        'link_after'       => ,
        'next_or_number'   => 'next',
        'nextpagelink'     => __('<div class="next">Continue Reading</div>'),
        'previouspagelink' => __('<div class="prev">Go Back</div>'),
        'pagelink'         => '%',
        'more_file'        => ,
        'echo'             => 1 ); ?>
    <?php wp_link_pages( $args ); ?>

    Thank you! I don’t know why I didn’t think to put the div tags in the nextpagelink and previouspagelink parameters, but that works perfectly.

    Thank you again for your help,

    Not a problem, sorry it took me a while to understand the question aha 🙂

    Unfortunately this method doesn’t quite work because the <div class="next"> tag goes inside the anchor element. Is there anyway of adding some html outside of the anchor elements. Something like this would be ideal:

         <li class="previous"><a href="#">Previous</a></li>
         <li class="next"><a href="#">Next</a></li>

    Does anyone know how this could be achieved?


    Oliver, THANK YOU SO MUCH! I have been banging my head against a wall for hours. Isn’t it always true that the answer is so simple?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘wp_link_pages Next/Prev Links in Separate Divs?’ is closed to new replies.