Build a searchable directory in WordPress without a page builder

ByDave

How Filtered Directory turns any custom post type into a filterable, paginated, fully themeable frontend listing — in minutes.

If you have ever needed to build a directory on a WordPress site, you know how quickly the options narrow down. Dedicated directory plugins tend to be bloated, opinionated, and expensive. Page builders can produce the visual result but leave you with a filtering and pagination problem to solve separately. And building it from scratch with custom queries and AJAX takes longer than the project budget allows.

Filtered Directory is a module in the ToggleWP Admin Toolkit that takes a different approach. It is not a drag-and-drop site builder. It is a focused tool that handles the specific, repetitive engineering work involved in building a directory: field management, filterable AJAX search, faceted counts, pagination, card layouts, and single-entry detail pages. You configure it in the admin, drop a shortcode on a page, and the directory is live.

What kinds of directories can you build?

Filtered Directory works with any custom post type — which means the answer is broad. Some examples:

  • Member or supplier directories — searchable by location, specialism, or accreditation
  • Job boards — filterable by role type, location, and salary range
  • Resource or document libraries — organised by category with file download buttons
  • Event venue or service provider listings — with contact links and featured images
  • Partner or agency directories — filterable by service area or industry

The module is field-agnostic. You define the fields, choose their types, and configure which ones appear where. The structure of the directory is entirely up to you.

You can use your existing post types

This is one of the more useful aspects of the module that is easy to miss. You do not have to create a new custom post type to use Filtered Directory. If your site already has a CPT registered by another plugin — a WooCommerce product type, an events plugin, a members plugin — you can link it.

When you link an external CPT, the Detect Fields button scans its registered taxonomies and post meta keys and adds them to your field schema automatically. You then choose which fields appear on cards, which are filterable, and which appear on the detail page. The external plugin keeps managing its own data; Filtered Directory handles the frontend presentation.

This matters for agencies in particular. A client site often already has structured data in a custom post type — the job is to expose it as a public directory, not to rebuild the data model.

Field types that cover real use cases

Directories are not just lists of text. Filtered Directory supports eight field types, each rendered appropriately on both the card grid and the single entry page:

Text and number fields are straightforward — shown as label/value pairs on cards, full values on detail pages.

Textarea fields get their own section with a heading on the detail page — appropriate for longer descriptions like bios or service descriptions. On cards they are truncated to a clean excerpt.

Select and multiselect fields power the filter bar. Selecting a value narrows the directory. Selecting multiple values in the same field returns entries matching any of them. Selecting values across different fields narrows to entries matching all of them. This is the standard faceted filtering behaviour you would expect from a well-built product catalogue, applied to directory listings.

URL and email fields are rendered as proper links — email addresses with mailto: and basic spam-bot obfuscation, URLs opening in a new tab.

File fields render as download buttons on the detail page, showing the original filename. Useful for PDF brochures, certifications, or spec sheets attached to directory entries.

Taxonomies work as filters too. If your CPT uses WordPress taxonomies for categorisation, those terms appear in the filter bar alongside your custom meta fields.

The filter bar is built for real users

The filter bar is where directories succeed or fail as a user experience. A filter that shows 47 options in a flat list and requires scrolling to find anything is not a useful filter — it is friction.

Filtered Directory addresses this with two features on every filter dropdown: live search and faceted counts.

Live search lets a user type within a dropdown to narrow the visible options instantly. If your location filter has 60 entries, typing “Man” immediately surfaces Manchester, Mansfield, and Manitoba without scrolling.

Faceted counts show how many entries match each option given the current active filters — and they update after every selection. If you have already filtered to Agency type and you are looking at the Location filter, the counts reflect how many agencies are in each location, not how many total entries. Options with zero matches are greyed out so users never reach an empty result set.

Both features work through AJAX — no page reloads, a 300ms debounce on changes, and a loading state on the grid while results update.

The card grid and detail pages handle themselves

The listing grid is responsive out of the box: three columns on desktop, two on tablet, one on mobile. You choose which fields appear on each card and the module renders them. Featured images are supported on cards, on detail pages, or both — configured with a single setting.

The single-entry detail page uses a configurable layout builder. From the Fields tab in the admin, you drag fields into two or three columns and set the width ratio of each column. A field not assigned to any column falls into a pool section below the grid. On mobile, the layout collapses to a single column automatically.

Every aspect of the detail page is type-aware. Textarea fields get their own section with a heading. Email addresses are obfuscated against spam bots. File fields render as download buttons. If the entry has a post_content, it is passed through WordPress’s content filter — shortcodes and blocks render normally.

Action buttons on the detail page are driven by a single setting: none, email, URL, or both. This covers the common directory pattern of entries that link out to a contact form or an external website.

If an entry is deleted, any inbound links to its URL can be configured to 301 redirect to a fallback page — the directory homepage, a “this listing has been removed” page, or anywhere else — rather than showing a 404.

Styling that gets out of the way

The module ships with clean, minimal CSS that gives you a working directory without imposing a visual style. All colours, border radius, and spacing are controlled through CSS custom properties:

:root {
  --cptl-primary: #0073aa;
  --cptl-radius:  6px;
  --cptl-gap:     20px;
}

Override these in your theme stylesheet and the entire component updates. The class naming is consistent and descriptive — .cptl-directory__card, .cptl-directory__filters, .cptl-single — so targeted overrides are straightforward.

For deeper customisation, both the card template and the single-entry template can be overridden by copying them into your theme’s directory. The plugin checks for theme overrides first and falls back to its own templates if none are found.

The admin is a configuration interface, not a wizard

Most of the setup work happens in a single two-tab interface per directory.

The Setup tab covers the structural configuration: labels, URL slug, items per page, default sort order, featured image placement, redirect URL, and action type. These are the settings you set once and rarely revisit.

The Fields tab is where you spend most of your time. The field table is sortable by drag-and-drop. Each row shows the field label, its meta key, its type, and checkboxes for on-card, filterable, and in-template. Inline editing lets you rename fields and update select options without a separate form. Below the field table is the layout builder for the detail page — the same drag-and-drop approach, with column width controls per column.

For external post types, clicking Detect Fields runs a scan of the CPT’s registered taxonomies and meta keys and adds any that are not already in your schema. It does not overwrite existing configuration.

The shortcode for each directory is shown at the top of the page with a one-click copy button.

Performance: Facet caching

Faceted counts are the most expensive operation in a filtered directory — calculating how many entries match each option across every combination of active filters requires multiple database queries per filter interaction.

Filtered Directory caches facet results as WordPress transients with a one-hour TTL. The cache key includes the active filter combination, so different filter states are cached independently. When any entry in the directory is saved or deleted, the cache version for that directory is incremented, which invalidates all existing facet transients for that CPT. This means counts are always accurate without recalculating on every page load.

Getting started

Filtered Directory is a premium module in the ToggleWP Admin Toolkit. Once activated, navigate to ToggleWP → Filtered Directory in the WordPress admin.

To create a new directory: click Add Directory, enter your CPT labels and URL slug, and save. Flush permalinks once to register the new post type URLs.

To build a directory from an existing CPT: use the Link Existing form, which lists all public post types not already linked. Select one, save, then use the Detect Fields button in the Fields tab to populate the field schema.

Add the shortcode to any page:

[cptlisting post_type="your-cpt-slug"]

The directory is live. From there, refine which fields appear on cards and in the filter bar, configure the detail page layout, and adjust styling through CSS variables to match your theme.

Filtered Directory is a premium module in the ToggleWP Admin Toolkit. It requires no additional plugins and works alongside any theme.

Similar Posts