wp_link_pages Next/Prev Links in Separate Divs?

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 ??

Oliver,

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

Thanks

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 (https://codex.www.ads-software.com/Template_Tags/wp_link_pages)

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,
Matt

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:

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

Does anyone know how this could be achieved?

Thanks,
Chris

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?