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.

Rouergue Création

Ce plugin permet de filtrer les Types De Publications Personnalisés par catégories, 
et les affiche dans une grille entièrement réactive, avec une navigation par boutons ou liste déroulante.
Le plugin est compatible avec : 
– les CPT standards 
– les thèmes classiques et thèmes de blocs 
– l’extension The Events Calendar (événements)
Il inclut également des animations d’affichage et une page de réglages React moderne 
pour générer facilement les shortcodes.
<h3>Page de paramètres</h3>
Après l’activation du plugin, une page FBCPT Réglages, est disponible dans l’administration WordPress. 
Cette page permet de définir les paramètres globaux par défaut :
<ul>
<li>Type de publication (CPT)</li>
<li>Taxonomie</li>
<li>options de tri</li>
<li>Type du filtre (boutons ou liste déroulante)</li>
<li>Style du filtre </li>
<li>Grille d’affichage des CPT (nbr colonnes, espacements)</li>
<li>Pagination(Nbr CPT affichés par page,Pagination par Numéros de page ou Bouton charger plus)</li>
<li>Style des CPT</li>
<li>Animation lors du filtrage des contenus</li>
</ul>
Lorsque le type de publication sélectionné est un évènement de l’extension The Events Calendar, le plugin peut afficher : 
– la date de début de l’événement 
– l’heure de l’événement 
– le lieu de l’événement 
– le nombre de participants 
– le prix du billet 
– le nombre de billets restant
👉 Ces réglages permettent d’utiliser un shortcode basique sans aucun paramètre.
<h3>Comment afficher la grille filtrable des CPT</h3>
Pour filtrer les CPT vous devez ajouter un Shortcode dans une page.
🔹 Shortcode basique (recommandé)
Utilise exclusivement les réglages définis dans la page FBCPT Réglages: 
 <code>[filter_bar_cpt]</code> 
Un bouton permet de copier ce shortcode directement depuis la page de réglages.
🔹 Shortcode intermédiaire
Il est possible d’utiliser plusieurs shortcodes sur une même page en surchargeant 
certains paramètres sans modifier les réglages globaux. 
 <code>[filter_bar_cpt cpt="slug-cpt" taxonomie="slug-taxonomie" nav_styles="button"]</code>
La page de réglages du plugin affiche automatiquement: 
– le shortcode généré en fonction de vos sélections 
– un bouton pour copier ce shortcode
🔹 Le Shortcode complet avec les paramètres par défaut: 
 <code>[filter_bar_cpt cpt="post" taxonomie="category" trier="date" ordre="ASC" nav_styles="button" nav_color="#333333" nav_hover_color="#FFFFFF" nav_hover_bgcolor="#F0AD4E" nav_font_size="22px" nbr_colonne="4" column_gap="15px" row_gap="15px" posts_per_page="12" pagination_style="numbers" border_radius="10px" title_position="below" title_tag="h3" title_font_size="18px" title_color="#333333" show_date="false" meta_size="14px" show_event_time="false" show_event_venue="false" show_event_attendees="false" show_event_tickets="false" show_event_price="false"]</code>
Les paramètres cpt & taxonomie du Shortcode sont obligatoires pour afficher vos CPT. 
Les paramètres trier,ordre,nav_styles,nav_color,nav_hover_color,nav_hover_bgcolor,nav_font_size, 
nbr_colonne,column_gap,row_gap,posts_per_page,pagination_style,border_radius,title_position,title_tag,title_font_size, 
title_color,show_date,meta_size,sont optionnel car définit par défaut, mais vous pouvez les modifier.
Le shortcode peut inclure les attributs suivants:
📂 Contenu & requête 
◆ cpt: slug du custom post type(par ex pour les articles: post) 
◆ taxonomie: slug de la taxonomie(par ex pour les articles: category) 
◆ trier: date , name(pour le titre du CPT) , menu_order (l’ordre affecté au CPT a partir de la modication rapide pour l’écran qui liste les CPT en back office) 
◆ ordre: ASC(ordre croissant) ou DSC(ordre décroissant)
🧭 Filtre par catégories 
◆ nav_styles: button(menu de navigation par catégories style bouton) ou select(liste déroulante des catégories avec identation des catégories enfant) 
◆ nav_color: couleur du texte pour la navigation par catégories 
◆ nav_hover_color: couleur du texte au survol & active pour la navigation par catégorie style button 
◆ nav_hover_bgcolor: couleur de fond du texte au survol & active pour la navigation par catégories style button 
◆ nav_font_size: taille du texte pour la navigation par catégorie( 22px par défaut sur les mobiles)
📐 Grille & mise en page 
◆ nbr_colonne: nombre de colonne pour l’affichage dans une grille des CPT 
◆ column_gap: espacement en pixel des colonnes pour la grille 
◆ row_gap: espacement en pixel des lignes pour la grille
📄 Pagination 
◆ posts_per_page: nombre de CPT affichés par page (par défaut: 12, mettre 0 pour tout afficher) 
◆ pagination_style: numbers(Numéros de page) ou loadmore(Bouton charger plus)
🏷️ CPT 
◆ border_radius: rayon de bordure en pixel pour l’affichage des CPT 
◆ title_position: above(titre positionné sur l’image au survol)ou below(en dessous de l’image) 
◆ title_tag: balise HTML pour le titre du CPT: h2,h3,h4,h5,h6,p 
◆ title_font_size: taille du titre des CPT en pixel ( 18px par défaut sur les mobiles) 
◆ title_color: couleur du titre des CPT 
◆ show_date: activer l’affichage de la date du contenu: true ou désactiver: false 
◆ meta_size: taille du texte en pixel pour les métadonnées telle que la date, et celles relative à l’extension The Events Calendar 
◆ show_event_time: activer l’affichage de l’heure de l’évènement: true ou désactiver: false 
◆ show_event_venue: activer l’affichage du lieu de l’évènement: true ou désactiver: false 
◆ show_event_attendees: activer l’affichage du nombre de participants à l’évènement: true ou désactiver: false 
◆ show_event_tickets: activer l’affichage du nombre de billets restant pour l’évènement : true ou désactiver: false 
◆ show_event_price: activer l’affichage du prix du billet pour l’évènement: true ou désactiver: false 
– Pour les CPT standards : la date de publication est affichée 
– Pour The Events Calendar : la date de l’événement est utilisée automatiquement
<h3>🔍 Démo en ligne</h3>
Découvrez le plugin en action sur notre <a href="https://rouerguecreation.fr/demo-filter-bar-custom-post-type/" rel="nofollow ugc">Site De Démos</a>
<h3>🌍 Traductions</h3>
◆ Anglais 
◆ Français
<h3>Decouvrez nos autres plugins</h3>
◆ <a href="https://wordpress.org/plugins/custom-event-tickets/" rel="ugc">Easy Custom Event Tickets</a> 
◆ <a href="https://wordpress.org/plugins/editor-custom-color-palette/" rel="ugc">Editor Custom Color Palette</a> 
◆ <a href="https://wordpress.org/plugins/slider-galerie-native-responsive/" rel="ugc">Slider Galerie Native Responsive</a> 
◆ <a href="https://wordpress.org/plugins/rouergue-creation-top-notice-bar/" rel="ugc">Rouergue Creation Top Notice Bar</a> 
◆ <a href="https://wordpress.org/plugins/rouergue-creation-sidebar-embed/" rel="ugc">Rouergue Creation Events Sidebar</a> 
◆ <a href="https://wordpress.org/plugins/rouergue-creation-carousel-style-query-loop/" rel="ugc">Rouergue Creation Carousel Style Query Loop</a>

Filter Bar Custom Post Type

Un plugin simple pour filtrer les Types De Publications Personnalisés par catégories avec animation et support multi-instances.

HXSE — Code-First Search vs Filter Bar Custom Post Type