How to Customize Pagination in WordPress Block Editor

Pagination is a critical component in web design, particularly for websites that feature long-form content such as blogs or product listings. Effective pagination ensures a seamless browsing experience, enhancing both user satisfaction and search engine optimization (SEO).

The pagination feature in the WordPress Block editor, commonly known as Gutenberg, is part of the Query Loop block, not a stand-alone block. The Query Loop block allows you to display posts or create custom templates in a block theme.

The pagination block in Gutenberg’s Query Loop is fairly limited when it comes to customization out-of-the-box. Its default design may not always match the aesthetic needs of your site, but you can enhance its appearance and functionality by utilizing custom CSS.

This article will guide you through the steps to modify and optimize pagination within the Gutenberg editor by adding custom CSS, allowing you to enhance your site’s navigation and overall user experience.

Steps to Customize Pagination in WordPress Block Editor

Step 1: Create or Edit a Page or Template

Create a new post type (page/post) or select the existing one. If you’re using a block theme, you can also add a new template or edit the existing one using Site Editor.

In this example, we will create a new page that we will use as a posts page (blog page).

Add the Query Loop Block

On your WordPress dashboard, navigate to Pages -> Add New Page. In the Gutenberg, add a Query Loop block. This block allows you to display posts, pages, or custom post types.

You can choose a pattern for the query loop or start blank. For this example, we choose the start black option, and then for the variation of the query loop, we select Image, Date, & Title.

Next, you can edit and style up the appearance of all elements in the Query Loop block using Block settings.

Step 2: Identify the Pagination Element CSS Class

You need to pinpoint its specific CSS class before customizing the pagination element. Commonly, the class name depends on the WordPress theme and any active plugin you use. So, how do you get the CSS class name of each pagination element on your page?

Preview your page by clicking the Preview in new tab button.

You can use the built-in Developer Tools of your web browser (nearly all web browsers have this feature). If you use Google Chrome, you can click the menu icon (three-dot icon) and select More Tools -> Developer Tools.

Once you’ve entered the Developers Tools window, click the arrow icon to inspect an element on your page (see the image below).

Next, point the cursor to the pagination elements (main pagination container, individual page numbers, current page number, previous and next buttons) to determine their classes.

As you can see from the image above, we’ve identified the CSS classes of our pagination elements, below:

Step 3: Adding Custom CSS for Pagination

Next, we will add the CSS snippet to the WordPress theme customizer to customize the pagination element in the Query Loop block. On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Afterward, copy the CSS snippet below and paste it into the available field.

Note: If you’re using a block theme, click here to learn how to enable a theme customizer on your WordPress.

.wp-block-query-pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.wp-block-query-pagination .page-numbers {
  padding: 5px 8px;
  background-color: #f0f0f0;
  margin: 0 3px;
  color: #000000;
}

.wp-block-query-pagination .page-numbers.current {
  background-color: #601599;
  color: white;
}

.wp-block-query-pagination-previous {
  padding: 8px 12px;
  background: #233b27;
  margin: 0 4px;
  color: #ffffff;
  border-radius: 4px;

}

.wp-block-query-pagination-next {
  padding: 8px 12px;
  background: #233b27;
  margin: 0 4px;
  color: #ffffff;
  border-radius: 4px;
}

.wp-block-query-pagination .page-numbers:hover {
  background-color: #be76f5;
  color: white;
}

.wp-block-query-pagination-previous:hover {
  background: #ffb300;
  color: #000000;
}

.wp-block-query-pagination-next:hover {
  background: #ffb300;
  color: #000000;
}

Don’t forget to click the Publish button to apply the changes you’ve made.

That’s it. To see the result, please return to your page and then preview it. You will see that your pagination elements are customized. Feel free to replace the CSS property values to get the looks that match your overall design.

Don’t forget to save your page or publish it if you want to.

What did the CSS code do?

• Main pagination container: .wp-block-query-pagination
  • Uses Flexbox to center the pagination items and adds vertical spacing (20px).
• Individual page numbers: .wp-block-query-pagination .page-numbers
  • padding: 5px 8px;: Creates spacing inside each page number. It adds 5px of vertical padding (top and bottom) and 8px of horizontal padding (left and right), increasing the clickable area.
  • background-color: #f0f0f0;: Sets the background color of the page numbers to a light gray (#f0f0f0).
  • margin: 0 3px;: Adds horizontal space (3px on both left and right) between the page number elements. There’s no vertical margin, so the spacing only affects the horizontal alignment.
  • color: #000000;: Changes the text color of the page numbers to black, ensuring it contrasts well with the light background.
• Current page number: .wp-block-query-pagination .page-numbers.current
  • background-color: #601599;: Changes the background color of the current (active) page number to a rich purple (#601599). This visually indicates which page is currently selected.
  • color: white;: Sets the text color to white, offering high contrast against the purple background, making the active page number visible.
• Previous and Next Buttons: .wp-block-query-pagination-previous and .wp-block-query-pagination-next
  • Styled with dark green background, white text, padding, and slightly rounded corners.
• Hover Effects:
  • .wp-block-query-pagination .page-numbers:hover
    • When the user hovers over any individual page number, the background color changes to a light purple (#be76f5) for a subtle interactive effect.
    • The text color changes to white, enhancing the contrast and improving readability during hover.Hover Effects:
  • .wp-block-query-pagination-previous:hover and .wp-block-query-pagination-next:hover
    • When the user hovers over the “Previous” or “Next” buttons, the background changes to a vibrant yellow-orange (#ffb300), making them stand out.
    • The text color changes to black, offering clear readability against the bright background.

The Bottom Line

This article shows how easily you can customize the pagination in WordPress Block Editor without the help of any plugin. Customizing pagination in the WordPress Block Editor with custom CSS allows for greater control over the appearance and functionality of your site’s navigation.

By leveraging CSS, you can tailor the pagination to match your brand’s style, improve the user experience, and enhance the overall design of your WordPress site. Whether you choose to adjust colors, sizes, or the layout of pagination elements, the flexibility of custom CSS empowers you to create a seamless and visually appealing user journey across your website.

However, if you want rich design options without the need for custom CSS, we highly recommend you use a WordPress plugin such as Divi or Elementor, as both offer intuitive visual builders with extensive customization features, allowing you to create stunning, fully responsive layouts with advanced pagination, dynamic content, and styling options directly within the page builder interface.