FacetWP is een geavanceerde WordPress plugin die dynamische en flexibele filter- en zoekfunctionaliteiten toevoegt aan je WordPress website. Hierdoor kunnen gebruikers snel en efficiënt specifieke inhoud vinden, wat de algehele gebruikerservaring aanzienlijk verbetert. Bij Lamper Design zijn er maar weinig projecten die opgeleverd worden waar deze plugin niet geïnstalleerd is.
Door geavanceerde zoek- en filtermogelijkheden kunnen bezoekers sneller vinden wat ze zoeken, wat kan leiden tot een hogere tevredenheid en meer conversie. Een groot voordeel is dat FacetWP volledig op maat in te richten is. Dankzij AJAX-gebaseerde filtering en het gebruik van een indextabel voor extra snelheid, worden filters direct toegepast zonder dat de pagina opnieuw hoeft te laden. In onze historie hebben we veel plugins getest maar voor ons is dit de absoluut beste WordPress filter plugin die er op dit moment te koop is. Naar ons idee zou iedere WordPress agency de plugin standaard in hun toolset moeten hebben.
Inhoudsopgave
Wat is FacetWP?
In onze kennisbank kun je meer informatie vinden over de WordPress plugin van FacetWP. Kort samengevat: FacetWP is een WordPress plugin die geavanceerde filter- en zoekfunctionaliteit toevoegt aan je website. Het stelt jouw bezoekers in staat om content, producten of berichten snel en dynamisch te filteren op basis van criteria zoals categorieën, datums, aangepaste velden en meer. Eigenlijk ieder veld wat beschikbaar is in je website of dit nu een onderdeel is van een WooCommerce webshop of een Custom Post Type dat is te gebruiken om op te filteren.
Deze WordPress filter plugin is zeker niet alleen geschikt voor WooCommerce webshops. Ook een zakelijke dienstverlener kan in de website gebruik maken van Een aantal praktische voorbeelden van FacetWP filters:
- E-commerce filters: Laat bezoekers van je WooCommerce webshop producten filteren op prijs, maat, kleur, merk, of beschikbaarheid;
- Reisblog: Bezoekers kunnen zoeken op bestemming, reisduur, budget, of reisthema, zoals avontuurlijk of luxe;
- Makelaars website: Gebruikers kunnen woningen filteren op locatie, prijsklasse, aantal slaapkamers, of type woning.
- Portfolio: Toon je projecten met filters zoals categorie, technologie, of publicatiejaar.
- Foodblog: Voeg filters toe voor ingrediënten, dieetwensen (zoals vegan of glutenvrij), kooktijd, of moeilijkheidsgraad. Ideaal om de plugin te combineren met WP Recipe Maker.
FacetWP maakt deze filters dynamisch en gebruiksvriendelijk, waardoor gebruikers snel vinden wat ze zoeken.
FacetWP biedt verschillende add-ons die de standaardfunctionaliteit van de plugin verder uitbreiden. Met deze uitbreidingen kun je je filters nog eenvoudig verder uitbouwen naar wens.
FacetWP filters en thema’s
FacetWP is ontworpen om soepel te werken met vrijwel elk WordPress thema. Je kunt filters en zoekfunctionaliteiten eenvoudig aanpassen aan de look en feel van je WordPress website, onafhankelijk het gebruikte thema.
FacetWP gebruikt shortcodes, de WordPress Block Editor en PHP-snippets om filters in te voegen. Hierdoor werkt het probleemloos met zowel eenvoudige als complexe thema’s, zonder dat je specifieke aanpassingen in de code van het thema hoeft te doen. De plugin maakt gebruik van de bestaande WordPress structuur, zoals aangepaste posttypes en taxonomieën.
Omdat de filters worden gestyled via CSS, kunnen ze eenvoudig worden aangepast om te passen bij het ontwerp van je thema. Of je nu een minimalistisch of een visueel complex thema gebruikt, FacetWP past zich aan jouw stijlrichtlijnen aan.
Voor thema’s die maatwerk query-loops gebruiken om content weer te geven, zoals Oxygen Builder, GeneratePress of aangepaste thema’s, biedt FacetWP ondersteuning via hooks en een uitgebreide documentatie. Hierdoor kunnen filters ook gemakkelijk in complexe lay-outs worden toegepast.
FacetWP add-on voor WordPress thema’s
FacetWP biedt diverse add-ons die de functionaliteit van deze WordPress filter plugin uitbreiden en integreren met populaire WordPress thema’s en -builders. Deze add-ons zorgen voor een goede integratie en verbeterde gebruikerservaring. De beschikbare thema’s waar FacetWP een add-on voor heeft vind je hieronder.
- Elementor thema: Met de Elementor add-on kun je FacetWP-filters toevoegen aan Elementor pagina’s en berichten vanuit de Elementor pagebuilder;
- Beaver Builder: De Beaver Builder add-on maakt het mogelijk om FacetWP-filters te integreren in Beaver Builder pagina’s;
- Bricks: Met de Bricks add-on kun je geavanceerde filtermogelijkheden toevoegen binnen de Bricks-omgeving;
- Flatsome: De Flatsome add-on integreert FacetWP met het populaire Flatsome thema. Dit is een veelgebruikt thema op WooCommerce websites waar je uiteraard de beste WordPress filter plugin voor wilt gebruiken.
Deze add-ons zijn beschikbaar als je een geldige licentie hebt voor FacetWP en je kunt ze direct downloaden vanuit je account. Als je gebruikt maakt van één van deze thema’s is het aan te raden om deze add-on te gebruiken zodat je optimaal gebruik kunt maken van de WordPress filtering.
FacetWP add-ons voor WordPress plugins
Naast add-ons voor thema’s biedt FacetWP ook ondersteuning voor verschillende veelgebruikte WordPress plugins. De ondersteuning voor Advanced Custom Fields is een veelgebruikte standaard integratie. Hier heb je geen extra add-on voor nodig, dit is standaard aanwezig in de plugin.
FacetWP Recipes
Waar heb je dan wel losse uitbreidingen voor nodig? Wij ontwikkelen regelmatig foodblogs voor onze klanten zoals bijvoorbeeld Kokerellen en Lekker Eten met Linda. In deze foodblogs maken we gebruik van de WP Recipe Maker plugin en de add-on van FacetWP voor WPRM. Hoe deze combinatie werkt vind je meer over in onze kennisbank.
WP Recipe Maker add-on download je hier
FacetWP Color
Deze add-on kun je gebruiken als je wilt filteren op kleur in FacetWP. Je kunt hiervoor bijvoorbeeld eigenschappen in WooCommerce voor gebruiken. Daarnaast kun je ook een custom veld toevoegen waar je de kleur inzet.
In de sidebar krijg je dan een rijtje met kleuren of bolletjes. Deze kun je verder met CSS stylen.
FacetWP Mobile Flyout
De FacetWP Mobile Flyout is een add-on die een gebruiksvriendelijke zijbalk toevoegt aan je website, ontworpen voor mobiele apparaten. Deze zijbalk maakt het mogelijk om filters overzichtelijk en toegankelijk weer te geven op kleinere schermen, wat de navigatie en gebruikerservaring op mobiele apparaten aanzienlijk verbetert. Of laat jij liever de bezoekers van je website of webshop helemaal naar beneden scrollen om te kunnen filteren?
Mobile Flyout add-on download je hier
FacetWP Relevanssi
De FacetWP Relevanssi integratie is een add-on die de verbeterde zoekfunctionaliteiten van de Relevanssi-plugin combineert met de flexibele filtermogelijkheden van FacetWP. Relevanssi verbetert de kwaliteit en relevantie van zoekresultaten in WordPress door een eigen zoekindex in de database bij te houden.
Door deze integratie kunnen gebruikers zoekfacetten creëren die gebruikmaken van Relevanssi’s geavanceerde zoekalgoritmen, wat resulteert in meer relevante en nauwkeurige zoekresultaten. Deze add-on compatibel is met zowel de gratis als de premium versie van Relevanssi, maar niet met Relevanssi Light.
FacetWP Relevanssi add-on download je hier
FacetWP code snippets
Op de website van FacetWp vind je een heleboel PHP code snippets. Graag lichten wij toe welke snippets wij in ieder geval bijna altijd gebruiken in onze WordPress projecten. Deze codes kun je plaatsen in je functions.php van je thema of in een plugin zoals bijvoorbeeld Code Snippets.
FacetWP labels boven widgets
FacetWP voegt standaard geen labels of koppen toe aan de facetten, behalve in het mobiele Flyout-menu. Het is echter mogelijk om ze toe te voegen met een beetje aangepaste code in het functions.php bestand van je (child) thema (of door de Custom Hooks add-on van FacetWP te gebruiken). Je kunt het script ook in de header.php van je thema plaatsen of, nog beter, in een apart JavaScript-bestand.
De onderstaande code voegt labels toe aan elk facet, behalve voor de Pager-, Sort- en Reset-facetten, omdat labels voor deze facetten meestal niet veel zin hebben. Je kunt deze uitzonderingen aanpassen in de array op regel 11.
De code voegt ook een .facet-wrap CSS wrapper-element toe rond elk facet en zijn label, voor styling en om te worden gebruikt in de onderstaande code die lege facetten en hun labels verbergt.
// FacetWP labels
function fwp_add_facet_labels() {
?>
<script>
(function($) {
$(document).on('facetwp-loaded', function() {
$('.facetwp-facet').each(function() {
var $facet = $(this);
var facet_name = $facet.attr('data-name');
var facet_label = FWP.settings.labels[facet_name];
if ($facet.closest('.facet-wrap').length < 1 && $facet.closest('.facetwp-flyout').length < 1) {
$facet.wrap('<div class="facet-wrap"></div>');
$facet.before('<h3 class="facet-label">' + facet_label + '</h3>');
}
});
});
})(jQuery);
</script>
<?php
}
add_action( 'wp_head', 'fwp_add_facet_labels', 100 );Standaard WooCommerce paginering en sortering met FacetWP gebruiken
Als je geen gebruik wilt maken van Facets met sortering en paginering dan moet je de onderstaande code toevoegen aan je website om te zorgen dat de standaard sortering en paginering zal werken. Facets werken alleen als je content namelijk binnen een FacetWP wrapper staat.
// FacetWP default results & sorting
function fwp_wrapper_open() {
if ( ! is_singular() ) : echo '<div class="facetwp-template">'; endif;
}
function fwp_wrapper_close() {
if ( ! is_singular() ) : echo '</div><!-- end facetwp-template -->'; endif;
}
add_action( 'woocommerce_before_shop_loop', 'fwp_wrapper_open', 5 );
add_action( 'woocommerce_after_shop_loop', 'fwp_wrapper_close', 15 );
add_action( 'woocommerce_no_products_found', 'fwp_wrapper_open', 5 );
add_action( 'woocommerce_no_products_found', 'fwp_wrapper_close', 15 );Lege facets verbergen
Deze code is bedoeld om lege facetten van de FacetWP-filter op een WordPress-website te verbergen. Wanneer de pagina wordt geladen en FacetWP de facetten heeft geladen, wordt er gecontroleerd hoeveel keuzes (items) elk facet heeft. Als een facet geen opties bevat (de waarde is 0), wordt het gehele facet (inclusief de wrapper) verborgen voor de gebruiker.
De code wordt toegevoegd aan de wp_footer-actie, zodat het script op de juiste plaats op de pagina wordt ingeladen. Hierdoor worden lege facetten dynamisch verborgen na de pagina-lading, wat zorgt voor een schonere en gebruiksvriendelijke filterervaring voor de bezoekers van de website.
// Hide empty facets
add_action( 'wp_footer', function() {
?>
<script>
(function($) {
document.addEventListener('facetwp-loaded', function() {
$.each(FWP.settings.num_choices, function(key, val) {
// assuming each facet is wrapped within a "facet-wrap" container element
// this may need to change depending on your setup, for example:
// change ".facet-wrap" to ".widget" if using WP text widgets
var $facet = $('.facetwp-facet-' + key);
var $wrap = $facet.closest('.facet-wrap');
var $flyout = $facet.closest('.flyout-row');
if ($wrap.length || $flyout.length) {
var $which = $wrap.length ? $wrap : $flyout;
(0 === val) ? $which.hide() : $which.show();
}
});
});
})(jQuery);
</script>
<?php
}, 100 );Accordion in Facet Flyout
Als je veel items in je menu hebt kan het zijn dat je graag een accordion wilt gebruiken in je mobiele menu. Dit kun je doen door de onderstaande code in je thema toe te voegen. Je krijgt hiermee ingeklapte facets te zien die je met een + en – kunt openen en sluiten.
De code zorgt ervoor dat het klikken op de koptekst van een facet in een flyout-menu ervoor zorgt dat het facet wordt in- of uitgeklapt, afhankelijk van de toestand. Dit biedt een interactieve manier voor gebruikers om facetten te filteren zonder dat ze de gehele lijst van facetten hoeven te zien.
add_action( 'wp_head', function() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
fUtil().on('click', '.flyout-row h3', function() {
fUtil(this).closest('.flyout-row').toggleClass('expanded');
});
});
</script>
<?php });Conclusie
In het artikel hebben we een groot deel van de door ons gebruikte functies uit FacetWP benoemd en beschreven. Uiteraard zijn er nog veel meer opties die we soms wel of niet integreren in één van de projecten.
Tot slot willen we je graag nog een aantal voorbeelden geven van projecten waar verschillende types facets gebruikt worden. Als afsluiting: FacetWP is voor ons de allerbeste WordPress filter plugin.
Hipgroen.nl: in deze website vind je verschillende facets. Onder andere op de projectpagina vind je een filter op soort project. Daarnaast vind je op de homepage een kaart van Google Maps waarin je kunt filteren op basis van facets.
Kokerellen.be: in de Belgische foodblog van Kokerellen vind op de categoriepagina’s filters op basis van recepten en ingrediënten.
Haute Equipe: op de nieuwspagina van Haute Equipe vind je een filter om te filteren op soort nieuws.
Webshop ookinhetpaars.nl: op de categoriepagina van de producten vind je een filter. Ook op kleur kun je hier filteren.
Webshop tegelsinhuis.nl: hier vind je een uitgebreide FacetWP filter waar je ook op voorraad status kunt filteren bijvoorbeeld.
