De complete handleiding over WordPress Widgets: hoe je ze op je site toevoegt, gebruikt en aanpast

Er zijn maar weinig dingen zo handig als WordPress-widgets. Met widgets kan je allerlei soorten extra content aan je site toevoegen buiten de inhoud van de eigenlijke berichten en pagina’s zelf. Hiermee kan je gebruikers van informatie voorzien, kan je ze op links laten klikken of een andere actie laten uitvoeren.

In dit artikel laat ik je alles zien wat je moet weten over WordPress-widgets. Ik leg uit hoe je ze aan je site toevoegt, hoe je widgetgebieden maakt waar je ze in kan zetten, hoe je plugins installeert waarmee je het aantal gebieden kan uitbreiden, hoe je je eigen widget codeert en nog veel meer.

Laten we beginnen met bespreken wat WordPress-widgets nou eigenlijk zijn.

Wat zijn WordPress-widgets?

In WordPress zijn widgets stukjes content die je buiten de daadwerkelijke artikelen en bijbehorende inhoud aantreft.

Widgets bevatten informatie, navigatiegegevens of media die niet noodzakelijkerwijs betrekking hebben op de afzonderlijke post of pagina. In de meeste gevallen wordt elke widget op elke pagina van je site weergegeven, maar je kan ook widgetgebieden toevoegen voor specifieke pagina’s, zoals je homepagina.

Om een widget aan je site toe te voegen, moet je deze toevoegen aan een widgetgebied. Widgetgebieden zijn al door je thema aangemaakt, omdat ze betrekking hebben op het design en de lay-out van je site en niet op de functionaliteiten.

De meeste WordPress-thema’s hebben widgetgebieden in de sidebar en footer, maar sommige hebben op veel verschillende plekken widgetgebieden, zoals boven of onder de content of zelfs in de header.

De onderstaande schermafbeelding van een van mijn eigen sites laat widgets zien in de sidebar en footer.

WordPress wordt geleverd met een aantal vooraf geïnstalleerde widgets. Deze kan je gebruiken zonder dat je plugins hoeft te installeren of met code in de weer moet gaan. Maar je kan natuurlijk ook zelf widgets toevoegen. Dit kan je doen door plugins te installeren of er zelf een te coderen.

Plugins (en dus ook widgets) zijn enorm veelzijdig en hebben betrekking op een brede range aan contenttypes, zoals media, socialmediafeeds, navigatie, zoeken, kaarten en nog veel meer. Je kan het zo gek niet bedenken of je hebt er wel een widget voor. De grootste uitdaging zit hem dan ook in het selectief gebruiken van widgets en niet je site overspoelen door deze handige hulpmiddelen.

Wanneer gebruik je WordPress-widgets

Je gebruikt een widget wanneer je extra content aan meerdere pagina’s van je site (en als ik pagina zeg, bedoel ik ook berichten, archieven, etc.) wil toevoegen, waarbij deze extra content geen onderdeel is van de content van die pagina. Ze komen met name van pas als je content hebt dat je op alle pagina’s van je site wil laten zien, zoals een (korte) lijst met je meest recente berichten, een winkelwagentje of een call-to-action-knop.

Hoe bepaal je welke widget je waar plaatst? Denk allereerst over hoeveel gebruikers daadwerkelijk gebruik willen maken van de widget en kijk vervolgens wat de slimste plek is om dit te laten zien. Widgets in de sidebar zijn prominenter dan widgets in de footersectie, waar bezoekers ze misschien wel nooit tegenkomen.

Een widget met de meest recente artikelen of een call-to-action zijn dus waarschijnlijk beter af in de sidebar – waar de kans groter is dat ze door mensen worden gezien. Een socialmediafeed kan daarentegen gerust in de footer worden geplaatst.

Als je thema speciale widgetgebieden voor de homepagina heeft, dan is het misschien slim om deze te gebruiken om de navigatie voor bezoekers te vereenvoudigen, lijsten met relevante content te laten zien of om een welkomstvideo aan bezoekers te laten zien.

11 voorbeelden van widgets in WordPress

Als je wil weten wat je allemaal kan met WordPress-widgets, is het waarschijnlijk het handigst om er een paar praktijkvoorbeelden bij te halen. Laten we eens kijken naar 11 soorten widgets die je vaak op WordPress-sites ziet.

1. Widget voor recente berichten

De widget Meest recente berichten is waarschijnlijk de meest gebruikte widget in blogs.

Hiermee kan je een lijst met je meest recente berichten laten zien in de sidebar of footer van elke pagina van je site. Je vergroot met een dergelijke widget de kans dat bezoekers op je site blijven en meer artikelen lezen.

De widget met recente berichten is vooraf geïnstalleerd op WordPress. Je kan zelf instellen hoeveel berichten je wil laten zien en welke titel je de widget wil geven.

Als je extra functionaliteiten zoekt, kan je ook de plugin installeren voor een alternatieve widget zoals WordPress Popular Posts, die de meest populaire content laat zien. Als alternatief kan je de widget Advanced Random Posts gebruiken. Deze vernieuwt telkens wanneer de gebruiker een nieuwe pagina opent.

2. Widgets voor recente reacties

Wil je bezoekers laten zien dat je een levendige site hebt en dat je publiek reageert op je content?

De widget Recente reacties geeft de laatste reacties weer, zodat bezoekers direct naar deze opmerkingen kunnen navigeren en aan de discussie kunnen deelnemen.

De widget voor recente reacties wordt geleverd met WordPress. Ook hier geldt dat je een externe opmerkingenplugin kan installeren om extra functionaliteiten toe te voegen, zoals de widget WP Social Comments waarmee mensen met hun Facebook-account kunnen reageren: dit is goed voor de betrokkenheid voor sociale media.

3. Call-to-action widgets

Een goede toepassing van een widget is om mensen aan te moedigen om actie te ondernemen. Hiervoor kan je een call-to-action widget gebruiken.

Deze widget kan een eenvoudige knop zijn, maar je kan je ook uitleven met een tekstwidget of een HTML-widget, of zelfs een afbeeldingswidget. Allen worden ze geleverd met WordPress.

Op een van mijn eigen sites gebruik ik een call-to-action widget om mensen aan te sporen om zich in te schrijven voor mijn mailinglijst. Hiervoor maak ik gebruik van de ingebouwde HTML-widget waarin ik een afbeelding, wat tekst en een knop heb opgenomen die ik in de HTML heb gecodeerd.

4. Navigatiewidgets

Ook kan je widgets gebruiken om mensen aan te moedigen om op je site rond te navigeren.

Hier heb je een aantal opties: de widgets Categorieën of Tagwolk en de widget Navigatiemenu.

Met de widget Navigatiemenu kan je een aangepast navigatiemenu en het hoofdnavigatiemenu op je site maken en die vervolgens aan een widgetgebied toevoegen.

Je kunt zelfs je hoofdnavigatiemenu toevoegen aan een widgetgebied, hoewel dit alleen werkt als je een klein navigatiemenu hebt.

Door een navigatiemenu toe te voegen aan de footer van je site, moedig je mensen aan om op je site te surfen als ze aan het einde van je bericht zijn gekomen. Dat is met name nuttig voor mobiele gebruikers die anders helemaal terug moeten scrollen om terug te keren naar het hoofdnavigatiemenu zodra ze het einde van een bericht hebben bereikt.

Als alternatief kan je de ingebouwde widget Categorieën gebruiken om een lijst van de categorieën op je site te laten zien of de widget Tagwolk om mensen de tag-archieven te tonen.

5. Mediawidgets

Door media toe voegen aan je sidebar of footer breng je wat leven in de brouwerij op je site en geef je de bezoekers iets om naar te kijken of om op te klikken.

Je kan de ingebouwde widget Afbeelding gebruiken om een afbeelding naar keuze in je sidebar of footer te tonen en je kan de afbeelding zelfs in een link veranderen.

Als alternatief kan je met de widget Video een video streamen van YouTube of Vimeo binnen het widgetgebied van je site. Dit is met name handig als je site speciale widgetgebieden gebieden heeft voor de homepagina, maar ook in de footer doen ze het goed, omdat ze de aandacht van mensen trekken die het einde van je bericht hebben bereikt.

6. Socialmedia-widgets

Als je interactie zoekt tussen de bezoekers van je site en jouw social media, dan kan je wellicht een socialmediafeed toevoegen aan de sidebar of footer van je site. Hiermee laat je je bezoekers zien dat je actief bent op sociale media en moedig je ze aan om je te liken of te volgen.

Eén manier om toegang te krijgen tot de socialmediawidgets voor de grootste platforms (Facebook, Twitter, Instagram) is door de plugin Jetpack te installeren, die al deze widgets – en nog veel meer – bevat.

Als alternatief hebben alle socialmediaplatforms hun eigen plugins, die je gratis in de plugindirectory kan downloaden. Je kan ook gebruik maken van externe plugins waarmee je de manier kan aanpassen waarop jouw socialmediafeed wordt laten zien.

7. Winkelwagenwidgets

Als je een e-commerce winkel beheert en daarbij een plugin gebruikt als WooCommerce, is het een goed idee om een winkelwagentje-widget te gebruiken. Hiermee kunnen gebruikers gemakkelijker naar hun winkelwagentje navigeren, op welke plek ze zich ook bevinden binnen je winkel.

Je zou deze in de sidebar kunnen plaatsen waar mensen het makkelijk kunnen zien of in de header als je thema daar een widgetgebied bevat.

E-commerce plugins zoals WooCommerce bevatten uiteraard hun eigen winkelwagenwidgets en andere e-commerce widgets als onderdeel van hun plugin. Dus zodra je e-commerce elementen aan je winkel hebt toegevoegd, zal je ze vinden op de Widgets-pagina.

8. Formulierwidgets

Als je wil dat mensen contact met je opnemen, vragen stellen of zich aanmelden voor je mailinglijst, dan kan je overwegen om een formulier aan je sidebar toe te voegen.

Met WordPress is helaas geen formulierwidget meegeleverd, maar je kan met een plugin eenvoudig zelf een toevoegen. Denk aan de gratis Contact Form 7 of de betaalde maar zeer krachtige Gravity Forms

9. Kaartwidget

Als je een bedrijf hebt met een fysieke winkel en je wil dat mensen je gemakkelijk kunnen vinden, dan is een kaartwidget echt iets voor jou.

Er zijn een aantal gratis Google Maps widgetplugins die je kan gebruiken, zoals de plugin WP Google Maps

Als je geen plugin wilt installeren, kan je insluitcode uit Google Maps halen en die toevoegen aan een HTML-widget.

10. Inlogwidget

Als je een membershipsite beheert, dan maakt een inlogwidget het makkelijker voor je bezoekers om op je site in te loggen, zonder dat ze daarvoor naar een afzonderlijke pagina moeten gaan.

De widget Meta die bij WordPress wordt geleverd, bevat een inloglink, maar ook een hele hoop extra dingen waar je waarschijnlijk helemaal niet naar op zoek bent. Ik raad dus aan om een aparte plugin te gebruiken uit de plugindirectory.

De widget Login with Ajax geeft je een loginformulier in je widget, wat betekent dat mensen vanaf elke pagina op je site in kunnen loggen.

11. Zoekwidget

Een hele simpele doch uiterst handige widget is de widget Zoeken, die ook in een standaard WordPress-installatie zit.

Voeg deze toe aan je sidebar of header en je maakt het je bezoekers makkelijker om dingen te vinden op je site.

Als je de kracht van je zoekwidget een boost wil geven, kan je de gratis widget WP Google Search installeren, die gebruikmaakt van Google Search.

Hoe je widgets toevoegt aan je WordPress-site toevoegt

Zodra je eenmaal hebt besloten welk soort widgets je nodig hebt voor je WordPress-site, is het tijd om ze te installeren.

Zorg er wel voor dat je de verleiding kan weerstaan om je hele site vol met widgets te zetten. Hoe meer widgets je toevoegt, hoe minder waarschijnlijk gebruikers ze opmerken. Richt je in plaats daarvan op twee of drie belangrijke widgets voor de sidebar. In de footer kan je gerust meer toevoegen. Hier geldt ook dat ze minder belangrijk zijn dan in de sidebar.

Als jouw thema zijn eigen widgetgebieden heeft, bepaal dan welke widgets je daarin wil plaatsen. Zorg dat ze passen bij de lay-out en het design van je site.

Er zijn drie manieren om widgets toe te voegen:

• Gebruik de widgets die al bij WordPress worden geleverd.
• Gebruik externe plugins uit de plugindirectory.
• Koop een premium plugin die een widget bevat.

Widgets zoeken voor je WordPress-site

Er is een breed scala aan beschikbare widgets, dus het kan moeilijk zijn om te kiezen welke je moet installeren. Laten we de opties bekijken en vervolgens onderzoeken hoe je degene vindt die het beste bij jou past.

Widgets die met WordPress worden geleverd

Als een van de vooraf geïnstalleerde widgets de klus kan klaren, gebruik deze dan. Waarom moeilijk doen als het makkelijk kan? Het bespaart je tijd en het betekent ook dat er minder code op je site uitgevoerd moet worden.

De vooraf geïnstalleerde widgets zijn:

• Archief: linkt naar archieven per maand, ontworpen voor blogs maar inmiddels wel enigszins verouderd.
• Kalender: een kalender met je berichten, ook deze is geschikt voor blogs waarin tijd van publicatie van belang is (maar tegenwoordig niet zo gebruikelijk).
• Eigen HTML: qua flexibiliteit ongeëvenaard, je kan hier alles toevoegen wat je wil in HTML (zoals Google forms). Als je niet vertrouwd bent met het schrijven van code, is het slim om deze over te slaan.
• Afbeelding: laat een afbeelding zien uit je mediabibliotheek.
• Navigatiemenu: geef het hoofdnavigatiemenu weer of een losstaand door jou aangemaakt menu.
• Recente reacties: een lijst met recente opmerkingen en de links ernaartoe.
• Tagwolk: een lijst met tags dat in een soort wolkvorm, met links naar de bijbehorende archieven.
• Video: sluit een video van YouTube in of een andere streamingdienst.
• Audio: sluit een podcast, een speler, een nummer of andere audioclips in (Leessuggestie: hoe begin je een podcast met WordPress).
• Categorieën: een lijst met categorieën van jouw blog met links naar de bijbehorende archiefpagina’s.
• Galerij: meer geavanceerd dan de afbeeldingswidget, laat een galerij met afbeeldingen
• Meta: metadata zoals inloglinks en RSS-feeds. Een kater uit de vroege dagen van WordPress en tegenwoordig nauwelijks gebruikt.
• Pagina’s: toon een lijst met de pagina’s van jouw site met links.
• Meest recente berichten: laat een lijst zien met de meest recente (blog)berichten waarmee je mensen aanmoedigt ze te lezen.
• Zoeken: een eenvoudig zoekvak.
• Tekst: hier kan je simpele tekst toevoegen, zoals informatie over je site.

Widgets toevoegen met een plugin

De WordPress-plugindirectory bevat duizenden gratis widgetplugins waarmee je het arsenaal aan widgets van je site kan uitbreiden.

Daarnaast zijn er ook plugins die zich niet uitsluitend richten op het toevoegen van widgets, maar als bijzaak wel een paar widgets bevatten, zoals bijvoorbeeld e-commerce plugins die je een winkelwagentje-widget en meer geven.

Als je in de plugindirectory niet kan vinden wat je zoekt, dan kan je eventueel een premium, betaalde plugin overwegen. Soms bieden deze meer functionaliteiten of een meer intuïtieve interface. Maar vaak bieden ze precies dezelfde features als een gratis plugin, dus zorg dat je goed zoekt voordat je een betaalde plugin aanschaft.

Hoe vind je de juiste widget voor jouw site

Om de perfecte WordPress-widget voor jouw site te vinden, volg je deze tips:

1. Zorg dat je erachter komt wat je precies verlangt van de widget. Welke functionaliteit moet deze hebben en hoe moet deze eruitzien? Moet de widget linken naar externe API’s?
2. Controleer de vooraf geïnstalleerde widgets om te zien of er al een is die aan je behoeften voldoet. Test alle relevante widgets en als er een geschikte tussen zit, super! Zo niet…
3. Ga naar de plugindirectory. Deze kan je vinden via Plugins > Nieuwe toevoegen. Zoek naar meer dan één term om de juiste plugin te vinden en zoek met én zonder het woord ‘widget’. Soms zal je zien dat een plugin die zich niet uitsluitend op widgets richt, een widget bevat als onderdeel van een bredere set functies.
4. Als je ook hier niets kan vinden, zoek dan naar een premium plugin. Vraag andere WordPress-gebruikers om aanbevelingen en bekijk beoordelingen voordat je er een kiest.

Welke je ook kiest, zorgt dat je deze test om te controleren of de widget werkt zoals jij dat wil. Als je een premium plugin koopt, raad ik aan om een te kopen met een niet-goed-geld-terug-garantie of een gratis proefperiode, zodat je geen miskoop kan doen.

Hoe voeg je in WordPress widgets toe aan de sidebar en footer

Nu je je widget hebt uitgekozen, is de tijd gekomen om deze aan je site toe te voegen.

Je kan widgets toevoegen aan elk actief widgetgebied dat door je thema wordt aangeboden. Als je thema geen widgetgebied heeft op de plek die jij wil, zoek dan naar een alternatief thema.

Verderop in dit artikel laat ik je zien hoe je je eigen widgetgebied kan coderen.

Er zijn twee manieren om widgets aan je site toe te voegen:

• Door gebruik te maken van de Customizer. Ga naar Weergave > Customizer > Widgets in het admin-menu of klik boven in de pagina in de adminbalk op Customizer > Widgets.
• Via de adminpagina Widgets. Ga naar Weergave > Widgets in het admin-menu of ga vanuit de adminbalk naar Customizer > Widgets.

Ik laat je verderop zien hoe je beide methodes kan gebruiken, maar laten we eerst eens kijken naar de widgetgebieden en waarom jouw thema je bepaalde widgetgebieden geeft.

Widgets zijn niet alleen voor de sidebar

Afhankelijk van je WordPress-thema, vind je mogelijk widgetgebieden in verschillende plaatsen.

De meeste thema’s hebben widgetgebieden in de sidebar en footer. Sommige thema’s hebben ook op andere plekken widgetgebieden, zoals boven of onder de content of in de header.

Als je binnen de WordPress admin naar de pagina gaat met widgetinstellingen, dan kan je daar alle widgetgebieden zien van jouw thema.

Ik gebruik een thema met meerdere widgetgebieden – verspreid over de hele website. Je kan in de onderstaande schermafbeelding zien dat ik widgetgebieden heb boven en onder de content, in de header en onder de reguliere footer.

Als je widgets wil toevoegen aan andere plekken op je site, dan is het logisch om een thema te zoeken met meerdere widgetgebieden. De beste manier om te doen, is door een framework-thema te gebruiken.

Een goed voorbeeld van een widget op een plek buiten de sidebar of footer is het toevoegen van een zoekfunctie in de header – zoals ik heb gedaan op een van mijn websites.

Widgetgebieden en thema’s

Widgetgebieden worden gecodeerd in de template-bestanden van je thema en in het functions-bestand van je thema.

Hier kan je de code zien die ik gebruik in het functions-bestand van mijn thema om een widgetgebied toe te voegen aan de header.

register_sidebar( array(
 'name' => __( 'In Header Widget Area', 'rmccollin' ),
 'id' => 'in-header-widget-area',
 'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
 'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
) );

En dit is de code in mijn header.php-bestand die zorgt dat het widgetgebied op de juiste plek in het thema wordt gezet.

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>

 <aside class="in-header widget-area right" role="complementary">
  <?php dynamic_sidebar( 'in-header-widget-area' ); ?>
 </aside>

<?php }

Als je meer widgetgebieden aan je thema wil toevoegen, moet je soortgelijke code toevoegen. Ik laat je verderop in dit artikel zien hoe je dat doet.

Vergeet niet dat je twee dingen kan doen als je thema niet zoveel widgetgebieden heeft als dat je zou willen:

• Zoek een thema met widgetgebieden op plekken die je wil.
• Codeer het nieuwe widgetgebied in jouw thema of in een child-thema.

Zodra je thema op elke plek die jij wil een widgetgebied heeft, kan je beginnen met het toevoegen van widgets.

Hoe gebruik je de Widgets-pagina om widgets toe te voegen

Er zijn twee manieren om widgets aan je WordPress-site toe te voegen. De eerste is door gebruik te maken van de Widgets-pagina in de WordPress-admin.

Klik op Weergave > Widgets. Hiermee open je de widgetspagina.

Om een widget toe te voegen, kun je een van twee dingen doen:

• Sleep het uit de lijst met de widgets (aan de linkerkant) naar het relevante widgetgebied.
• Klik op de widget die je wil toevoegen en je ziet een lijst met waar je deze kan toevoegen. Selecteer het widgetgebied waar je een widget wil toevoegen en klik op de knop Widget toevoegen.

Mogelijk moet je vervolgens nog instellen waar de widget zich bevindt binnen het widgetgebied.

Je kan in elk widgetgebied zoveel widgets toevoegen als je wil, maar hou je in. Je kan ze in het widgetgebied rondslepen om ze in de juiste volgorde te krijgen. Ook kan je ze van het ene widgetgebied naar het andere slepen als je toch niet blij bent met hoe het eruit ziet.

Je kunt ook je toetsenbord gebruiken om widgets toe te voegen met behulp van de Widgets-pagina, dus als je geen toegang hebt tot een muis, kun je nog steeds widgets toevoegen.

Widgets toevoegen en bewerken in de toegankelijkheidsmodus

Mocht je niet de beschikking hebben over een muis en je wil toch de Widgets-pagina gebruiken, dan kan dit.

Zet eerst het scherm in de toegankelijkheidsmodus door op de link Toegankelijkheidsmodus inschakelen rechtsboven in het scherm te klikken (of naar de tab te gaan en deze te selecteren).

Het scherm verandert nu om aan te geven dat je je in toegankelijkheidsmodus bevindt.

Je kan vervolgens tussen elementen van het scherm navigeren met behulp van de Tab-toets op je toetsenbord en op Enter drukken om een item te selecteren en acties uit te voeren. Je hebt twee opties. Je kan Tab gebruiken om bij de juiste widget te komen, op Enter klikken als je bij de Toevoegen-link bent, of gebruik Tab om naar het widgetgebied te gaan om vervolgens op Enter te drukken op de link met Bewerken.

Hoe gebruik je de WordPress Customizer om widgets toe te voegen

Als je de Customizer gebruikt om widgets toe te voegen (in plaats van de widgetspagina), dan kan je de widgets zien terwijl je ze toevoegt. Dit is vaak iets makkelijker, omdat je meteen weet hoe je widgets eruitzien en je ze makkelijk tussen widgetgebieden kan verplaatsen als je dat wil.

Ga in het admin-menu naar Weergave > Customizer. Ook kan je de adminbalk boven aan het scherm op de live site (ervan uitgaande dat je bent ingelogd) op Customizer klikken. Hiermee op je de Customizer.

Klik nu op de optie Widgets en je ziet een lijst met alle widgetgebieden in je thema. Klik op het widgetgebied waaraan je een widget wil toevoegen en klik op de knop Widget toevoegen.

Dit geeft je een lijst met alle beschikbare widgets voor je site. Hieronder vallen de ingebouwde widgets die met WordPress zijn geleverd, maar ook widgets die je door middel van plugins hebt toegevoegd.

Kies die je wil toevoegen aan het widgetgebied en je ziet deze in het preview-scherm aan de rechterkant.

Je kan widgets opnieuw rangschikken door ze aan de linkerkant van de pagina naar beneden en naar boven te slepen. Als alternatief kan je op de knop Sorteren klikken onder de widgets en ze met de pijltjes naar boven en beneden verplaatsen.

Als je klaar bent met het toevoegen van de widgets via de Customizer, vergeet dan niet om op de knop Publiceren te klikken linksboven zodat je wijzigingen worden opgeslagen. Als je dit niet doet bij het verlaten van de Customizer, dan worden je wijzigingen niet doorgevoerd op de live site.

Nadat je je widgets hebt toegevoegd, bekijk ze dan op je site om te zien of ze passen bij het ontwerp van je pagina. Als je te veel widgetgebieden hebt toegevoegd, kan het rommelig uitzien. Verwijder in dat geval een aantal of verplaats ze van het ene widgetgebied naar het andere.

Je kan dit heel makkelijk doen in de widgetspagina, waar je widgets tussen widgetgebieden kan slepen.

Hoe voeg je een widget toe aan een specifieke pagina

Sommige thema’s bevatten widgetgebieden die alleen voor specifieke pagina’s zijn, zoals de homepagina. Maar wat als je een widget wil toevoegen aan slechts één pagina op je site?

Je kan dit doen met de Gutenberg-editor, waarmee je berichten en pagina’s bewerkt.

Voeg op de gebruikelijke manier een nieuw blok toe en selecteer vervolgens het bloktype Widgets.

Je kan vervolgens kiezen uit (veel van de) widgets die op je site zijn ingeschakeld en deze aan de inhoud van je bericht of pagina toevoegen. Dit is erg handig als je bijvoorbeeld een formulierwidget, een call-to-action-widget of een lijst met recente berichten aan je artikelen wil toevoegen.

Hoe bewerk je widgets

Zodra je widgets aan je site hebt toegevoegd, kan je ze wijzigen. Individuele widgets hebben instellingen die je kan wijzigen via de widgetspagina of de Customizer (welke van deze twee je hebt gebruikt om de widget toe te voegen, doet er niet toe.)

Sommige widgets bevatten geen instellingen, maar veel wel. Denk bijvoorbeeld aan de titel van de widget of het aantal weer te geven berichten. Sommige zijn complexer dan anderen en moeten op een aparte instellingenpagina worden geconfigureerd. Raadpleeg bij twijfel de documentatie van de ontwikkelaar van de plugin.

Opties die je hebt voor het bewerken van de widgetplugin zijn onder meer:

• De instellingen van de plugin bewerken.
• De widget van het ene widgetgebied naar het andere verplaatsen.
• De widget verwijderen. Je hebt hiervoor twee opties, die ik verderop behandel.

Om de instellingen voor de widget te bewerken, moet je de widget lokaliseren in de widgetspagina of de Customizer, en bewerk je de opties die de widget je aanbiedt.

Als je de widget van het ene naar het andere gebied wilt verplaatsen, open je de widgetspagina en sleep je de widget het van het ene widgetgebied naar het andere. Navigeer in de toegankelijkheidsmodus naar de pijl rechts van de widget en maak een keuze uit de opties.

Widgets verwijderen

Om een widget te verwijderen binnen de widgetspagina, zoek je de widget en klik je op de knop Verwijderen linksonder in het vak met widgetinstellingen.

Om een widget in de Customizer te verwijderen, zoek je de widget in het widgetgebied. Klik op de pijl rechts van de naam van de widget en klik vervolgens op de knop Verwijderen linksonder in de widgetinstellingen.

Wil je een widget verwijderen, maar deze eventueel later nog gebruiken? Dat kan.

Scrol naar beneden tot je bij Inactieve widgets bent onder aan het scherm. Sleep widgets naar dit gebied om ze uit het “actieve” widgetgebied te halen, maar om ze nog wel te bewaren (inclusief de huidige instellingen). Je kan ze op een later moment terugslepen, mocht dit nodig zijn.

Als je van thema wisselt en je nieuwe thema heeft andere widgetgebieden, dan worden widgets die niet in de widgetgebieden van het nieuwe thema passen, automatisch verplaatst naar de lijst Inactieve widgets.

Hoe voeg je een nieuw widgetgebied toe aan je thema

Als je thema geen widgetgebieden heeft waar jij ze wil, dan kan je altijd je eigen gebieden toevoegen. Je kan dit doen door twee stukjes code toe te voegen.

Laten we een widgetgebied onder de content toevoegen.

Het widgetgebied aanmaken in het functions-bestand van je thema

De eerste stap is om het widgetgebied op te zetten met de functie register_widget ().

Als je gebruik maakt van een extern WordPress-thema (hier is een selectie van de beste), dan moet je een child-thema aanmaken om dit te doen. De reden hiervoor is dat als je het thema updatet in de toekomst, alle wijzigingen verloren gaan.

Als je met een eigengemaakt thema werkt, dan hoef je dit niet te doen.

Begin met het openen van het bestand functions.php van je thema. Voeg deze code toe onderaan het bestand.

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',

 ) );

}

add_action( 'widgets_init', 'kinsta_register_widgets' );

Sla nu het functions.php-bestand op. Als je nu naar de widgetspagina of de Customizer gaat, zie je nu als het goed is een nieuw widgetgebied waaraan je widgets kan toevoegen.

Er is echter een probleem, de widgets in dit widgetgebied worden op geen enkele pagina weergeven. Dit komt omdat je nog wat code moet toevoegen aan het templatebestand van je thema.

Het widgetgebied toevoegen aan het templatebestand van je thema

De eerste stap is om erachter te komen welk templatebestand je moet gebruiken.

• Als je bijvoorbeeld een extra sidebar wil toevoegen, dan moet je de code toevoegen aan het bestand php.
• Als je een widgetgebied voor of na de content wil toevoegen, moet je het toevoegen aan het themabestand dat verantwoordelijk is voor het uitvoeren van de content.
• Als je een widgetgebied toevoegt aan je header, moet je de code toevoegen aan het bestand header.php.
• Als je nieuwe widgetgebied slechts voor één pagina op je site of voor één soort content bedoeld is, moet je de WordPress-templatehiërarchie gebruiken om te bepalen welk templatebestand je moet bewerken of dat je zelfs een eigen bestand moet maken en bewerken. Als je bijvoorbeeld widgetgebieden aan je homepagina wil toevoegen, moet je een front-page.php-bestand aanmaken en daar je widgetgebied aan toevoegen.

Zodra je hebt bepaald welk templatebestand je moet wijzigen en waar je precies de code van het widgetgebied moet toevoegen, kan je de volgende code toevoegen. In het geval van een widgetgebied dat na de content wordt getoond, moet je deze toevoegen aan de themabestanden post.php en page.php:

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>

 aside class="after-content widget-area full-width" role="complementary">
  <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
 </aside>

<?php }

Sla je templatebestand(en) vervolgens op.

Houd er rekening mee dat jouw code anders is dan de mijne, afhankelijk van welke naam je hebt gegeven aan je widgetgebied en welke elementen je erin wil zetten. Ik gebruik doorgaans een aside-element, omdat deze naar mijn mening zijn ontworpen voor sidebars en widgetgebieden.

Tip: als je het einde van je container-element voor de content naar het begin van het sidebar- en/of footerbestand verplaatst, dan kan je dit daar toevoegen en hoef je dit maar een keer te doen.

Als je nu naar je site kijkt, dan zie dat alle widgets die je aan je widgets die hebt toegevoegd, op de juiste plek verschijnen. Mocht dit niet het geval zijn, ga dan terug en bewerk je templatebestanden en zorg dat de code op de juiste plek staat. Ook is het mogelijk dat je je CSS moet bewerken om het eruit te laten zien zoals jij dat wil.

Hoe codeer je widgets met behulp van de Widgets API

Je weet nu hoe je widgets moet uitzoeken voor je site, hoe je deze toevoegt en hoe je nieuwe sidebars en widgetgebieden registreert. De volgende stap is om te leren hoe je een WordPress-widget kan maken.

Soms is er geen plugin beschikbaar die de widget maakt waarnaar jij op zoekt bent. Dat betekent dat je zelf een moet coderen.

In dit voorbeeld laat ik zien hoe je een eenvoudige call-to-action-widget kan coderen.

Overzicht van de Widgets API

De Widgets API van WordPress bevat alle code die je nodig hebt om widgets te registreren, maken en coderen. De Widgets API bevat:

• Classes om nieuwe widgets te bouwen.
• Functies om widgets te registeren en implementeren op je site.
• Functies voor de deregistratie van widgets, bijvoorbeeld van een parent-thema.

In ons geval gebruiken we een class om een widget te bouwen. De eerste stap is het maken van een plugin die de widget bevat.

Een plugin voor je WordPress-widget maken

Om je eigen widget te maken, moet je een plugin coderen. Voeg de code voor een nieuwe widget niet toe aan je thema. De reden is dat widgets over functionaliteit gaan en niet over weergave/design. Als je in de toekomst van thema verandert, dan wil je nog steeds toegang hebben tot deze widget.

We beginnen door een lege plugin te maken. Maak een map aan in de map wp-content/plugins en voeg daar een leeg bestand toe. Geef het een passende naam. Open het bestand en voeg deze code toe.

<?php
/**
 * Plugin Name: Kinsta Call to Action Widget
 * Plugin URI: https://rachelmccollin.com
 * Description: A simple call to action widget.
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 */

Zorg dat je de author URI en de plugin URI bewerkt en jouw gegevens hier invult. Als het goed is heb je nu een plugin gemaakt die je kan activeren in de pagina Plugins.

Activeer je deze, dan gebeurt er echter niets. Je moet code toevoegen aan de plugin.

Maak een class aan voor de widget

De code van de widget zetten we binnen een class. Dat is dus het volgende dat we doen.

class kinsta_Cta_Widget extends WP_Widget {

}

De constructorfunctie aanmaken

Het eerste dat we binnen de class gaan doen is de constructorfunctie om de widget te maken. Voeg dit toe binnen de accolades “{ }” van de class.

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

Hiermee bouw je een widget.

Het formulier aanmaken om de widget uit te voeren

Vervolgens hebben we een formulier nodig dat door de widgetspagina en de Customizer wordt gebruikt om de widget te maken. Voeg het volgende toe, nog steeds tussen de accolades.

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>

<p>
 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>

<?php }

Met deze code krijgt de gebruiker een formulier te zien dat ze kunnen gebruiken om tekst en een link toe te voegen aan de call-to-action-box.

De functie aanmaken om de widget op te slaan

Nu moet je nog zorgen dat je alles in het formulier op kan slaan. Voeg dit doet.

//function to define the data saved by the widget

function update( $new_instance, $old_instance ) {
 $instance = $old_instance;
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['text'] = strip_tags( $new_instance['text'] );
 $instance['link'] = strip_tags( $new_instance['link'] );
 return $instance;          

}

Dit slaat de door de gebruik ingevoerde data op in de widgetinstellingen.

De functie maken om de widget te laten zien

Nu moet je nog de code toevoegen zodat de widget op de site wordt weergegeven. Nogmaals, voeg dit toe binnen de accolades:

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 <div class="cta">
  <?php if ( ! empty( $title ) ) {
   echo $args['before_title'] . $title . $args['after_title'];
  };
  echo '<a href="' . $link . '">' . $text . '</a>';
  ?>
 </div>

 <?php
 echo $args['after_widget'];

}

De widget registreren

Nu je je class hebt geschreven, is het tijd om de WordPress-widget te registreren, om deze werkend te krijgen. Voeg deze toe buiten de class.

//function to register the widget
function kinsta_register_cta_widget() {

 register_widget( 'kinsta_Cta_Widget' );
  
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

Sla nu het pluginbetand op. Ga naar de widgetspagina en je de widget, klaar voor gebruik.

Als je deze nu toevoegt aan een widgetspagina en je voegt de tekst en een link toe, dan zal je deze op je live site zien.

De kans is aanwezig dat het er echter nog niet zo mooi uitziet. We moeten het nog enigszins stylen met wat CSS.

CSS toevoegen aan de widget

Om CSS aan je plugin toe te voegen, moet je een stylesheet maken en deze in je plugin opnemen. Voeg dit toe aan je pluginbestand – voor de class.

function kinsta_widget_enqueue_styles() {

 wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
 wp_enqueue_style( 'widget_cta_css' );

}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );

Het enige wat je nog moet doen is een style.css-bestand aanmaken binnen de pluginmap, waar je elk soort styling aan kan toevoegen. Maar dat laat ik aan jou over!

Je hebt nu een eenvoudige call-to-action-knop die je kan toevoegen aan elk widgetgebied op je site. Als je deze bijvoorbeeld aan je sidebar toevoegt, dan kunnen mensen deze overal op de site gebruiken om naar je registratiepagina te gaan.

Uiteraard kan je nog veel complexere widgets maken met extra instellingen en opties, maar dit zou je een idee moeten geven over hoe je aan de slag kan gaan met het maken van je eigen widget.

Als je mijn code voor deze plugin wil zien, inclusief de styling, dan kan je deze vinden op Github. Als je net met code begint, is hier een uitgebreide handleiding over git versus GitHub over hoe je met beide aan de slag kan gaan.

Samenvatting

Widgets zijn een van mijn favoriete functies van WordPress. Ze kunnen je site tot leven brengen en je helpen meer aanmeldingen te krijgen of meer bezoekers naar klanten te converteren. Je kan WordPress-widgets toevoegen aan elk bestaand widgetgebied in je thema of je kan extra widgetgebieden toevoegen, zodat je op meer plekken widgets kan plaatsen.

Er zijn tal van plaatsen waar je widgets kan vinden. WordPress wordt geleverd met een aantal goede plugins, maar je kan er ook voor kiezen om via plugins meer te installeren. Maar dat is nog niet alles. Als je het wil en kan, dan is het zelfs mogelijk om je eigen widgets te coderen met behulp van de Widgets API.

Nu is het jouw beurt: hoe gebruik jij widgets op je WordPress-site? Hoeveel gebruik je er?