Et produktkort-rutenett i WooCommerce som hakker på mobil. En portefølje som ikke kan filtreres etter kategori. En katalog der søk fungerer via «Ctrl+F» i stedet for gjennom filtre. Velkjent frustrasjon for alle som bygger et innholdssted på WordPress.

Inntil nylig var rutenettoppsett med fasettert søk utviklerterreng: tilpasset WP_Query, manuell CSS Grid-markering, endeløs finjustering for hver innholdstype. WP Grid Builder-utvidelsen (GridBuilderWP) endrer spillet ved å tilby en visuell rutenett- og filterbygger som fungerer rett ut av esken uten å røre kode.

Nedenfor følger en detaljert gjennomgang: hva utvidelsen kan gjøre, hvordan du installerer den, hvordan du setter opp ditt første rutenett, og hvilke scenarioer den håndterer best.

💡 Rask oversikt:

• Last ned og installer WP Grid Builder som enhver premium WordPress-utvidelse
• Opprett ditt første rutenett: velg innholdstype (innlegg, mediefiler, produkter), konfigurer stilen (Masonry, Metro, Justified) og legg til kort
• Sett opp fasetter (filtre, søk, sortering) gjennom en dra-og-slipp-bygger uten å skrive en eneste linje kode
• Publiser rutenettet via kortkode eller Gutenberg-blokk på hvilken som helst side
• Om nødvendig, utvid funksjonaliteten med tillegg: kart, hurtigbufring, flerspråklig støtte

Hva er WP Grid Builder

WP Grid Builder er en premium WordPress-utvidelse for å lage tilpassbare rutenett med fasettert filtrering. Enkelt forklart: du velger hvilket innhold som skal vises (blogginnlegg, WooCommerce-produkter, mediefiler, brukere), definerer kortets utseende og legger til filtre. Utvidelsen setter alt sammen til et responsivt rutenett som kan bygges inn på hvilken som helst side.

Utvikleren, Loïc Blascos, er en fransk WordPress-ingeniør også kjent for Unblock-utvidelsen. Produktet har vært aktivt utviklet siden 2019. Per juni 2026 er gjeldende versjon v2.3.3.

Utvidelsen fungerer med ethvert tema som følger WordPress-standarder og integreres med Gutenberg, Elementor, Oxygen, Beaver Builder og Bricks via kortkoder eller blokker. Egne tillegg dekker integrasjon med WooCommerce, Easy Digital Downloads, ACF, Meta Box, Pods, WPML, Polylang, SearchWP, Relevanssi og LearnDash.

eCommerce-scenario: produktkort med pris, vurdering og «Legg i handlekurv»-knapp, pluss filtre etter pris, kategori og lagerstatus.

Portefølje-scenario: mediefiler fra WordPress-biblioteket som åpnes i en lightbox, med taggbasert filtrering.

Nøkkelfunksjoner

Utvidelsen tilbyr mange muligheter. La oss gruppere dem etter kategori for å unngå å drukne i en liste.

Innhold og spørringer. WP Grid Builder kan hente innhold fra egendefinerte innholdstyper, taksonomier og WordPress-brukere. Konfigurering av kilden tar noen få klikk: velg innholdstype, publiseringsstatus, forfattere og inkluder eller ekskluder bestemte innlegg. Under panseret sørger tilpassede AJAX-endepunkter og en indekstabell for rask filtrering selv med store mengder innhold.

Rutenett og oppsett. Tre oppsettstyper: Masonry (mursteinsstil), Justified (breddejustert) og Metro (rutenett med celler i variabel størrelse). Hver kan pakkes inn i en responsiv karusell med støtte for berøringsbevegelser. Antall kolonner og radhøyde kan justeres for ulike skjermbredder: nettbrett, telefon og desktop.

Kort. En dra-og-slipp-bygger: dra blokker (tittel, bilde, pris, vurdering, egendefinerte felt, HTML) og sett sammen kortet. Inkludert er 20+ ferdiglagde maler, 900+ Google Fonts og 250+ SVG-ikoner. Kort kan tilordnes ulike innholdstyper: ett for produkter, et annet for blogginnlegg.

Filtre (fasetter). 20+ typer: avkrysningsbokser, radioknapper, nedtrekksmenyer, knapper, hierarkiske filtre, intervaller (pris, vurdering), glidebrytere, datovelgere, søk, sortering, tilbakestill og en «Last mer»-knapp. Filtre fungerer via AJAX uten sidelasting. Hvert fasetterte søk genererer en unik URL, og nettleserens Tilbake/Fremover-knapper fungerer korrekt.

Lightbox og media. En innebygd lightbox for bilder, video (YouTube, Vimeo, Wistia), gallerier og lyd. Støtte for lazy loading: bilder lastes ved rulling, noe som sparer båndbredde og øker hastigheten på sidegjengivelsen.

Animasjoner. 20+ lasteanimasjoner (loader under filtrering) og 20+ avsløringsanimasjoner (kort vises ved rulling). Disse reduserer opplevd ventetid: brukeren ser bevegelse i stedet for en tom skjerm.

Andre funksjoner. Importer/eksporter rutenett, kort og fasetter i JSON; RTL-språkstøtte; SEO-vennlig (W3C-kompatibel); grunnleggende krav i henhold til utviklerdokumentasjonen: PHP 7.0+ og WordPress 6.0+ (PHP 8.x anbefales).

Priser og abonnementer

WP Grid Builder selges kun som et årlig abonnement; det finnes ingen gratisversjon. Tre nivåer:

Progressive rabatter gjelder ved fornyelse: jo høyere nivå, desto større prosentvis rabatt. Alle nivåer inkluderer hele settet med tillegg, så det er ingenting ekstra å kjøpe. En 14-dagers pengene-tilbake-garanti gjelder ved kjøp.

Utvidelsen har fått positive omtaler fra fremtredende personer i WordPress-miljøet. Jb Audras, WordPress-kjerneutvikler og CTO i Whodunit, trekker frem bekvemmeligheten for både brukere og utviklere:

Både bruker- og utvikleropplevelsen er utmerket. Et flott produkt og et nytt paradigme for denne typen funksjonalitet. God integrasjon med WordPress-kjernen, behagelig admin-grensesnitt og lynrask frontend.

Chris Lema, en velkjent WordPress-ekspert og konsulent, har også offentlig rost WP Grid Builder; hans anmeldelse finnes på sosiale medier.

Installere WP Grid Builder

Installasjonen er standard for en premium WordPress-utvidelse. Etter kjøp mottar du en ZIP-fil og lisensnøkkel via e-post eller på din konto hos wpgridbuilder.com.

Trinn 1. Last ned ZIP-arkivet. I WordPress-administrasjonen, gå til Utvidelser → Legg til ny:

Trinn 2. Klikk «Last opp utvidelse», velg ZIP-filen og klikk «Installer nå»:

Trinn 3. Aktiver utvidelsen:

Etter aktivering vises et Gridbuilder WP-menyelement i administrasjonsmenyen. Gå til Gridbuilder WP → Dashboard:

Trinn 4. Skriv inn lisensens e-postadresse og nøkkel, og klikk deretter «Aktiver utvidelse»:

Når du aktiverer lisensen, får du tilgang til automatiske oppdateringer direkte fra WordPress-administrasjonspanelet. Selve nøkkelen finner du i kontodashbordet ditt etter kjøp:

Ferdig. Utvidelsen er installert, lisensen er aktivert, og du kan opprette ditt første rutenett.

Sette opp ditt første rutenett

Oppsettet består av flere seksjoner på én enkelt skjerm. La oss gå gjennom dem i rekkefølge.

Opprette og navngi rutenettet

Gå til Gridbuilder WP → Alle rutenett og klikk «Opprett et rutenett»:

Dette tar deg til skjermbildet «Alle rutenett», som foreløpig er tomt. Klikk på knappen «Opprett et rutenett»:

En alternativ vei er å importere demorutenett fra WP Grid Builder-nettstedet. Demoer setter oppsett og kortstruktur, men innholdet er alltid ditt: dine innlegg, mediefiler eller produkter.

På denne skjermen angir du: rutenettnavnet (til internt bruk), en egendefinert CSS-klasse (valgfritt, for egendefinerte stiler) og meldingsteksten brukere ser hvis det ikke finnes noen resultater.

Velge innholdskilde

Seksjonen Rutenettinnstillinger → Kildeinnhold:

Tre kildealternativer:

• Innholdstype: innlegg, sider, mediefiler eller en hvilken som helst egendefinert type
• Term: filtrering etter kategorier, stikkord eller egendefinerte taksonomier
• Bruker: innhold fra bestemte brukere

Nedenfor angir du antall elementer per side. Verdien «-1» viser alle; 0 arver WordPress-innstillingene.

I seksjonen «Forespurte innlegg» finjusterer du: publiseringstype, status (best satt til «Publisert»), forfattere, MIME-typer for media og inkludering og ekskludering av spesifikke innlegg.

Tips: klikk «Lagre endringer» mens du går gjennom innstillingene. Rutenettkonfigurasjon tar tid, og det er frustrerende å miste fremdriften underveis.

Medieformater

Seksjonen Rutenettinnstillinger → Medieformater:

Velg formater for kort: bilder, gallerier, video (YouTube/Vimeo/Wistia) og lyd. Her angir du også et standard miniatyrbilde for kort uten eget bilde. En nyttig funksjon: automatisk henting av den første medie-filen fra et innlegg hvis et utvalgt bilde mangler.

Rutenettstil

Seksjonen Rutenettinnstillinger → Rutenettstil:

Tre stiler å velge mellom: Masonry, Metro og Justified. For de fleste scenarioer er Masonry et trygt valg: kortene justeres optimalt uavhengig av bildenes sideforhold. Rutenettets oppførsel, overstyring av kortstørrelse og responsivitet konfigureres nedenfor, men det er ikke nødvendig å endre dem uten et klart behov.

Rutenettoppsett

To alternativer: standard vertikal rulling eller karusell. Alternativet «Full bredde» får rutenettet til å spenne over hele skjermbredden.

Rutenettkomponist

Grid Composer er et dra-og-slipp-område der du arrangerer fasetter. For eksempel: et datofilter, søk og en «Last mer»-knapp:

Etter publisering produserer denne konfigurasjonen et rutenett med tre fungerende filtre:

Kortstil

«Kortstil»-seksjonen er byggeren for kortets utseende. Du kan importere ferdige kort fra demosettet (20+ maler) eller lage fra bunnen av. Hver innholdstype får sitt eget kort: ett for produkter, et annet for innlegg. Et ferdig rutenett med Beryl-kortet ser slik ut:

Animasjoner

To animasjonstyper: kort som avsløres ved rulling og effekter når du klikker på «Last mer». Enkle å konfigurere, de gir en merkbar visuell oppgradering med minimal innsats.

Lasting

Aktiver lat lasting slik at bilder bare lastes når de kommer inn i visningsområdet. Dette er kritisk for rutenett med dusinvis av kort på en side. Lasteindikatoren (loader) vises under filtrering eller når neste innholdsparti lastes, og gir brukerne visuell tilbakemelding.

CSS-tilpasning

Vinduet Rutenettinnstillinger → Tilpasning lar deg legge til dine egne CSS-regler ved hjelp av klassesettet som ble opprettet da rutenettet ble laget. Hvis CSS ikke er din sterke side, bør du vurdere å trekke inn en frontend-utvikler eller beholde standardstilene.

Tillegg

Tillegg utvider grunnfunksjonaliteten. Alle er inkludert i alle nivåer. Per juni 2026 er følgende tilgjengelige:

• Kartfasett: Google Maps-, Mapbox- eller Leaflet-kart med markører og geotag-filtrering
• Bufring: innholds- og fasettbufring for å øke hastigheten på gjentatte forespørsler
• LearnDash: visning av LearnDash-kursdata i rutenettkort
• Flerspråklig: integrasjon med Polylang og WPML for flerspråklige nettsteder
• Elementor: innebygd integrasjon med Elementor-byggeren
• Oxygen: integrasjon med Oxygen Builder
• Bricks: integrasjon med Bricks Builder
• Beaver Builder: integrasjon med Beaver Builder
• Meta Box: Meta Box-felt i kort og filtre
• Pods: Pods-felt i kort og filtre

Tillegg installeres med et par klikk via Gridbuilder WP → Tillegg.

Andre innstillinger

Gridbuilder WP → Innstillinger inneholder globale parametere:

• Aktivering av WP Grid Builder-blokker i Gutenberg
• Støtte for innleggsformater (bilde, video, lyd, galleri)
• Visning av taksonomi- og innleggsformatfarger
• Tømming av hurtiglager og tilbakestilling av stilark
• Globale farger for kort og fasetter
• Ekstra bildestørrelser
• Innebygde lightbox-innstillinger
• Full tilbakestilling av pluginens globale innstillinger

De fleste av disse parameterne konfigureres én gang og trenger ikke å besøkes på nytt.

Se plugin-en i bruk. I denne videoen viser WPTuts hvordan du setter opp flernivåfiltre med WP Grid Builder fra start til et fungerende rutenett:

⁉️🤔 Ofte stilte spørsmål

Må jeg kunne kode for å jobbe med WP Grid Builder?

Nei. Rutenett, kort og fasetter konfigureres fullt ut via det visuelle administrasjonsgrensesnittet. Plugin-en krever PHP 7.0+ og WordPress 6.0+, men du trenger ikke å skrive kode. Utviklere har tilgang til PHP hooks og filtre for tilpasning, men dette er en valgfri bonus, ikke et krav.

Fungerer plugin-en med temaet mitt?

Hvis temaet følger WordPress-standarder, ja. I praksis er kompatibilitetsproblemer sjeldne, men hvis de oppstår, gjelder 14-dagers pengene-tilbake-garantien. Plugin-en tilbyr også integrasjoner med Elementor, Oxygen, Bricks og Beaver Builder for dem som jobber med visuelle byggeverktøy.

Hvordan skiller WP Grid Builder seg fra konkurrentene?

Tre ting: dybden i fasettfiltrering (20+ fasetttyper mot 5-10 hos alternativene), en innebygd kortbygger (ikke nødvendig å redigere temamaler) og en indekstabell for rask filtrering på store innholdsvolumer. De fleste rutenett-plugins gir enten layout uten filtre eller filtre uten egendefinerte kort; her er alt i én pakke.

Finnes det en gratisversjon?

Nei, WP Grid Builder er kun premium. Det laveste nivået er $49 per år for én side med hele settet med tillegg. Dette er sammenlignbart med den årlige abonnementsprisen for mange andre premium WordPress-plugins.

Hvordan påvirker plugin-en sidehastigheten?

Den bruker egendefinerte AJAX-endepunkter og en indekstabell i stedet for standard WP_Query, noe som reduserer databasebelastningen. Lazy loading utsetter bildeinnlasting til ved rulling. For store kataloger bør du vurdere å aktivere Caching-tillegget, som i tillegg mellomlagrer filtreringsresultater. I et testoppsett åpnes et rutenett med 50 produkter med filtre uten merkbar forsinkelse.

Kan jeg bruke plugin-en på et testnettsted?

Ja. Domener med.dev-,.test-,.local-toppdomener, localhost og staging-underdomener teller ikke som aktiveringer. Du kan utvikle og teste på staging uten å bruke opp lisensen din.

Hvilken WP Grid Builder-lisens bør du velge for oppgaven din

WP Grid Builder er ikke et verktøy for alle. Det er overkill hvis du trenger et enkelt postnett uten filtre: gratis utvidelser eller innebygde temablokker kan håndtere det. Men hvis oppgaven innebærer en katalog med fasettsøk, en filtrerbar portefølje eller en WooCommerce-butikkfront med smart sortering, finnes det få alternativer med tilsvarende dybde i WordPress-markedet for utvidelser.

• Hvis du er en nettbutikkeier på WooCommerce, velg Basic til $49 per år. Den dekker en butikkfront med filtre for pris, vurdering og lagerstatus. Et Masonry-nett med produktkort kan bygges på en time.
• Hvis du er en frilanser eller et byrå som håndterer flere prosjekter, vurder Premium ($99, opptil 3 nettsteder) eller Ultimate ($249, ubegrenset). Tilleggene for Elementor og Bricks sparer tid ved integrering med klientenes byggeverktøy.
• Hvis du trenger et enkelt bloggnett uten filtre, er utvidelsen for kraftig for den oppgaven. Prøv de innebygde Query Loop-blokkene i Gutenberg eller gratisalternativer.

Test utvidelsen på et testsite; 14-dagers pengene-tilbake-garantien lar deg evaluere den uten risiko. Og hvis du allerede har jobbet med WP Grid Builder, legg igjen en kommentar som beskriver hvilket scenario du tilpasset den for.