Next and Previous Buttons in Pagination instead of numbers

Hi there,

try adding this PHP Snippet to your site:

add_action('wp',function(){
	remove_action( 'generate_after_loop', 'generate_do_post_navigation' );	
});

add_action( 'generate_after_loop', function() {	
    echo '<div class="paging-navigation">';
    posts_nav_link( ' ', '← Previous', 'Next →' );
    echo '</div>';

});

How to add PHP: https://docs.generatepress.com/article/adding-php/

Added it but whenever we click on Next, it is showing page numbers from second page.

Hi Rohith,

I tested on the code on my side and it works well.

Are you using any other custom functions?

Can you try disable all your plugins except GP premium to test?

If you are using a child theme, can you switch to the parent theme to test?

Let me know!

It's working now but I want to display Next and Previous as buttons. Can you please help in doing that.

You can use CSS to style it, for example:

.paging-navigation a {
    padding: 5px 10px;
    background-color: blue;
    color: white;
    text-decoration: none;
}

1. It worked. I want to remove the underline, how to do that? There's an underline for the words 'Next' and Previous'
2. The Next and Previous are displaying side by side. Is it possible to display one to the left and the other to the right?

1. Updated CSS here:https://generatepress.com/forums/topic/next-and-previous-buttons-in-pagination-instead-of-numbers/#post-2216881

2. Solution 1:

You can try this:

.paging-navigation {
    display: flex;
    justify-content: space-between;
}

But it won't work when there's only nextor previous.

Solution 2:

Add this PHP snippet to add class to the links:

add_filter('next_posts_link_attributes', 'posts_link_attributes_next');
add_filter('previous_posts_link_attributes', 'posts_link_attributes_previous');

function posts_link_attributes_next() {
  return 'class="next-page"';
}
function posts_link_attributes_previous() {
  return 'class="previous-page"';
}

Then add this CSS:

.paging-navigation {
    display: flex;
    justify-content: space-between;
}
.paging-navigation >a.next-page {
    margin-left:auto;
}