Javascript und Css Dateien richtig in WordPress einbinden

Bei der Anpassung oder Erstellung eines WordPress Themes sind öfters mehrere Dateien nötig. Beispielsweise bringen Javascript Plugins Ihre eigenen Design Dateien mit.
Wie diese richtig eingebunden werden zeige ich hier.

Zusätzliche Dateien einbinden

Im Grunde können Javascript und Css Dateien nicht falsch eingebunden werden.
Doch sollte der Weg über die Header.php nicht genutzt werden!
Dateien die auf diesem Wege eingebunden werden können in bestimmten Fällen zu Fehlern führen.

So hatte ich vor kurzem die WordPress Funktion wp_editor genutzt und anschließend waren meine Javascript Dateien nicht mehr funktional.
Zu diesem Zeitpunkt hatte ich diese Javascript Dateien aus Zeitgründen schnell in die header.php Datei geschrieben, Fehler!

Einbinden von JS und CSS Dateien per Funktion

WordPress bringt von Haus die nötigen Funktionen um diesen Schritt einfach zu erledigen.
Jedoch werden Javascript und CSS Dateien unterschiedlich eingebunden.

CSS Dateien richtig in WordPress einbinden

Bei der Einbindung ist außerdem zu beachten ob die CSS Dateien im Frontend oder im Backend genutzt werden sollen.

Damit wir die Datei custom.css im css Ordner des Themes oder eines Plugins geladen.
Der 3. Wert der Funktion muss angegeben werden wenn vorher eine bestimme CSS Datei geladen werden soll.
Der 4. Parameter enthält die Versionsnummer, abschließend wird der CSS Media Type angegeben ( ‘all’, ‘screen’, ‘handheld’, ‘print’) .

Wie bereits erwähnt gibt es Unterschiede bei der Einbindung für Front sowie Backend.

Css Dateien für das Frontend einbinden

Css Dateien für das Backend einbinden

Die Funktionen unterscheiden sich nur im Hook “wp_enqueue_scripts” und “admin_enqueue_scripts”.
In unserem Fall habe ich die gleiche CSS Datei für Frontend und Backend eingebunden.

Javscript Dateien richtig WordPress einbinden

Die Methode Javascript Dateien einzubinden unterscheidet sich kaum zu CSS Dateien.

Es wird die Datei custom.js im Theme oder Plugin Ordner unter dem handle custom-script eingebunden.
In meinem Fall habe ich den Parameter “deps” dazu genutzt im Vorfeld die jQuery Bibliothek zu laden um diese Funktionen in der Datei custom.js zu nutzen. Am Ende setze ich noch die Versionsnummer auf 1.0.

Auch bei der Einbindung von Javascript Dateien gibt es eine Unterscheidung zwischen Frontend und Backend

JS Dateien für das Frontend einbinden

JS Dateien für das Backend einbinden

Auf diesem Wege können CSS und Javascript sauber eingebunden werden.
Wordpress bietet mit dieser Methode noch mehrere Möglichkeiten die ich in einem weiteren Beitrag vorstellen möchte.

jQuery Probleme bei WordPress

Wenn Ihr die Javascript Dateien wie hier ausführlich beschrieben einbindet sollte euer Javascript code problemlos ausgeführt werden.
Jedoch kann es im Zusammenhang mit WordPress zu mysteriösen Problemen kommen. Ein Test ob die Datei eingebunden ist mache ich mit console.log(‘#läuft’);

Vor kurzem habe ich in einem WordPress Theme eine Javascript Funktion eingebaut. Der besagte Test lief aber die Events die ich von einem Button erhalten wollte wurden einfach nicht ausgeführt. Ich habe bereits an mir selbst gezweifelt was an einem on Click Event falsch zu machen sei.

Die Lösung für das Problem ist wenn jQuery erst im Footer geladen wird, was grundsätzlich gut ist da es das Rendern der Webseite nicht behindert.
Jedoch kommt es bei dieser Konstellation zu diesem merkwürdigen Effekt und eure Eventlistener wollen nicht funktionieren. Deshalb solltet Ihr eurer Javascript eben so erst im Footer einbinden. Dazu liefert WordPress in der wp_enqueue_script einen passenden Parameter. Diesen habe ich für euch bereits in den Code Beispielen gesetzt.

(CSS) Fertige Codebeispiele zum kopieren

Ich nutze diese Codeschnipsel selbst bei der Entwicklung eigener Themes und Plugins. Aus diesem Grund habe ich nun fertige Beispiele für die einzelnen Anwendungsfälle erstellt.

Frontend Css einbinden (Theme)

Frontend Css einbinden (Childtheme)

Frontend Css einbinden (Plugin)

Admin Css einbinden (Theme)

Admin Css einbinden (Childtheme)

Admin Css einbinden (Plugin)

(JS) Fertige Codebeispiele zum kopieren

Admin Javascript einbinden (Theme)

Admin Javascript einbinden (Childtheme)

Admin Javascript einbinden (Plugin)

Frontend Javascript einbinden (Theme)

Frontend Javascript einbinden (Childtheme)

Frontend Javascript einbinden (Plugin)

Verwendete WordPress Funktionen