Button-Style Pagination (SCSS)
Turns the page numbers under the blog, archives and Query Loop blocks into evenly sized rounded buttons with a clear current-page state.
Opens WPIDE on
Code
$accent: #2271b1;
$size: 2.4em;
.nav-links,
.wp-block-query-pagination-numbers {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
}
.nav-links .page-numbers,
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: $size;
height: $size;
padding: 0 0.8em;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 6px;
text-decoration: none;
&:hover,
&:focus {
border-color: $accent;
color: $accent;
}
&.current {
border-color: $accent;
background: $accent;
color: #fff;
}
&.dots {
border-color: transparent;
}
}Notes
Covers classic theme pagination (.nav-links) and the Query Pagination block.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.