youheiokubo

HXSE — Code-First Search lets you define search filters with PHP arrays and output them with a simple shortcode. No JavaScript configuration required. Powered by htmx for seamless, no-reload filtering.
Why HXSE?
<ul>
<li>Code-first — Define everything in PHP arrays. Version-control friendly.</li>
<li>No page reloads — htmx handles all filtering and pagination seamlessly.</li>
<li>AI-friendly — Simple, consistent schema structure that AI agents can read and write.</li>
<li>No dependencies — htmx is bundled. No jQuery required.</li>
</ul>
Filter Types
<ul>
<li><code>search</code> — Keyword search</li>
<li><code>taxonomy</code> — Filter by taxonomy / category</li>
<li><code>meta</code> — Filter by custom field value or range</li>
<li><code>date</code> — Filter by year</li>
<li><code>relation</code> — Filter by related post</li>
</ul>
UI Types
<ul>
<li><code>select</code> — Dropdown</li>
<li><code>radio</code> — Radio buttons</li>
<li><code>checkbox</code> — Multiple selection</li>
<li><code>range</code> — Min/max slider (for numeric meta fields)</li>
</ul>
Pagination Modes
<ul>
<li><code>pager</code> — Numbered page links with count display</li>
<li><code>loadmore</code> — “Load more” button</li>
</ul>
Basic Usage
<pre><code>`php
</code></pre>
add_filter( ‘hxse_schemas’, function( $schemas ) { 
 $schemas[‘staff_search’] = [ 
 ‘post_type’ => ‘staff’, 
 ‘filters’ => [ 
 [‘key’ => ‘keyword’, ‘type’ => ‘search’, ‘label’ => ‘キーワード’], 
 [‘key’ => ‘department’, ‘type’ => ‘taxonomy’, ‘label’ => ‘部署’, 
 ‘taxonomy’ => ‘department’, 
 ‘ui’ => ‘checkbox’, 
 ], 
 ], 
 ‘pagination’ => [ 
 ‘mode’ => ‘pager’, 
 ‘per_page’ => 12, 
 ], 
 ‘template’ => ‘hxse-staff.php’, 
 ]; 
 return $schemas; 
} ); 
 `
<pre><code>`
</code></pre>
[hxse id=”staff_search”] 
 `
<h3>External Services</h3>
This plugin bundles htmx (https://htmx.org/) for handling AJAX requests without page reloads. htmx is included locally within the plugin and does not make any external network requests. It is licensed under the BSD 2-Clause License.
<ul>
<li>htmx: https://htmx.org/</li>
<li>htmx License: https://github.com/bigskysoftware/htmx/blob/master/LICENSE</li>
</ul>

HXSE — Code-First Search

Code-first search & filter for WordPress. Define filters with PHP arrays, output with a shortcode. Powered by htmx — no page reloads.

Daniel

<h3>DEMOS</h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/qcnTrKoHGA4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
You can find more demos <a href="https://demos.danielvoelk.de/divi-filter/" rel="nofollow ugc">here</a>.
<h3>FEATURES</h3>
<ul>
<li>
Filter unlimited columns
</li>
<li>
Add multiple filter categories to each column (if desired)
</li>
<li>
Filter blog posts
</li>
<li>
[PREMIUM] Filter unlimited rows
</li>
<li>
[PREMIUM] Style active filter button
</li>
<li>
[PREMIUM] Start filtered, right after page loads.
</li>
<li>
[PREMIUM] Add animations to your filtering
</li>
<li>
[PREMIUM] Have multiple filters on one page
</li>
<li>
[PREMIUM] Multi select filtering (explained in <a href="https://docs.danielvoelk.de" rel="nofollow ugc">Documentation</a>)
</li>
<li>
[PREMIUM] And more (see in (<a href="https://docs.danielvoelk.de" rel="nofollow ugc">Documentation</a>)
</li>
</ul>
<a href="https://shop.danielvoelk.de/#divi-filter" rel="nofollow ugc">Get the premium version</a>
<h3>SETUP</h3>
Buttons:
<ul>
<li>Click on the grey gear icon to access the Button Settings (on the button, that you want to filter with).</li>
<li>Go to Advanced -> CSS ID & Classes -> CSS Class. Here you add the df-button class.</li>
<li>Additionally add any category that you want to filter with that button like that: dfc-[your category] e.g. dfc-cats. </li>
<li>Important: Buttons have to be in a seperate section, than your filterable elements.</li>
</ul>
Section:
<ul>
<li>Click on blue gear icon to access the Section Settings.</li>
<li>Go to Advanced -> CSS ID & Classes -> CSS Class. Here you add the df-area class.</li>
</ul>
Columns:
<ul>
<li>Click on green gear icon to access the Row Settings.</li>
<li>In the Row Settings click on the gear icon the access the Column Settings.</li>
<li>Go to Advanced -> CSS ID & Classes -> CSS Class.</li>
<li>Here you add all the dfc-[your category] class you want e.g. your dfc-cats class.</li>
<li>Do that for all Columns you want to make filterable.</li>
</ul>
<a href="https://docs.danielvoelk.de" rel="nofollow ugc">A more detailed documentation</a>
<a href="https://danielvoelk.de/en/divi-filter" rel="nofollow ugc">Official Product Page</a>

Filter for Divi

The Divi Filter plugin allows you to filter every module in the Divi Theme. Just add a few classes and you're done.

HXSE — Code-First Search vs Filter for Divi