Ein eigenes Script im Child-Theme laden & jQuery beachten

Sonnenuntergang am Nationalfeiertag vor dem Eiffelturm, Foto: microble.eu

Schon mal genervt gewesen, dass dein JavaScript mit jQuery in WordPress so ganz und gar nicht funktioniert?
Alles wird zwar brav geladen, aber jQuery kann nicht in deinem Script verwendet werden?
Dann lies ganz schnell weiter, denn mit diesem Tipp und einem Child-Theme hast du keine Sorgen mehr!

Oft genug brauchen wir in einem Theme zusätzliche Funktionen, die wir schnell und gut über JavaScript realisieren können. Aber wenn wir es in das Haupt-Theme einbauen ist es nicht so schlau, denn nach einem Update ist alles wieder weg. Daher legen wir ganz brav ein Child-Theme an und laden dort unsere neue js-Datei. Aber es will und will nicht laufen.

Die Reihenfolge in JavaScript ist wichtig.

Nein sie ist sogar entscheidend. Denn erst wenn etwas vom Browser geladen wurde, kann es auch verwendet werden. Und das genau in der Reihenfolge des Ladens. Du musst also zuerst jQuery laden, dass du es nachher in deinem Script verwenden kannst.

Jetzt kannst du natürlich die header.php aus dem Haupt-Theme kopieren und dann deine js-Datei im head-Element laden. Manchmal klappt es. Aber nur wenn jQuery auch dort geladen wird. In den meisten Fällen ist es aber leider nicht so. Denn die Bibliothek wird in den Themefunktionen mit wp_enqueue_script() geladen und dann kannst du auf das nachträgliche Laden in der Header-Datei pfeifen. Es wird nicht funktionieren!

Das Child-Theme erweitern

Daher legen wir in unserem Child-Theme eine zusätzliche Funktion in unsere functions.php.

//Eine eigene js-Datei fuer jQuery laden

//Konstante mit dem Verzeichnis zum Child-Theme definieren
define('CHILD_THEME_URI', get_stylesheet_directory_uri());

//Script in Abhaengigkeit zur jQuery laden
function bytebros_LoadScript(){
  //eigene js-Datei registrieren und mit jQuery gemeinsam laden
  wp_register_script('bb_script', CHILD_THEME_URI.'/bytebros.js', array('jquery'));
  //eigene js-Datei laden
  wp_enqueue_script('bb_script');
}
//Funktion beim Initialisieren ausfuehren
add_action('wp_enqueue_scripts', 'bytebros_LoadScript');

//Eine eigene js-Datei fuer jQuery laden

//Konstante mit dem Verzeichnis zum Child-Theme definieren

define('CHILD_THEME_URI', get_stylesheet_directory_uri());

//Script in Abhaengigkeit zur jQuery laden

function bytebros_LoadScript(){

//eigene js-Datei registrieren und mit jQuery gemeinsam laden

wp_register_script('bb_script', CHILD_THEME_URI.'/bytebros.js', array('jquery'));

//eigene js-Datei laden

wp_enqueue_script('bb_script');

}

//Funktion beim Initialisieren ausfuehren

add_action('wp_enqueue_scripts', 'bytebros_LoadScript');

Mit den obigen paar Zeilen klappt es perfekt. Jetzt kannst du deine JavaScript in die Datei bytebros.js schreiben. Diese liegt direkt im Verzeichnis vom Child-Theme und nimmt alle deine zusätzlichen Scripts auf.

Ich hoffe dieser kleine Trick hilft dir. Wenn du Fragen oder auch einen Tipp dazu hast, schreib doch einen Kommentar.

Die Reihenfolge in JavaScript ist wichtig.

Das Child-Theme erweitern

Diese Beiträge könnten dich auch interessieren

Hinweispflicht zu Cookies