Ben je van plan om JavaScript toe te voegen aan je WordPress website, maar weet je niet precies hoe? Dan ben je hier aan het juiste adres. Er zijn verschillende mogelijkheden. Je zou het kunnen doen met code of je kan gebruik maken van plugins. Lees verder om erachter te komen welke manier het beste bij jou past.
Video
Voor de liefhebbers is er ook een video:
1. Gebruik van functions.php
Dit is de meest nette manier om JavaScript toe te voegen in WordPress. Dus let vooral goed op. 😉
Het is wel handig om eerst een child theme te hebben. Als je gaat lopen rommelen in functions.php van je parent theme, dan ben je al je aanpassingen kwijt na een update.
Dus maak eerst een child theme en lees dan hier verder, als je nog geen child theme hebt.
Heb je er eentje? Dan gaan we verder!
In functions.php van je child theme kan je deze code neerzetten:
function custom_scripts() {
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'custom_scripts');
Met dit stukje code laad je een apart JavaScript bestand op de goede manier in.
In je child theme map moet je nog wel een map “js” aanmaken, met daarin het “custom.js” bestand. In dit JavaScript bestand kan je je JavaScript code plaatsen.
Inline JavaScript toevoegen
Zonder een apart bestand zou je ook JavaScript kunnen inladen. Ik raad dit alleen aan als je kleine scripts wil schrijven.
Dat komt er dan zo uit te zien in je functions.php bestand:
function custom_inline_script() {
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("Hello world inline!");
});
</script>
<?php
}
add_action('wp_footer', 'custom_inline_script');
Dit kleine script wordt geladen in de footer, zoals je ook in de code kan terugzien.
JavaScript laden in specifieke pagina of bericht
Dat kan je doen door deze code in functions.php te zetten:
function custom_scripts() {
if (is_page('contact')) { // Alleen op de contactpagina
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true);
}
}
add_action('wp_enqueue_scripts', 'custom_scripts');
In dit geval wordt het “custom.js” bestand alleen geladen op de “contact” pagina.
Deze code gebruik je om een JavaScript bestand alleen te laden in een specifiek bericht:
function custom_scripts_for_post() {
if (is_single(42)) { // Vervang 42 door het ID van jouw bericht
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true);
}
}
add_action('wp_enqueue_scripts', 'custom_scripts_for_post');
Het id van een bericht kan je vinden door het bericht te bewerken in Gutenberg of de klassieke editor.
In de url vind je na post= het id.
Als voorbeeld nemen we deze url: https://jouwwebsite.nl/wp-admin/post.php?post=12&action=edit
12 is in deze url het id van dit bericht.
In de bovenstaande code in is_single() kan je ook de slug van het bericht gebruiken als je wil.
Dus stel dat we deze url als voorbeeld nemen: https://jouwwebsite.nl/een-bericht/
Dan kan je het zo toepassen: is_single('een-bericht')
2. Plugin gebruiken (WPCode)
Voor nette en herbruikbare code is het gebruik van de bovenstaande manier handiger.
Maar wil je snel code toevoegen zonder in functions.php te hoeven rommelen? Dan is een plugin ook een prima optie.
Eén van beste plugins om dat te doen is WPCode, eerder stond de plugin bekend als “Insert Headers and Footers”.
Met deze plugin kan je heel eenvoudig custom code snippets toevoegen aan je website.
Allereerst moet je natuurlijk de WPCode plugin downloaden en activeren.
Ga daarna in je dashboard naar Code snippets > + Snippet toevoegen.
Daarna klik je op “+ Aangepaste snippet toevoegen”:
Selecteer “JavaScript snippet”.
Vul daarna een titel en de code in. Ik gebruik nu “Hello world code snippet!” als titel.
Dit is de code die ik voor dit voorbeeld gebruik:
document.addEventListener("DOMContentLoaded", function() {
console.log("Hello world code snippet!");
});
Als locatie selecteer ik “Site brede footer”:
De rest laat ik voor wat het is. Activeer de code snippet en sla het op.
Op je website kan je dan testen of de code snippet zijn werk goed doet.
Klik met je rechtermuisknop ergens op je website, maakt niet uit waar, en klik daarna op “Inspecteren”.
Ga naar “console” en daar zou je “Hello world code snippet!” moeten zien staan. Zie je het niet? Laad de pagina dan opnieuw en kijk of je nu wel “Hello world code snippet!” in de console ziet staan.
Zie je het nog niet, dan heb je de vorige stappen waarschijnlijk niet goed doorlopen. Lees de tekst hiervoor even terug of je alles goed hebt gedaan.
3. In pagina of bericht met Gutenberg editor
Als je snel en makkelijk voor specifieke pagina’s of berichten JavaScript wil toevoegen, dan kan dat met het “Eigen HTML” blok.
Nadeel is wel dat het eventueel conflicten kan veroorzaken, dus dit moet je goed testen.
Voeg een “Eigen HTML” blok toe.
Zet in dit blok de volgende code:
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("Hello world in Eigen HTML blok!");
});
</script>
Sla het op en kijk of je in de console “Hello world in Eigen HTML blok!” ziet staan.
Hopelijk zijn de bovenstaande manieren nu helder voor je en kan je lekker aan de slag.
Wellicht is het ook interessant om te leren hoe je CSS en PHP toevoegt aan je WordPress website.
Zijn er nog onduidelijkheden of vragen? Dan zie ik hieronder wel een reactie!