Deze week kreeg ik een leuke en uitdagende taak tijdens mijn stage bij MonkeyProof: het toevoegen van een WhatsApp-knop aan een WordPress-site, volledig zonder plugins. Een taak die op het eerste gezicht eenvoudig lijkt, maar wel degelijk vraagt om een gestructureerde aanpak en wat technische creativiteit.
Doel van de taak
De bedoeling was om een vaste knop rechtsonder op de pagina te tonen, met een WhatsApp-icoon. Als de gebruiker hierop klikt, wordt die doorgestuurd naar een WhatsApp-chat met het bedrijf. Het ging dus niet zomaar om het toevoegen van een afbeelding of link, maar om een echt werkende, cross-browser compatibele en responsive oplossing — zonder gebruik te maken van bestaande plugins.
Mijn plan van aanpak
Omdat ik nog nooit eerder een eigen custom functionaliteit had geschreven voor WordPress, ben ik begonnen met een analyseplan. Daarin beschreef ik de onderdelen van de oplossing, de technologieën die ik zou gebruiken, en een inschatting van de benodigde tijd.
Technologieën:
- HTML – Voor het aanmaken van de knop.
- CSS – Voor de styling, positionering en responsiveness.
- JavaScript – Voor de klikfunctionaliteit (event listener) en redirect naar de WhatsApp API.
- PHP – Om de code op een nette manier in WordPress te integreren (bijvoorbeeld via
header.phpof viafunctions.php).
Tijdsinschatting (initieel):
Ik schatte 4 tot 6 uur werk in, verdeeld over:
- Onderzoek & voorbereiding
- HTML & CSS implementatie
- JavaScript functionaliteit
- Integratie in WordPress
- Testen en debuggen
Later gaf mijn mentor aan dat de voorbereiding mogelijk meer tijd in beslag zou nemen (2 uur), vooral omdat de juiste WhatsApp-API-documentatie lastig te vinden kan zijn. Daarop heb ik mijn inschatting aangepast.
Oplossing: hoe ik het wou aanpakken
Ik wilde de knop genereren via JavaScript zodat deze op elke pagina verschijnt zonder dat ik in elke template handmatig iets moest toevoegen. De CSS zorgt voor een ronde, opvallende knop die rechtsonder blijft zweven op het scherm. De klikactie stuurt de gebruiker naar een link in dit formaat:https://api.whatsapp.com/send?phone=+31612345678 (waar het telefoonnummer uiteraard aangepast wordt).
Voor de integratie in WordPress dacht ik aan twee opties:
- Direct toevoegen in
header.php - Of als inline script via
functions.phpmetwp_enqueue_script(meer future-proof)
Reflectie
Wat ik vooral geleerd heb, is dat zelfs een relatief kleine functionaliteit veel inzichten oplevert over structuur, planning, en communicatie met collega’s. Ook het inschatten van tijd is lastig als je iets voor het eerst doet — en dan is feedback enorm waardevol.
Ik wacht nu op de definitieve goedkeuring, maar ik ben alvast trots op mijn plan en kijk uit naar de implementatie. 
