Page numbers make a visitor decide where to go. A load more button asks them one question at a time: do you want to see more of this?
For search results, where relevance drops as you go down the list, that is usually the better question.
For every Search Bar setting in one place, see the Search Bar guide.
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.
- More matches than your batch size. With everything fitting in the first batch there is nothing for the button to do.
Steps
- Select your Search Bar block and set how many results the first batch shows.
- Set the loading behaviour to load more.
- Set the button label, the loading label and the message shown when everything has been loaded.
- Publish and search for something with plenty of matches.
How It Behaves
Measured: switching to load more wrote the behaviour and every label onto the block, including a custom button text, so the script renders the control without another request.
- Three labels, three states. The resting label, the label while a batch is loading, and the message when there is nothing left. All three are yours to write.
- The batch size is separate from the first page size, so you can show a generous first screen and load smaller batches after it.
- A running total can be shown beside the button, so the visitor knows how much is left.
- Results append to the list. Nothing already on screen is replaced.
- 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
- The list gets long. After several batches a visitor is a long way from the search box, with no way back but scrolling.
- Nothing is in the URL. A loaded-out list cannot be linked to or restored by the back button.
- Each press is a request. Larger batches mean fewer round trips.
- Only one loading behaviour at a time. Load more, pagination and lazy loading are alternatives.
- The button stays until the list is exhausted, so a visitor cannot tell how many presses remain unless you show the total.
Troubleshooting
The button never appears
Everything matched fits in the first batch. Lower the batch size or search a broader term.
Pressing it does nothing
AJAX search has to be on for the block to fetch the next batch in place.
The button stays after everything has loaded
Set the all-loaded message. It is what replaces the button when the list is exhausted.
I would rather it loaded automatically
Use the lazy load behaviour instead. See the lazy load doc.
