IN DEZE HANDLEIDING:
Hoe voeg je JavaScript toe aan je hele WordPress site
Als je JavaScript wilt toevoegen aan je hele WordPress site, zijn er een paar verschillende benaderingen. Eén methode is om een aangepast HTML-bestand aan je thema toe te voegen en dan de JavaScript-code in dat bestand in te voegen.
Een andere manier is om een WordPress-plugin te maken die je JavaScript-code bevat. Je kunt ook gewoon je functions.php bestand bewerken en de code daar invoegen.
Als alternatief, om wijzigingen aan te brengen op je hele WordPress site, kun je JavaScript toevoegen aan de header of footer. De eenvoudigste manier is om de plugin Insert Headers and Footers te installeren en te activeren. Laten we alle vier de methoden eens grondig bekijken.
Vier manieren om aangepaste JavaScript toe te voegen aan WordPress
Er zijn verschillende manieren waarop je aangepaste WordPress JavaScript kunt toevoegen aan je website. Hier is een stap-voor-stap handleiding voor elk:
Methode 1: Gebruik een plugin
De eenvoudigste manier om JavaScript aan WordPress toe te voegen is met een plugin. Deze methode is flexibeler en gemakkelijker te beheren dan de code rechtstreeks aan je thema toe te voegen.
Als je niet comfortabel bent met coderen of een meer gebruiksvriendelijke oplossing wilt, raden we je aan een van de vele beschikbare plugins te gebruiken voor het toevoegen van JavaScript aan WordPress.
Voor deze tutorial gebruiken we Insert Headers and Footers. De Header en Footer Scripts plugin kan ook maar is wat verouderd in 2025.
Laten we eerst de plugin installeren:
Log in op je WordPress site.
Ga naar Plugins > Nieuwe toevoegen
Zoek naar “Insert Header and Footer”.
Klik op “Nu installeren” en activeer de plugin.
Aangepaste JavaScript in WordPress
Optie #1. Upload een aangepast JavaScript-bestand
Zodra de plugin is geactiveerd, navigeer je naar Instellingen → Koppen en voetteksten invoegen in je WordPress dashboard.
- Sla je aangepaste JavaScript-code op in een bestand met de indeling .js
- Upload het naar je site in deze map: wp-content/themes/je-thema/js/
- Ga naar Instellingen > Scripts voor kop- en voettekst.
Nu heb je twee opties om het bestand te laden:
- Scripts in header (laden binnen head tag)
- Scripts in de voettekst (laden vóór het sluiten van de bodytag)
- Gebruik de locatie die het beste past bij je behoeften
Methode 2: Gebruik WordPress functies en hooks
Je kunt ook aangepaste code toevoegen met WordPress functies en haken. Een functie is een stukje code dat een specifieke actie uitvoert. De functie wp_enqueue_script() wordt bijvoorbeeld gebruikt om een JavaScript-bestand te laden.
Een hook is een WordPress-functie die code kan toevoegen zonder kernbestanden te bewerken. Er zijn twee soorten haken: acties en filters.
Een actie is een PHP-functie die op specifieke punten tijdens het laden van een pagina wordt geactiveerd. Een voorbeeld: de actiehaak wp_head wordt geactiveerd vóór de tag in het bestand header.php van uw thema. U kunt deze hook gebruiken om aangepaste code of scripts toe te voegen aan uw header.
Filters wijzigen bestaande code of gegevens. Bijvoorbeeld, de_content filter kan de inhoud van een bericht wijzigen voordat het wordt weergegeven.
Om aangepaste JavaScript toe te voegen aan je WordPress site met behulp van functies en haken, moet je je code invoegen in het bestand functions.php van je kinderthema.
Voeg een nieuwe map toe in je WordPress-directory om een kinderthema te maken. Maak vervolgens een style.css bestand dat de stijlen van je kinderthema zal bevatten. Vervolgens moet u de volgende code toevoegen aan uw style.css bestand:
/*
Thema Naam: Twenty Twenty-Two Kind
Sjabloon: twentytwentytwo
*/Nu je je child theme hebt gemaakt, kun je het activeren door naar Appearance → Theme File Editor te gaan vanuit je WordPress dashboard. Navigeer naar het functions.php bestand en voeg de volgende code toe:
function ti_custom_javascript() {
?>
<script>
// je javascript moet hier komen
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');
Methode 3: Maak zelf een plugin
Als je je JavaScript-code gescheiden wilt houden van je thema, kun je een WordPress-plugin maken om deze te bevatten. Een plugin maken is ingewikkelder dan de code rechtstreeks aan je thema toevoegen. Toch kan deze aanpak flexibeler en gemakkelijker te beheren zijn.
Om een plugin te maken, moet je eerst een nieuwe map maken in de wp-content/plugins map van je WordPress installatie. Noem de map iets als “my-javascript-plugin”.
Maak vervolgens een nieuw bestand aan in die map en noem het “my-javascript-plugin.php.” De inhoud van dat bestand moet er zo uitzien:
<?PHP
/*
Naam van de plugin: Mijn JavaScript-plugin
Plugin URI: http://example.com/
Beschrijving: Deze plugin bevat mijn JavaScript code.
Versie: 1.0
Auteur: Arthur Wentzel
URI van de auteur: http://voorbeeld.com/
*/
?>
Vervang de velden Plugin Name, Plugin URI, Description, Author en Author URI door uw waarden. Dit zijn algemene informatievelden die je plugin beschrijven.
Vervolgens moet je je JavaScript code toevoegen aan het bestand. De code moet onder de oorspronkelijke plugin-informatie staan, maar vóór de afsluitende PHP-tag (?>). Zodra je je code hebt toegevoegd, sla je het bestand op en upload je het naar je server.
Je plugin zou nu geïnstalleerd en geactiveerd moeten zijn. Je kunt controleren of hij werkt door naar de Plugins pagina in je WordPress admin paneel te gaan. Daar zou je je plugin moeten zien staan.
JavaScript toevoegen aan specifieke WP pagina of bericht
Als u JavaScript wilt toevoegen aan een specifieke WordPress-pagina of -post, kunt u de code rechtstreeks in de thema-editor invoegen. Navigeer naar het bestand functions.php en voeg de volgende code toe:
functie ti_custom_javascript() {
if (is_single ('100')) {
?>
<script type="text/javascript">
// hier komt uw javascript code
</script>
<?php
}
}
add_action('wp_head', 'ti_custom_javascript');
U moet de “100” in bovenstaande code veranderen in de post of pagina-ID. U kunt dit nummer vinden door de post vanuit uw dashboard te openen en vervolgens de URL in de browserbalk te vinden. Het ID nummer zal naast “post=” staan:
Zodra je dat nummer hebt vervangen en je aangepaste JavaScript hebt toegevoegd, vergeet dan niet je bestand op te slaan.