Portfolio Search

The Portfolio Search page gives visitors a dedicated, full-page search experience for browsing your portfolio. Unlike the navigation autocomplete (which searches all content types as you type), Portfolio Search displays results in a visual grid with sidebar filters - purpose-built for exploring projects.

#How It Works

Portfolio Search uses Algolia InstantSearch to deliver near-instant results as visitors type. The page features:

• Search box - free-text search with real-time results (no page reload)
• Filter sidebar - narrow results by Category, Industry, or Client
• Visual grid - portfolio cards with thumbnail, title, category, client, and date
• Pagination - browse through large portfolios (9 items per page on desktop, 6 on mobile)
• Stats bar - shows "Showing X - Y of Z projects"

All filtering and searching happens client-side through Algolia CDN - results typically appear in under 50ms.

#Setting Up the Portfolio Search Page

#Step 1: Configure Algolia

Make sure you've completed the Algolia setup described in the parent article:

1. WP Search with Algolia plugin is installed and active
2. Application ID and Search-Only API Key are configured in Settings > Algolia Search
3. API keys are also added in Appearance > Customize > API Keys

#Step 2: Index Your Portfolio

1. Go to Settings > Algolia Search in your WordPress dashboard
2. Make sure the Portfolio post type is enabled for indexing
3. Click Re-index to sync your portfolio items with Algolia

The theme automatically enriches each portfolio item with:

Data	Source	Used For
Title	Post title	Search matching, card display
Categories	portfolio_category taxonomy	Filter sidebar
Industries	portfolio_industry taxonomy	Filter sidebar
Client name	project_client custom field	Filter sidebar, card display
Client avatar	project_client + avatar image	Client filter icons
Date	Post date	Card display (YYYY.MM.DD format)
Thumbnail	Featured image (medium + large)	Card image
Permalink	Post URL	Card link

#Step 3: Create the Page

1. Go to Pages > Add New
2. Give the page a title (e.g., "Search Portfolio" or "Explore Work")
3. In the Page Attributes panel (right sidebar), set Template to Algolia Grid
4. Publish the page

That it - the page will automatically display the full search interface.

#The Search Interface

#Desktop Layout

On desktop, the page displays a sidebar + grid layout:

• Left sidebar (260px) - contains the search box and all filter blocks
• Main area - 3-column grid of portfolio cards with pagination below

#Mobile Layout

On mobile devices, the layout adapts:

• The sidebar becomes a slide-out panel triggered by a filter button
• The grid switches to a single column
• Items per page reduce from 9 to 6
• The sidebar automatically closes after applying a filter

#Filter Sidebar

The sidebar shows three filter groups:

1. Category - checkboxes for each portfolio_category term, with item counts
2. Industry - checkboxes for each portfolio_industry term, with item counts
3. Client - checkboxes with client avatars and names

Filters that have no available options are automatically hidden. Multiple filters can be combined - for example, filter by "Web Design" industry AND "E-commerce" category.

#Portfolio Cards

Each result card displays:

• Thumbnail - featured image with 1:1 aspect ratio and hover zoom effect
• Title - project name (links to single project page)
• Category - primary taxonomy term
• Client - client name with avatar (if available)
• Date - formatted as YYYY.MM.DD

#No Results State

When a search or filter combination returns no matches, the page displays a friendly message:

No results found. Try adjusting your search or filters.

#Animations

The page uses GSAP entrance animations on first load:

• Filter blocks fade in with a stagger effect (desktop only)
• Portfolio cards animate in with a staggered opacity + vertical slide
• Stats and pagination fade in after the cards

All animations play once on initial load and do not repeat when filtering or paginating.

#Customization

#Translatable Strings

All text in the search interface is translatable through standard WordPress i18n. The following strings can be translated:

String	Default	Where it appears
Search placeholder	"Search"	Search input
Results label	"results"	Stats bar
No results title	"No results found."	Empty state
No results text	"Try adjusting your search or filters."	Empty state
Filter: Category	"Category"	Sidebar heading
Filter: Industry	"Industry"	Sidebar heading
Filter: Client	"Client"	Sidebar heading
Showing	"Showing"	Stats bar
Of	"of"	Stats bar
Projects	"projects"	Stats bar

#Index Name

By default, the search uses the wp_posts_portfolio index. If your Algolia index has a different name, the theme will automatically detect it from the WP Search with Algolia plugin configuration.

#Performance Notes

• The theme adds a DNS prefetch for Algolia servers to reduce initial connection time
• Client avatar data is cached for 12 hours to minimize database queries
• Only medium and large image sizes are indexed to keep the Algolia index lean

#Differences from Autocomplete

Feature	Autocomplete	Portfolio Search
Location	Navigation search drawer	Dedicated page
Content types	All (posts, pages, portfolio)	Portfolio only
Display	Dropdown list	Visual card grid
Filters	None	Category, Industry, Client
Pagination	No	Yes
Best for	Quick lookups	Browsing & exploring

Last updated 6 Sep 2026