Wanneer je wat vaker WordPress sites maakt krijg je vroeg of laat te maken met het feit dat je JS wilt gaan toevoegen of aanpassen.
Veel mensen maken gebruik van een plugin om dit te doen, wij raden plugins altijd af als ze niet echt nodig zijn. Je kunt niet 100% zeker zijn van de code in externe plugins, en tevens is iedere geïnstalleerde plugin extra belasting op je WordPress omgeving dus kost dit weer iets aan laadtijd van jouw website.
Hoe dan? Zul je denken, we gaan een eigen gemaakt js-bestand toevoegen en deze inladen zonder gebruik te maken van plugins.
Open FileZilla (FTP-client) als je dit programma nog niet hebt, download FileZilla dan hier. En log in op je FTP-omgeving.
Ga naar functions.php (Meestal: public_html > wp-content > themes > jouw-child-theme-naam > functions.php) en download dit bestand.
Open het bestand in jouw favoriete code editor.
Plaats onderstaande code onderin je functions.php en upload je functions.php weer.
function daan_webdesign_custom_scripts() {
wp_register_script('daan_web_script', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'),'1.1', true);
wp_enqueue_script('daan_web_script');
}
add_action( 'wp_enqueue_scripts', 'daan_webdesign_custom_scripts' );
Wat staat hierboven precies? WordPress werkt met zogenaamde functions om extra functionaliteiten toe te voegen aan jouw WordPress website.
Allereerst geven we onze functie een naam, hier dus: daan_webdesign_custom_scripts , je mag dit aanpassen naar een naam die je zelf wilt zolang de benaming maar uniek is en je tussen ieder woord gebruik maakt van een underscore _ .
Let op! Wanneer je de naam aanpast, pas deze dan ook aan op de laatste regel van het script.
Daarna registreren we het nieuwe bestand en geven we de locatie aan.
get_stylesheet_directory_uri() staat voor het pad naar je child theme.
Het enige wat we nu nog moeten doen is in je child theme een map aan te maken genaamd: js en daarin je custom.js bestand te plaatsen.
Gefeliciteerd, je hebt zojuist je eigen custom JS-bestand ingeladen op de juiste manier! 😉