WPLounge

Wat is de WordPress Customizer en wat kun je er mee?

Wat is de WordPress Customizer en wat kun je ermee?

Sinds WordPress 3.4 (juni 2012) zit de Customizer in WordPress. In 2016, bij de release van WordPress 4.5, kreeg de WordPress Customizer een enorme upgrade. Maar wat is de Customizer nou precies en wat kun je er allemaal mee doen?

WordPress Customizer in de WordPress admin-omgeving
Customizer in de WordPress admin-omgeving

Als je WordPress gebruikt, heb je de “Customizer” ongetwijfeld wel eens zien langskomen. Je vindt de WordPress Customizer onder Weergave > Customizer. Daarnaast vind je een Customizer-knop in de admin toolbar tijdens het bekijken van je website (als je bent ingelogd). Met de Customizer kun je wijzigingen maken aan het uiterlijk van je website en krijg je direct op je scherm te zien hoe deze wijzigingen er uit zullen zien.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »
Lees meer over Divi.

Wat is de WordPress Customizer?

De WordPress Customizer is een tool waarmee je je website kunt aanpassen. De focus ligt vooral op het uiterlijk van je website. Afhankelijk van het theme dat je gebruikt vind je in de Customizer allerlei instellingen voor hoe je website er uit ziet. Daarnaast kun je de Customizer ook gebruiken om je eigen “custom” CSS aan WordPress toe te voegen.

De Customizer
De Customizer bestaat uit twee onderdelen: links een balk met instellingen en rechts een “live preview” van je website.

De afbeelding hierboven toont hoe het Customizer-scherm is ingedeeld. Het bestaat eigenlijk uit twee onderdelen. Aan de linkerkant van de Customizer vind je een balk met allerlei instellingen. Aan de rechterkant zie je een “live preview” van je website. Wijzigingen die je in de linker balk maakt worden direct zichtbaar in deze preview.

Als je de Customizer opent vanuit de WordPress-admin (onder Weergave > Customizer) krijg je automatisch een preview van je home-pagina te zien. Je kunt echter ook een andere pagina kiezen als “live preview”. Je hoeft hiervoor alleen maar naar die pagina toe te gaan en vervolgens in de toolbar bovenin op de “Customizer”-knop te klikken.

Customizer knop in WordPress toolbar
De Customizer-knop in de WordPress toolbar

Wat kun je met de Customizer?

Met de WordPress Customizer kun je veel dingen aanpassen die je ook onder de verschillende submenu’s van het “Weergave”-menu in WordPress kunt doen. Zo kun je bijvoorbeeld je menu’s aanpassen of updaten, widgets toevoegen en extra CSS aan je WordPress-website toevoegen.

Tip

Wat je allemaal met de Customizer kunt doen, is sterk afhankelijk van het WordPress-theme dat je gebruikt. Sommige themes (zoals Divi) hebben veel theme-instellingen ook beschikbaar gemaakt in de Customizer. Maar lang niet alle themes zijn op die manier in de Customizer geïntegreerd. Daarnaast kunnen ook plugins instellingen toevoegen aan de Customizer.

1: Site-identiteit

Site-identiteit WordPress Customizer
Klik voor groter

Het eerste menu in de WordPress Customizer heet “Site-identiteit”. Hier kun je de Sitetitel en Ondertitel instellen, die je ook vindt onder Instellingen > Algemeen. Daarnaast geeft dit menu je de mogelijkheid om een site-icoon te uploaden.

De sitetitel en de ondertitel spreken natuurlijk redelijk voor zich. Onder de “Favicon”-instelling kun je bepalen welk icoontje er in de browserbalk van je bezoekers wordt getoond. Dit icoontje wordt ook gebruikt wanneer ze jouw website aan hun favorieten (bijvoorbeeld in Google Chrome) toevoegen.

Ook als een bezoeker je website toevoegt aan het Home-scherm van hun iPhone zal dit icoontje gebruikt worden. Je kunt hier het beste een vierkante afbeelding van minimaal 512×512 pixels uploaden. Ik raad je aan om een PNG te gebruiken met een transparante achtergrond, zodat je logo of afbeelding er op iedere achtergrond goed uit ziet. Als je een witte achtergrond gebruikt krijg je in de browserbalk een wit vierkantje te zien met daarin je logo. Dat ziet er een stuk minder mooi uit dan wanneer je een transparante achtergrond gebruikt.

2: Menu’s

In WordPress kun je je menu’s aanpassen onder Weergave > Menu’s. Maar je kunt dit óók vanuit de Customizer doen. Je krijgt dan “live” te zien hoe je menu er uit zal zijn op je website. Dit is het tweede menu dat standaard in de Customizer beschikbaar is. Je vindt in dit menu een lijst van alle menu’s die je hebt aangemaakt, en aan welke menu-locatie ze zijn toegewezen.

Hoofdmenu WPLounge in de WordPress Customizer
Het hoofdmenu van WPLounge.nl in de WordPress Customizer

Net als wanneer je een menu volgens de “oude” methode (via Weergave > Menu’s) aanpast, kun je je menu-items ‘slepen’ om de volgorde te veranderen. Je krijgt in het rechter scherm direct te zien hoe dit er op je website uit zal zien.

3: Widgets

Ook widgets op je WordPress-website kun je vanuit de Customizer aanpassen. Normaal zou je dit doen via Weergave > Widgets, maar dan kun je niet direct zien hoe dat er op je website uit ziet. In de onderstaande afbeelding zie je hoe dit menu er uit ziet. Je krijgt de widget areas te zien en kunt deze openen om widgets aan te passen, verplaatsen of toe te voegen.

Widgets aanpassen in de Customizer
Widgets aanpassen in de Customizer

Zoals je ook in de afbeelding kunt zien, kun je in de Customizer alléén widget areas bewerken die ook daadwerkelijk zichtbaar zijn. In het voorbeeld hierboven gebruik ik de Customizer op onze home-pagina. Wij hebben geen sidebar op onze home-pagina. De Customizer houdt hier rekening mee en toont de melding: “Je thema heeft 5 andere widgetgebieden, maar deze pagina geeft deze niet weer.”.

Door naar een andere pagina te navigeren, zou ik deze widgets alsnog kunnen bewerken vanuit de Customizer.

4: Homepage-instellingen

Homepage instellingen in de WordPress Customizer
Homepage instellingen in de Customizer

In de Customizer kun je ook instellen welke pagina als “Home”-pagina wordt getoond (zie ook: WordPress homepage; blog of pagina?). Deze instelling vind je normaal gesproken onder Instellingen > Lezen, maar zit dus ook in de Customizer.

5: Extra CSS

Als je extra CSS-code aan je WordPress-website wilt toevoegen, kan dat ook via de Customizer. Open hiervoor het kopje “Extra CSS”. In het onderstaande voorbeeld heb ik CSS-code toegevoegd waardoor ons logo niet meer getoond wordt:

Extra CSS in de Customizer

De Customizer is een handige tool om snel te checken wat CSS-wijzigingen met je website doen, maar ik raad je altijd aan om een child theme te gebruiken als je écht CSS-wijzigingen wilt gaan maken. De Customizer is vooral handig omdat je direct kunt zien wat het effect is van je wijzigingen.

6: Een nieuw theme activeren

Vanuit de Customizer kun je ook een nieuw theme “bekijken” zonder dat je bezoekers dit meteen te zien krijgen. Je hebt de keuze uit geïnstalleerde themes én alle gratis themes die op WordPress.org staan. Zo kun je een nieuw theme installeren en direct een voorbeeld bekijken. Deze wijzigingen kun je vervolgens ook inplannen om deze op een later moment te laten ingaan. Hierover lees je meer onder het kopje Aanpassingen publiceren of inplannen.

Mobiele preview

Devices in CustomizerHelemaal links onderin de Customizer vind je drie icoontjes (zie ook de afbeelding rechts). Standaard wordt de “live preview” in de Customizer op volledig formaat getoond. Je kunt echter ook op het tablet- of smartphone-icoontje klikken. Je krijgt dan een preview te zien van je website zoals die er op een tablet of smartphone uit zou zien. Heel handig om snel te zien hoe jouw aanpassingen er op verschillende apparaten uit zien.

Aanpassingen publiceren of inplannen

Eén van de beste features van de WordPress Customizer bevindt zich achter het tandwiel-icoontje naast de “Publiceren”-knop. Wanneer je hier op klikt, wordt er een nieuw menu uitgeklapt met extra opties:

Customizer concept opslaan inplannen of link delen

1: Publiceren, concept opslaan of inplannen

Je kunt je wijzigingen direct publiceren, maar je kunt ze ook inplannen voor een later moment. Een hele handige feature, als je bijvoorbeeld op een bepaald moment van huisstijl of van WordPress-theme wisselt. Met de Customizer kun je alles klaar zetten, als concept opslaan of zelfs inplannen voor publicatie.

2: Link naar voorbeeld

Link naar voorbeeldAls je wijzigingen hebt gemaakt in de Customizer en je hebt deze opgeslagen (of ingepland), krijg je de mogelijkheid om een link met een voorbeeld op te halen. Zo kun je de wijzigingen bijvoorbeeld vast naar je manager of je collega’s sturen om feedback te verzamelen.

Conclusie

De WordPress Customizer is één van de meest krachtige tools in WordPress. Toch merk ik in de praktijk dat ik de tool bijna nooit gebruik, net als veel van mijn klanten. Gebruik jij de WordPress Customizer? Laat het ons weten in de reacties!

Beoordeel dit artikel

(10 ratings, gemiddeld: 5,00 van de 5)

Wouter Postma

Eigenaar van WPLounge. Blogt ook in het Engels op WPLounge.org

Reageer