Page Numbers

You can use the default WordPress pagination block with Better Loop. This block will add links to all pages in your loop, allowing users to quickly browse and see different pages.

The page URL will update automatically when changing pages, so it’s easy to share a specific page. You can give it a try yourself with the example below.

Example

Setup

To enable page numbers, add the Pagination block to your loop. You can place the block anywhere, but in most cases you’ll want to place it somewhere below the Post Template block.

This will add a few different blocks: the main Pagination block, as well as the Previous Page, Page Numbers and Next Page inner blocks.

Each of these blocks will have some settings for styling. For the full list of options, take a look at the official WordPress.org documentation of the block.

Tip: always align page numbers in the middle

If you choose the Space between items alignment setting in the Pagination block, you might run into an issue where the page numbers are not center-aligned on the first and last page. To fix this, you can use this CSS snippet to always align the page numbers in the middle:

.wp-block-query-pagination.is-content-justification-space-between {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.wp-block-query-pagination.is-content-justification-space-between .wp-block-query-pagination-previous {
  grid-column: 1;
}

.wp-block-query-pagination.is-content-justification-space-between .wp-block-query-pagination-numbers {
  grid-column: 2;
}

.wp-block-query-pagination.is-content-justification-space-between .wp-block-query-pagination-next {
  grid-column: 3;
}

.wp-block-query-pagination.is-content-justification-space-between {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.wp-block-query-pagination.is-content-justification-space-between .wp-block-query-pagination-previous {
  grid-column: 1;
}

.wp-block-query-pagination.is-content-justification-space-between .wp-block-query-pagination-numbers {
  grid-column: 2;
}

.wp-block-query-pagination.is-content-justification-space-between .wp-block-query-pagination-next {
  grid-column: 3;
}