Build a tabbed search results page

Build a tabbed results page with Blocksify Pro Search Kit that separates each searchable content type and handles searches with no matches.

Before you start: Activate Blocksify Pro and the free Blocksify plugin, and publish content in at least two searchable post types. WooCommerce is optional.

Create the search Dynamic Template

1. Go to Blocksify → Dynamic Templates and click Add New. The block editor opens for a new template.
2. Enter “Northstar Search Results” as the template title.
3. Open Dynamic Template in the editor sidebar.
4. Under Display on, click the + (Add condition) button and choose Search results. The condition row appears with Any post type, which keeps the template available for the general search page.
5. Leave Don’t display on empty.
6. Use Editor preview — search query to choose a sample search query if you need one while designing. This choice affects only the editor.

The editor now recognizes a search template and makes search-only narrowing available inside inherited Content Loops. See Template display conditions for broader targeting rules.

Insert Search Tabs and check the tab list

1. Open the inserter and choose Blocksify → Search Tabs. A tab strip and one editable panel per searchable content type appear.
2. Review the generated labels. Their sequence follows your site’s WordPress registration order and may include types supplied by other plugins, such as Agents or Products.
3. Select the Search Tabs parent and open Search tabs. Keep each required type enabled under Post types.
4. Keep Hide empty tabs on. A published search will omit types with a zero count.

The tab sequence follows the site’s WordPress registration order. Generated panel rows are locked to their matching types.

Build each tab panel

1. Click Pages, then click the panel’s + and insert Content Loop. Page cards appear in the panel preview.
2. Select the Content Loop, open General, and select the Query tab.
3. Set Query source to Inherit. The loop now follows the current page query.

1. Set Narrow to post type to Pages. The hint confirms that this loop re-runs the current search for Pages only.
2. Open Card and design the page result card. Keep enough title and excerpt text to explain why each result matched.
3. Repeat the sequence for every remaining tab panel, choosing its matching value in Narrow to post type each time.

Each panel now lists only its own type while retaining the keyword. Review the free Content Loop block article for card and paging controls.

Add the Search Empty State

1. Select a point below Search Tabs, then choose Blocksify → Search Empty State. A one-column Section appears with the badge Shown when search has no results.
2. Add a heading such as “We couldn’t find that.”
3. Add a short suggestion, a Search block, and links to Find a Property, Experiences, and the shop.
4. Style the section with the same controls as the free Section block.

This section stays editable on the canvas, but visitors see it only when the main search returns zero results.

Publish and test the results page

1. Click Publish. The Dynamic Template becomes available on matching search views.
2. Search the published site for “harbour.” The custom page opens with count badges on matching tabs, arranged in WordPress registration order.
3. Open each visible tab. Its cards belong to the label shown, and the first tab with results is initially active.

1. Search for “vantorel.” Search Tabs disappears because every type has zero results, and Search Empty State appears.
2. If WooCommerce is active, search for a product. The Products count and cards should agree.
3. Return to the editor and correct any panel whose label or narrowing does not match.

Related articles

• Search Kit overview
• Search Tabs settings
• Loop Search Bar
• Tabs block
• Content Loop block