---
title: "How to Add Ajax Pagination to Search Results in WordPress?"
url: https://nexterwp.com/docs/add-ajax-pagination-to-search-results-in-wordpress/
date: 2024-12-02
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "A search that returns sixty results and shows all of them is not a result list, it is a wall. Numbered pagination gives the visitor a fixed number per page..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Ajax-Pagination-to-Search-Results-in-WordPress_-1024x519.jpg
word_count: 553
---

# How to Add Ajax Pagination to Search Results in WordPress?

## Key Takeaways

- Nexter Blocks Search Bar muestra paginación cuando una búsqueda devuelve más de una página, y con un tamaño de página de 3 sobre un término que coincide con 14 elementos informa 14 en total y devuelve 3 resultados.
- La configuración de navegación se guarda en el bloque, incluyendo el tamaño de página, si el contador se muestra, cuántos números aparecen a la vez y las etiquetas de anterior y siguiente, para que el script renderice los controles sin otra solicitud.
- AJAX search debe estar activado para que la paginación funcione en el lugar; si está desactivado, la barra actúa como un formulario normal que envía a la página de búsqueda propia de WordPress.

A search that returns sixty results and shows all of them is not a result list, it is a wall.

Numbered pagination gives the visitor a fixed number per page and a way to move between them, without the page reloading.

*For every Search Bar setting in one place, see the [Search Bar guide](https://nexterwp.com/docs/add-a-search-bar-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-ajax-search-bar/)

## Before You Start

- **Edition:** Free. Measured with Nexter Blocks Pro deactivated, the Search Bar renders identically — form, input, dropdowns, suggestions and results all work without Pro.- **Block to enable:** Search Bar, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Published content to find.** The block searches your real posts, so a site with nothing published returns nothing.- **Enough content to paginate.** With fewer matches than your page size there is nothing to page through.

## Steps

- Select your **Search Bar** block and set the number of results per page.

![Results per page](https://nexterwp.com/wp-content/uploads/2026/09/sb-loading-pagination.webp)

- Set the loading behaviour to **pagination**.

![Choosing pagination](https://nexterwp.com/wp-content/uploads/2026/09/sb-loading-pagination.webp)

- Set the previous and next labels, and how many page numbers to show at once.

![Pagination navigation settings](https://nexterwp.com/wp-content/uploads/2026/09/sb-loading-pagination.webp)

- Publish and run a search that returns more than one page.

![Paginated search results](https://nexterwp.com/wp-content/uploads/2026/09/sb-fe-pagination.webp)

## How It Behaves

Measured with a page size of 3 against a term matching 14 items: the block reported 14 total and returned 3, which is pagination working exactly as it should.

- **The full navigation configuration is written onto the block** — the page size, whether the counter shows, how many numbers appear at once, and the previous and next labels — so the script can render the controls without another request.- **Page numbers beyond the visible window are rendered but hidden**, then revealed as the visitor moves through. This keeps the control a fixed width on long result sets.- **Previous and next can carry text, an icon, or both.**- **The total count is available separately**, so a results total can be shown above the list.- **AJAX search has to be switched on** for results to appear as you type. With it off the bar behaves as a plain form that submits to WordPress's own search page.

## Limitations

- **Each page is a fresh request.** Nothing is prefetched, so a visitor clicking through several pages makes several round trips.- **Pagination state is not in the URL.** A visitor cannot link to page three of a search, and going back in the browser will not return them to it.- **A page size too small makes the control the main feature.** Three per page on a wide layout leaves a lot of empty space under a lot of buttons.- **Only one loading behaviour at a time.** Pagination, load more and lazy loading are alternatives, not a set you combine.

## Troubleshooting

### No pagination appears

The search returned fewer results than your page size, so there is only one page. Try a broader term or a smaller page size.

### Clicking a page number does nothing

AJAX search has to be on. Without it the block has no way to fetch the next page in place.

### The numbers run off the edge on mobile

Reduce how many page numbers are shown at once. The rest stay hidden until they are needed.

### I would rather have a button than numbers

Use the load more behaviour instead. See the [load more doc](https://nexterwp.com/docs/add-ajax-load-more-button-to-search-results-in-wordpress/).

## Related Docs

- [Add an AJAX load more button to search results](https://nexterwp.com/docs/add-ajax-load-more-button-to-search-results-in-wordpress/)- [Add AJAX lazy load to search results](https://nexterwp.com/docs/add-ajax-lazy-load-to-search-results-in-wordpress/)- [Add a search bar in WordPress](https://nexterwp.com/docs/add-a-search-bar-in-wordpress/)- [Add AJAX search for WooCommerce products](https://nexterwp.com/docs/add-ajax-search-for-woocommerce-products-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)

## Frequently Asked Questions

**Q: What do I need before adding Ajax pagination to WordPress search results?**
A: Three things matter before pagination will show up: the Search Bar block must be enabled under Nexter > Blocks, there has to be published content for the search to find, and the result set has to be larger than the page size. Nexter Blocks Pro is not required here, because the Search Bar renders identically with Pro deactivated. If the site has no published posts or too few matches, there is nothing for pagination to split.

**Q: Why is Ajax pagination better than showing all search results on one page?**
A: A long result list turns into a wall fast. Numbered pagination keeps each page to a fixed count and lets visitors move through results without reloading the page. That matters when a search returns a lot of matches, because the control stays readable and the visitor gets a clearer sense of where they are in the list. Nexter Blocks also writes the full navigation setup onto the block so the controls can render without another request.

**Q: How does Ajax pagination behave in WordPress search results?**
A: The block reports the total matches separately from the page slice it shows, so a search can return 14 total items while only showing 3 at once. Page numbers beyond the visible window are still rendered, then hidden until they are needed, which keeps the control from stretching across long result sets. Previous and next labels can use text, an icon, or both, so the navigation can stay compact or more descriptive.

**Q: Can I use Ajax pagination with load more or lazy load on the same search results?**
A: Pagination is one loading behavior, not part of a stack you combine with other behaviors. The page treats pagination, load more, and lazy loading as alternatives. That matters when choosing a layout strategy: numbered pages work best when you want direct navigation between result pages, while load more is better if you want a button instead of page numbers.

**Q: Why does clicking a page number do nothing in WordPress search results?**
A: AJAX search has to be switched on for in-place paging to work. With AJAX off, the bar behaves like a plain form that submits to WordPress’s own search page, so there is no live request available to fetch the next result page inside the current view. In practice, this is the first thing to check when pagination looks right but feels dead.

**Q: How do I stop search pagination numbers from running off the edge on mobile?**
A: Reduce how many page numbers are shown at once. The block already hides extra numbers until they are needed, so shrinking the visible window keeps the control inside narrow screens without losing access to later pages. That is usually better than forcing tiny buttons across mobile, especially when your page size is small and the navigation starts competing with empty space.