The Portfolio block: Toolbar and Pagination
The Toolbar & Pagination panel adds the controls visitors use to browse projects: filter, sorting, search and pagination.
Category Filter and Sort Control
The filter lets visitors narrow the grid to one category; the sort control lets them reorder it. Both sit in the toolbar above the projects and are off by default.
Open Toolbar & Pagination. Under Controls, switch on Category Filter or Sort Control, then click the card to open its options.
Category Filter
| Setting | What it does | Default |
|---|---|---|
| Display Type | Inline Text shows all categories in a row. Select shows one button that opens a dropdown list | Inline Text |
| Filter Style (Inline Text only) | Underline tabs, Filter chips or Outlined buttons | Underline tabs |
| Border Radius (Select only) | Corner rounding of the dropdown button, 0–20 px | 20 |
| “Default” Label | Text of the first item, which shows all categories | All |
| Show Counter | Adds the number of projects next to each category | Off |
The filter lists every category that has at least one published project. It is not available when Source is By Author or By ID.
Sort Control
| Setting | What it does | Default |
|---|---|---|
| Display Type | Select shows one button with a dropdown. Inline Text shows all options in a row | Select |
| Sort Style (Inline Text only) | Underline tabs, Filter chips or Outlined buttons, the same looks as the filter | Underline tabs |
| Border Radius (Select only) | Corner rounding of the dropdown button, 0–20 px | 20 |
Visitors can choose from five options: Default Sorting (the order set in the Content panel), Sort by Date (Newest), Sort by Date (Oldest), Sort by Title (A-Z) and Sort by Title (Z-A).
To give the filter, sorting and pagination one consistent look, pick the same style in all three.
Position
The Position group arranges the filter and the sort control in the toolbar. It appears as soon as the filter, sorting or search is on.
| Tile | Result |
|---|---|
| Left | Both controls together at the left edge |
| Right | Both controls together at the right edge |
| Center | Both controls together in the middle |
| Split (default) | Filter at the left edge, sort control at the right edge |
The line above the tiles shows the current order, for example “Filter → Sort”. Click Swap to reverse it: the sort control goes first and the filter second. In Split this moves the sort control to the left edge and the filter to the right.
On narrow screens the controls wrap onto separate lines.
Search
Search adds a round button to the toolbar. Clicking it opens a dropdown where visitors type and see matching projects at once.
Switch on the Search card under Position, then click it to open the options.
How it works for visitors
- The visitor clicks the search button; the dropdown opens and the field is focused.
- Results appear while typing. Each shows a thumbnail, the title with the matched part in bold, and the category.
- Clicking a result opens that project.
- Show all results filters the grid below to every match.
Keyboard: arrow up and down move through the results, Enter opens the selected one, Esc closes the dropdown.
Search matches project titles. Up to eight results are listed; the counter shows the total. Password-protected projects are included and marked with a lock.
Why it is fast
The list of projects is loaded once, the first time a visitor opens the search, and is then filtered in the browser. Typing does not send requests to your server. The list is cached and refreshed whenever a project or category is saved.
Options
| Setting | What it does | Default |
|---|---|---|
| Placeholder | Hint text inside the field | Search projects |
| Placement | Top: its own row above the filter and sorting. Inline: in the same row. Bottom: its own row below them | Inline |
| Alignment | Left, Center or Right (see below) | Right |
| Border Radius → Search Button | Rounding of the round button, 0–18 px. 18 is a circle, 0 is a square | 18 |
| Border Radius → Search Field | Rounding of the field inside the dropdown, 0–22 px. 22 is a pill | 22 |
What Alignment means:
| Placement | Left | Center | Right |
|---|---|---|---|
| Top or Bottom | Button at the left of its row | Button in the middle | Button at the right |
| Inline | First item in the toolbar | Between the filter and the sort control | Last item in the toolbar |
The dropdown is anchored to the same side as the Alignment: with Right it lines up with the right edge of the button and opens to the left.
Scope
The search looks only among the projects the block can show. If Source is By Category, By Author or By ID, results are limited to that category, author or list.
After “Show all results”
The grid shows the matches. If nothing matches, visitors see “Nothing found” with a Clear search link. To go back to all projects, open the search, clear the field and press Enter.
To place a search button outside the block, for example in the site header, use the shortcode described in “Archive and search shortcode”.
Pagination and Behavior
Pagination splits a long portfolio into pages; Behavior decides whether the page reloads when visitors filter, sort or change page.
Pagination
Switch on the Pagination card and click it. The number of projects per page is Per Page in the Layout panel. Pagination is not used in the Carousel layout.
| Setting | What it does | Default |
|---|---|---|
| Pagination Type | Numbers: page links 1, 2, 3 with previous and next. Load More Button: one button that adds the next projects under the current ones | Numbers |
| Pagination Style (Numbers) | Underline tabs, Pagination chips or Outlined buttons | Pagination chips |
| Button Text (Load More) | Text on the button | Load More |
| Alignment | Left, Center or Right | Left |
Load More Button needs Enable AJAX to be on; until then it is greyed out in the list.
Behavior
| Setting | What it does | Default |
|---|---|---|
| Show Divider | Line under Filter, Sort and Search, separating them from the projects below | On |
| Enable AJAX | Filter and page through projects without reloading the page | Off |
With Enable AJAX on:
- Clicking a category, a sort option or a page number replaces the projects in place.
- Load More becomes available.
- “Show all results” in the search updates the grid without a reload.
With it off, the same controls still work; the page reloads and the choice is kept in the address, for example ?sp_category=branding. Such links can be shared and bookmarked.
| Address parameter | Meaning |
|---|---|
sp_category | Active category (its slug) |
sp_sort | Active sorting: date-desc, date-asc, title-asc, title-desc |
sp_paged | Page number |
sp_search | Search text |
The parameters work in both modes, so you can link straight to a filtered portfolio, for example /portfolio/?sp_category=branding.
Still stuck? Write to support.
Contact