manifest / content / cpt-ajax-filter-search-plugin

CPT Ajax Filter & Search

WordPress plugin: shortcode that adds AJAX search and color-coded taxonomy filters to any custom post type.

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

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

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

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

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

Download or clone this repository
Upload the cpt-ajax-filter folder to wp-content/plugins/
Activate "CPT Ajax Filter & Search" in WordPress → Plugins
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

ACF External Link Setup

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

Install Advanced Custom Fields (ACF)
Create a field group assigned to your CPT
Add a URL field with the name external_link
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.