WP Manifestindependent plugin directory
manifest / content / cpt-ajax-filter-search-plugin

CPT Ajax Filter & Search

A lightweight WordPress plugin that adds an AJAX-powered search bar with color-coded taxonomy filters to any Custom Post Type. Supports ACF external link redirects.

by Rolando Escobar · github.com/rolandototo/cpt-ajax-filter-search-plugin

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/rolandototo/cpt-ajax-filter-search-plugin/archive/refs/heads/main.zip
Readme github.com/rolandototo/cpt-ajax-filter-search-plugin ↗

A lightweight WordPress plugin that adds an AJAX-powered search bar with color-coded taxonomy filters to any Custom Post Type. Supports ACF external link redirects.

Features

  • AJAX Search — Real-time search with 400ms debounce (no page reloads)
  • Taxonomy Filters — Color-coded tag buttons that filter posts instantly
  • Horizontal Card Layout — Logo/thumbnail on the left, content on the right in a 2-column grid
  • ACF External Links — Cards redirect to an ACF external_link URL field (opens in new tab)
  • Responsive — 2 columns → 1 column on mobile, stacks vertically on small screens
  • Lightweight — No dependencies beyond jQuery (included in WordPress)
  • Secure — Nonce verification on all AJAX requests

Installation

  1. Download or clone this repository
  2. Upload the cpt-ajax-filter folder to wp-content/plugins/
  3. Activate "CPT Ajax Filter & Search" in WordPress → Plugins
  4. Add the shortcode to any page or Gutenberg block

Usage

Basic shortcode (shows all posts):

[cpt_ajax_filter post_type="your_cpt" taxonomy="your_taxonomy"]

With custom limit:

[cpt_ajax_filter post_type="vendor" taxonomy="vendor_category" posts_per_page="12"]

Parameters

Parameter Default Description
post_type evento Your Custom Post Type slug
taxonomy evento_tag Your taxonomy slug (tags/categories)
posts_per_page -1 (all) Number of posts to display. -1 for all

If you want cards to redirect to an external URL instead of the single post:

  1. Install Advanced Custom Fields (ACF)
  2. Create a field group assigned to your CPT
  3. Add a URL field with the name external_link
  4. Fill in the URL on each post

Cards with an external_link value will open in a new tab. Cards without it will link to the default WordPress permalink.

Customizing Tag Colors

Edit the cpt_get_term_color() function in cpt-ajax-filter.php:

$colors = [
    'banking'        => '#1e40af', // dark blue
    'cpr'            => '#dc2626', // red
    'dental-lab'     => '#0891b2', // cyan
    'dental-supply'  => '#0d9488', // teal
    'education'      => '#7c3aed', // purple
    'finance'        => '#16a34a', // green
    'hr'             => '#ea580c', // orange
    'insurance'      => '#2563eb', // blue
    'marketing'      => '#c026d3', // magenta
    'office-lease'   => '#64748b', // slate
    'payroll'        => '#0369a1', // sky blue
    'photography'    => '#e11d48', // rose
    'practice'       => '#059669', // emerald
    'practice-sales' => '#4f46e5', // indigo
    'printing'       => '#d97706', // amber
    'regulations'    => '#9333ea', // violet
    'technology'     => '#0891b2', // teal
    'videography'    => '#f43f5e', // pink
];

Add your own taxonomy slugs and hex colors. Any term not listed defaults to #6b7280 (gray).

File Structure

cpt-ajax-filter/
├── cpt-ajax-filter.php   → Main plugin file (shortcode, card render, AJAX handler)
├── cpt-ajax-filter.js    → Frontend JS (AJAX requests, debounce, card click, animations)
├── cpt-ajax-filter.css   → Styles (search bar, filter tags, horizontal cards, responsive)
└── README.md             → This file

Requirements

  • WordPress 6.0+
  • PHP 7.4+
  • jQuery (bundled with WordPress)
  • ACF (optional, only needed for external link redirects)

Author

Rolando Escobar

License

GPL-2.0 — See LICENSE for details.