Eigen code toevoegen aan WordPress met WPCodeBox, zonder je site te breken

Vroeg of laat kom je het tegen: een handleiding of forumbericht dat zegt “plak deze code in je functions.php”. Het werkt, maar het is ook de snelste manier om je site plat te leggen. Eén vergeten puntkomma en je bezoekers zien een wit scherm. En bij de volgende thema-update ben je je aanpassing gewoon weer kwijt.

Daarom werken wij anders. Op elke website die eigen code nodig heeft, installeren we WPCodeBox: een snippet-plug-in waarin al je aanpassingen netjes, veilig en overzichtelijk samenkomen. In dit artikel lees je waarom, en hoe je ermee werkt.

Wat is een snippet eigenlijk?

Een snippet is een klein, afgebakend stukje code dat één ding doet. Denk aan:

• de standaardlengte van samenvattingen op je blog aanpassen;
• een extra script laden, zoals een chatwidget of een trackingcode;
• XML-RPC uitschakelen als je het niet gebruikt;
• een melding in het dashboard verbergen voor je klant of redacteur;
• een stukje CSS dat enkel op de contactpagina moet gelden.

Het zijn geen volwaardige plug-ins, maar ook geen dingen die thuishoren in je thema. Je thema bepaalt hoe je site eruitziet. Gedrag dat je wilt behouden, ook als je ooit van thema wisselt, zet je beter ergens anders.

Waarom niet gewoon in functions.php?

Het bestand functions.php hoort bij je thema. Dat brengt drie problemen mee:

• Updates overschrijven het. Werk je in het bestand van het hoofdthema, dan verdwijnt je code bij elke update.
• Fouten zijn fataal. Een typfout in PHP stopt de hele site, inclusief het dashboard waar je de fout zou willen herstellen. Dan moet je via FTP of de bestandsbeheerder van je hosting aan de slag.
• Overzicht raakt zoek. Na een jaar staat er een lange lijst code zonder uitleg, en weet niemand meer welk stuk waarvoor diende.

Een snippet-plug-in lost die drie problemen in één keer op. Er bestaan er verschillende, maar WPCodeBox springt eruit.

Waarom wij voor WPCodeBox kiezen

Een editor die meedenkt

WPCodeBox gebruikt dezelfde editor-technologie als Visual Studio Code, de populairste code-editor ter wereld. Je krijgt kleuren voor je code, automatisch aanvullen van WordPress-functies, hooks en filters, en uitleg wanneer je met je muis over een hook gaat. Zo schrijf je minder fouten en ga je sneller.

Je kunt er niet alleen PHP in kwijt, maar ook CSS, SCSS, LESS, JavaScript en HTML. Alles op één plek dus, en overzichtelijk in mappen te ordenen.

Code enkel laden waar het nodig is

Dit is misschien de sterkste troef. Met de condition builder bepaal je precies wanneer een snippet draait. Bijvoorbeeld:

• enkel op de website, enkel in het dashboard of overal;
• enkel op bepaalde pagina’s of berichten, of juist overal behalve daar;
• enkel voor een bepaald berichttype of een bepaalde categorie;
• enkel voor ingelogde gebruikers met een specifieke rol;
• enkel op bepaalde dagen of vanaf een bepaald tijdstip;
• enkel als de URL een bepaald woord bevat.

Waarom dat belangrijk is? Code die niet geladen wordt, kan je site ook niet vertragen. Een script dat je enkel op je offertepagina nodig hebt, hoort niet op elke andere pagina mee te laden. Dat sluit perfect aan bij hoe wij websites bouwen: enkel laden wat nodig is.

Een vangnet als er iets misgaat

Iedereen maakt wel eens een fout. Het verschil zit in wat er daarna gebeurt. WPCodeBox herkent in de meeste gevallen zelf dat een snippet een fout veroorzaakt en zet die snippet automatisch uit. Je ziet hem in het rood staan, met de foutmelding erboven. Je site blijft gewoon draaien, jij herstelt de fout en zet de snippet weer aan.

Kom je toch niet meer in je dashboard, dan is er de veilige modus. Voeg deze regel toe aan wp-config.php, boven de regel “That’s all, stop editing!”:

define( 'WPCB_SAFE_MODE', true );

Alle snippets worden dan tijdelijk niet uitgevoerd. Je logt in, zet de foute snippet uit en verwijdert de regel weer.

Snippets bewaren in de cloud

WPCodeBox kan snippets opslaan in de cloud. Voor ons is dat goud waard: een snippet die we ooit voor één klant schreven en uitvoerig testten, zetten we met een paar klikken op een andere website. Zo bouwen we een eigen bibliotheek op van beproefde oplossingen, en profiteert elke klant van wat we eerder al uitwerkten.

Daarnaast heeft WPCodeBox een bibliotheek met kant-en-klare snippets voor veelvoorkomende aanpassingen. Handig als vertrekpunt, al lezen we die code altijd na voor we ze gebruiken.

Zo voeg je een snippet toe, stap voor stap

1. Ga in het dashboard naar WPCodeBox en klik op Add Snippet.
2. Kies de taal: PHP, CSS, SCSS, LESS, JavaScript of HTML.
3. Geef de snippet een duidelijke naam, bijvoorbeeld “Samenvattingen inkorten tot 25 woorden”, en zet hem in de juiste map.
4. Schrijf of plak je code.
5. Stel met de condition builder in waar en wanneer de snippet moet draaien.
6. Sla op en zet de snippet aan.

Een voorbeeld van een eenvoudige PHP-snippet die samenvattingen inkort tot 25 woorden:

add_filter( 'excerpt_length', function () {
    return 25;
} );

Dat is alles. Wil je later terug naar de standaard, dan zet je de snippet gewoon uit. Je hoeft niets te verwijderen.

Veilig werken: vijf gewoontes

Een goede snippet-plug-in maakt het veiliger, maar niet foutloos. Met deze gewoontes vermijd je de meeste problemen:

• Neem eerst een back-up. Met WPvivid, dat standaard bij onze pakketten zit, heb je dat in een minuut gedaan.
• Test op een testomgeving. Zeker bij code die met bestellingen, formulieren of gebruikers te maken heeft.
• Kopieer niet blind. Begrijp je niet wat een stuk code doet, plaats het dan niet. Code van onbekende bronnen kan verouderd of zelfs schadelijk zijn.
• Eén snippet, één taak. Zo zie je meteen welke snippet een probleem veroorzaakt, en zet je enkel die uit.
• Beperk waar het draait. Gebruik de condition builder. Hoe minder plekken een snippet geladen wordt, hoe kleiner de kans op conflicten.

Wanneer is een snippet niet de juiste keuze?

Groeit een snippet uit tot honderden regels, met eigen instellingen of een eigen beheerscherm? Dan is het tijd voor een echte plug-in. Dat is precies hoe onze eigen plug-ins ontstaan zijn: wat begon als een paar snippets, werd een compacte, goed onderhouden plug-in die enkel laadt wat nodig is.

En wil je stijl aanpassen in plaats van gedrag? Lees dan ons artikel over CSS aanpassen zonder je thema te bewerken.

Liever dat iemand meekijkt?

Heeft jouw MijnWpSite-website eigen code nodig, dan zetten wij WPCodeBox voor je klaar. Je kunt er zelf snippets in toevoegen, maar je staat er niet alleen voor. Twijfel je over een stuk code, stuur het ons eerst door. Neem contact op en we kijken met je mee.