I have this :

    <?php the_posts_pagination( array(
      'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
      'next_text'          => __( 'Next page', 'twentyfifteen' ),
    ) ); ?>

Which gives this output :

enter image description here

What I want is this :

enter image description here

How to do this using the_posts_pagination() please ?

2 Answers 2


Do this to output only links for previous and next pages:

<?php previous_posts_link ( 'Previous' ) ?>
<?php next_posts_link ( 'Next' ); ?>

Then add filters to your functions.php to add a class to each link:

function next_posts_link_css ( $content ) {
    return 'class="next"';
add_filter( 'next_posts_link_attributes', 'next_posts_link_css' );

function previous_posts_link_css ( $content ) {
    return 'class="prev"';
add_filter( 'previous_posts_link_attributes', 'previous_posts_link_css' );

Then style the .next and .prev links using CSS.


Right click on next page and previous page links and inspect element (assuming you are using chrome). You will get to know the classes and then style as you like.

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.