I would like to change the output of posts_nav_link(); ( Or be pointed in a new direction, that's fine by me ) What i want to do is show < Previous archivepage| Next archivepage > even if there is no previous or next page, currently it removed whichever link isn't in use, i would like it to still show the text < previous, so i can style it in a lighter grey tone ( disabled ) Hope this makes sense.

I've tried creating custom page nav for my archive pages but it wont work..

 <h1>custom loop</h1>
 <div class="col-md-12">

 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

 $args = array(
     'post_type'=>'post', // Your post type name
     'posts_per_page' => 6,
     'paged' => $paged,

 $loop = new WP_Query( $args );
 if ( $loop->have_posts() ) {
     while ( $loop->have_posts() ) : $loop->the_post();

              // YOUR CODE
 echo '<br/>';
<div class="navigation"><p><?php posts_nav_link(); ?></p></div>

Desired output:

< Previous archivepage | Next archivepage >

posts_nav_link() just outputs get_previous_posts_link() and get_next_posts_link() with a separator between them. The helpful thing is does is handle the visibility of the separator depending on whether both pages exist. Since you always want to show something on either side, you don't need it. What you can do is output the next and previous links manually, but with a check to see of there is a link. If there isn't you can output a span instead.

That would look like this:

if ( get_previous_posts_link() ){
    previous_posts_link( 'Previous' );
} else {
    echo '<span aria-hidden="true">Previous</span>';

echo '|';

if ( get_next_posts_link() ){
    next_posts_link( 'Next' );
} else {
    echo '<span aria-hidden="true">Next</span>';

Now you can style <span> as the inactive link.

Note that I've used aria-hidden="true" to tell screen readers to ignore the text of the inactive 'links' as an accessibility featured.

  • 1
    thanks, you forgot 2 ; after the span statements i've edited and tested, works out of the box. Will accept – DGRFDSGN Feb 28 '18 at 10:41

The posts_nav_link() function accepts 3 arguments.

<?php posts_nav_link( $sep, $prelabel, $nextlabel ); ?> 

You can set the $sep to '|' and change the next and previous labels. There's no need to output back and forth navigation separately.

  • will it work,if there is no previous or next page? – Kanon Chowdhury Feb 28 '18 at 12:26
  • The accepted answer doesn't show the links if there is no posts. Check the if ( get_previous_posts_link() ){ ... } part. But I'm not sure if my answer acts the same way, you can paste the code and simply try it. – Jack Johansson Feb 28 '18 at 13:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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