Aus Performancegründen lade ich Javascript-Dateien in selbst programmierten Plugins oder (Child-)Themes immer im Footer. Daneben muss allerdings mit Komponenten – WordPress inklusive – gerechnet werden, die das nicht tun. Für solche Fälle gibt es Mechanismen, die korrekt eingebundene Skripte in den Footer versetzen.

Korrekt eingebunden bedeutet auch, dass Skript-Abhängigkeiten, da wo sie gegeben sind, angegeben sind. Zum Beispiel kann ein jQuery-Plugin nicht funktionieren, wenn es bereits vor jQuery geladen wird. Um ein solches Missgeschick zu vermeiden, sieht WordPress vor, dass beim Einbinden vom Skripten im dritten Parameter Abhängigkeiten angegeben werden.

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

Das gewährleistet, dass ein von einem anderen abhängiges Skript erst nach diesem geladen wird.

Es ist immer wieder ernüchternd, wenn man das (fast) perfekte Theme oder Plugin gefunden zu haben glaubt, und dann nach dem Versetzen aller Skriptdateien in den Footer beispielsweise lesen muss TypeError: t.imagesLoaded is not a function. Das Skript das eine Funktion aufruft die nicht verfügbar ist wurde nach dem Versetzen der Skripte vor dem Skript geladen von dem es abhängig ist.

Im Theme wurde das (in der WP-Library verfügbare) Skript vor dem Skript das es benötigt eingebunden. Der Hinweis auf die Abhängigkeit im Folgeskript fehlte (damit hätte sich das Einbinden erübrigt, resp. ein registriertes Skript von dem ein anderes abhängig ist, wird ggf. automatisch vor diesem geladen).

So waren die Skripte eingebunden

wp_enqueue_script( 'imagesloaded' );
// von 'imagesloaded' abhängiges Skript
wp_enqueue_script( 'theme-main', $dir .'main.min.js', array( 'jquery' ), $theme_version, true );

Nachdem mit einem Optimierungsskript alle Skripte im Footer neu enqueued worden waren, stimmte die Reihenfolge nicht mehr. Vermieden worden wäre das durch den Verzicht auf die Zeile

wp_enqueue_script( 'imagesloaded' );

und stattdessen die Abhängigkeit mit anzugeben, wenn das zweite Skript enqueued wird.

wp_enqueue_script( 'theme-main', $dir .'main.min.js', array( 'jquery', 'imagesloaded' ), $theme_version, true );

functions.php im Childtheme

Die Funktion wp_enqueue_script() vermeidet unter anderem das mehrfache Laden ein- und derselben Skriptdatei. Wurde ein auf diese Weise eingebundenes Skript bereits von einer anderen Komponente geladen, ist sie dann diejenige, die das Skript einbringt.

Die functions.php eines Childthemes wird vor jener des Parents geladen. Hier bereits die Abhängigkeit zu deklarieren behob die Reihenfolgeverschiebung nach dem Versetzen aller Skripte in den Footer, und damit den Fehler.

function child_enqueue_script() {
	wp_enqueue_script( 'theme-main', $dir .'main.min.js', array( 'jquery', 'imagesloaded' ), $theme_version, true );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_script' );