Wil je custom code toevoegen aan je WordPress-site? Bijvoorbeeld een Google Analytics-code of een Facebook Pixel? Vaak word je in tutorials of in andere blogs geadviseerd om code toe te voegen door middel van het functions.php-bestand óf een site-specifieke plugin. Deze methoden kunnen prima werken, en zal ik in deze blog toelichten. Daarnaast is er nog een derde optie, namelijk het gebruiken van een plugin die speciaal gemaakt is voor het toevoegen van zogeheten “code snippets”.

Veel tutorials die je op internet vindt zullen je aanraden om code-wijzigingen toe te voegen aan het functions.php-bestand van je WordPress theme. Dat kan natuurlijk geen kwaad, maar als je ooit een keer van theme wisselt raak je je wijzigingen wel weer kwijt.


TIP

Elegant Themes biedt twee geweldige WordPress themes (Divi en Extra) voor maar $89 per jaar of eenmalig $249!

Ga naar Elegant Themes »



Custom code toevoegen aan je WordPress-site?

Er zijn online veel verschillende “code snippets” te vinden voor WordPress-websites. Zo kun je met behulp van een code snippet bijvoorbeeld een Google Analytics-trackingcode aan je site toevoegen. Of je kunt ervoor zorgen dat er bepaalde shortcodes aan je WordPress-site worden toegevoegd.

In deze blog leg ik uit hoe je custom code het beste kunt toevoegen en wat de voor- en nadelen zijn van de verschillende methoden.

Functions.php

Functions.php bestand WordPress

Het functions.php is een bestand dat in ieder WordPress-theme voorkomt. Doordat je in WordPress als beheerder direct wijzigingen kunt maken in de PHP-code van je theme, is het vaak het snelst en makkelijkst om wijzigingen te maken via de Theme File Editor. Dit menu vind je onder Appearance > Theme File Editor, waar je ook de instellingen vindt rondom de themes die je geïnstalleerd hebt.

Hoewel het natuurlijk fijn is dat je gemakkelijk en snel wijzigingen kunt maken, brengt deze methode ook bepaalde nadelen met zich mee. Het voornaamste nadeel is dat wijzigingen in het functions.php-bestand verloren gaan als je een ander theme gaat gebruiken. Je moet de code snippets dan kopiëren van je oude theme naar je nieuwe. Dit is natuurlijk niet handig en bovendien een hoop gedoe.

Een ander belangrijk nadeel is dat er geen waarschuwingen worden gegeven als je een code toevoegt die niet werkt. Je website zou dan plotseling niet meer kunnen werken, waardoor je een backup moet gaan terugzetten.

Let op: Oók als je een update installeert kun je je wijzigingen aan het functions.php-bestand verliezen. Dit kun je oplossen door in ieder geval gebruik te maken van een child theme. Voor meer hierover, lees ook: WordPress child theme maken.

Hoewel het zeker mogelijk is om code toe te voegen aan het functions.php-bestand, raad ik deze methode dan ook af. Er zijn eigenlijk meer nadelen dan voordelen.

Site-specifieke plugin

Een betere methode is het creëren van een site-specifieke plugin. Dit is een plugin die je zelf maakt en waarin je alle custom code kunt bijhouden. Zo weet je zeker dat jouw snippets actief blijven als je ooit een ander theme activeert.

Een site-specifieke plugin maken is vrij eenvoudig. Creëer op je computer een nieuwe folder. Je mag deze zelf een naam geven zolang er maar geen spaties of andere speciale tekens in zitten. Bijvoorbeeld “wouterpostma-plugin“. Open vervolgens een tekstbewerker en kopieer de volgende code:

<?php
/*
Plugin Name: Mijn plugin
Description: Een site-specifieke plugin voor mijn website
Author: Wouter Postma
Author URI: https://wouterpostma.com/
Text Domain: wouterpostma-plugin
Version: 1
*/

Zorg er in dit bestand voor dat Text Domain overeenkomt met de naam van de folder. Sla dit bestand vervolgens op in de folder die je hebt aangemaakt met als bestandsnaam mijn-plugin.php (wederom mag je de naam zelf kiezen, als deze maar eindigt met de .php-extensie).

Om deze plugin op je website te activeren, kun je de folder uploaden via FTP (naar de folder wp-content > plugins) óf je kunt de folder comprimeren tot ZIP-bestand en deze vervolgens uploaden via Plugins > Add New > Upload plugin in WordPress:

Plugin uploaden WordPress
Een plugin uploaden in WordPress

Klik vervolgens op Install Now. De plugin zal daarna in de lijst met plugins verschijnen. Hier kun je de plugin direct activeren. Je hebt nu je eigen plugin gemaakt waarin je al je custom PHP-code kunt toevoegen aan je website. Wil je bijvoorbeeld een Google Analytics-trackingcode toevoegen, dan ziet dat er zo uit:

/* Google Analytics Trackingcode */
add_action('wp_head', 'wpostma_add_googleanalytics');
function wpostma_add_googleanalytics() { ?>
 
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
 
<?php } ?>

Zoals je ziet heb ik een comment toegevoegd vóór de snippet. Je kunt in PHP-bestanden zoals je eigen plugin door middel van /* en */ bepaalde regels als “comment” markeren. Dit kun je dan gebruiken om het bestand voor jezelf overzichtelijk te houden.

Tip: WPCode plugin

Een laatste methode die je kunt gebruiken voor het toevoegen van code snippets in WordPress is de WPCode-plugin.

WPCode-plugin voor WordPress
WPCode-plugin voor WordPress

Deze plugin voegt een nieuw menu toe aan je WordPress-site waar je gemakkelijk al je custom code kunt toevoegen. Daarnaast heeft de plugin een aantal handige extra’s.

Errors voorkomen

De WPCode-plugin checkt per code snippet die jij toevoegt, of deze uit geldige code bestaat. Programmeertalen als PHP geven vrij snel foutmeldingen op je website als je een kleine tikfout maakt.

De plugin zorgt er bijvoorbeeld voor dat je je custom code niet kunt activeren vóórdat deze geldige code bevat. Mocht de code fouten opleveren, zal de plugin je dit vertellen en moet je dit eerst oplossen voordat je verder kunt gaan.

De WPCode-plugin maakt het werken met code snippets een stuk veiliger. Zeker als je niet heel technisch bent. Normaliter zou je website meteen kunnen ophouden met werken als je een stukje foute PHP toevoegt. Doordat WPCode je code eerst controleert op mogelijke foutmeldingen, gebeurt dit een stuk minder snel.

Handig overzicht

De WPCode-plugin zet ook alle code snippets op jouw website in een handig overzicht. Je kunt hier bovendien tags aan toevoegen zodat je ze makkelijk kunt groeperen en terugvinden.

Overzicht van custom code snippets in de WPCode-plugin
Overzicht van custom code snippets in de WPCode-plugin

Zoals je in onderstaande screenshot kunt zien heb ik op dit moment maar één actieve snippet, namelijk Google Tag Manager. Mijn custom shortcodes staan op dit moment nog in mijn site-specifieke plugin, maar die ga ik wellicht óók overzetten naar WPCode.

Voorwaarden

Je kunt bepaalde code snippets óók voorwaarden meegeven in WPCode. Zo heb ik voor mijn Google Analytics-script ingesteld dat deze alléén geladen wordt voor niet-ingelogde gebruikers. Zo kan ik voorkomen dat WordPress-gebruikers worden meegerekend in de statistieken van mijn website (net als wanneer je intern verkeer wilt filteren in Google Analytics).

Code niet laden bij ingelogde gebruikers
Code niet laden bij ingelogde gebruikers

Automatisch invoegen

Je kunt je custom code ook automatisch invoegen in je website. Dat is bijvoorbeeld handig voor terugkerende advertenties die je wilt tonen aan je bezoekers. Je kunt dit instellen bij de Insertion-instellingen. Deze vind je onderaan de code snippet die je wilt toevoegen.

Insertion instellingen WPCode
Insertion instellingen WPCode

Bibliotheek

Een laatste handigheid in WPCode is dat de plugin een standaard bibliotheek heeft met veelgebruikte code snippets.

WPCode standaard code snippets
WPCode standaard code snippets

Zo heeft WPCode bijvoorbeeld snippets voor het toestaan van SVG-bestanden in de mediabibliotheek, het volledig uitschakelen van reacties in WordPress en het verbergen welke versie van WordPress je gebruikt voor hackers.

Tot slot

Ben je comfortabel met het toevoegen en aanpassen van PHP? Dan kun je prima custom code toevoegen aan je WordPress-website door gebruik te maken van een site-specifieke plugin. Het gebruiken van het functions.php-bestand van je (child) theme raad ik niet aan, tenzij het voor wijzigingen is die alléén van toepassing zijn op jouw specifieke theme.

Ben je niet heel technisch, maar wil je af en toe wat code toevoegen aan je WordPress-site? Dan kan het zelf toevoegen van (met name PHP-)code soms problemen opleveren. Zo kan je website opeens stoppen met werken als je een foute code toevoegt. De WPCode-plugin is dan een echte aanrader. De plugin zorgt er automatisch voor dat je foutieve code niet kunt activeren en bovendien zet de plugin alle code snippets voor je in een handig overzicht.

Auteur

Hi! I'm Wouter Postma, a digital and WordPress specialist from The Netherlands. In my free time, I work on digital projects and blog about WordPress and digital topics.

Plaats een reactie