How to use custom previous/next link ?

Question

I have this :

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

Which gives this output :

What I want is this :

How to do this using the_posts_pagination() please ?

Answer 1

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.

Answer 2

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.