[Resolved] I want modify the pagination buttons

Hi there,

you can try adding this CSS:

#nav-below .nav-links > *:not(.dots) {
    display: inline-flex;
    justify-content: center;
    margin: 0;
    padding: 0 10px;
    line-height: 40px;
    min-width: 40px;
    border-radius: 6px;
    background-color: #f00;
    color: #000;
}
#nav-below .nav-links > *:not(.dots):hover,
#nav-below .nav-links .current {
    background-color: #00f;
    color: #fff;
}

And if you want to change the length of the page numbers displayed. You can add this PHP Snippet:

add_filter( 'generate_pagination_mid_size','tu_increase_pagination_numbers' );
function tu_increase_pagination_numbers() {
    return 3;
}

Increase the 3 to show more numbers.

Add this CSS to center it:

.nav-links {
    text-align: center;
}

To remove the dots – in the PHP Snippet i provided simply return a really high value eg. 999
However you need to consider whether there is enough room for all the page numbers to be displayed.

GP uses the core the_posts_pagination function to display the nav, and that is not an option.
You can only define Start, End and Mid size values and whether to display the Next and Previous pages.

Yeah its a pity WP didn’t add it.
Its a bit of a hack, but you could try adding this CSS:

#nav-below .page-numbers:not(:is(.next,.prev)) {
	display: none;
}
#nav-below .page-numbers.current,
#nav-below .page-numbers.current+*,
#nav-below .page-numbers.current+*+*{
	display: inline-block;
}

It will hide any number except for the current number and the 2 numbers that come after it.

Try changing it to:

:is(#nav-below, .gb-query-loop-pagination) .page-numbers:not(:is(.next,.prev)) {
	display: none;
}
:is(#nav-below, .gb-query-loop-pagination) .page-numbers[class*="current"],
:is(#nav-below, .gb-query-loop-pagination) .page-numbers[class*="current"]+*,
:is(#nav-below, .gb-query-loop-pagination) .page-numbers[class*="current"]+*+*{
	display: inline-block;
}

If you edit the Query Loop -> Paginiation block, select each of the buttons ( next, numbers, prev ) and in the Spacing settings add some left or right margin. This will add the space.

You’re welcome