[Support request] 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/

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!

You can use CSS to style it, for example:

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

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;
}