jQuery No Conflict Mode für WordPress

Manchmal möchte man ein Plugin oder eine Erweiterung in seinem Webprojekt einbauen, aber das klappt nicht. Die Seite bleibt leer – und wenn man die Fehlerkonsole des Browsers anwirft, bekommt man diese oder eine ähnliche Meldung:

TypeError: $ is not a function

Was ist da genau passiert? Die Chance ist gross, dass hier ein Problem mit jQuery.noConflict() vorliegt. In unserem Fall war es genau so. Das weit verbreitete CMS WordPress verwendet jQuery im sogenannten „noConflict Mode“, um eben eine größtmögliche Kompatibilität mit anderen Skripten herzustellen. Das problematische Skript (ein Buchungskalender als Software as a Service Lösung) war nach einem Update soweit geändert worden, dass es mit der Standard-Installation von WordPress mit dem vorhandenen jQuery (aktuell v1.12.4) in Konflikt kam, und darum der Kalender nicht mehr angezeigt wurde.

Die Lösung für das Problem ist ein kurzer Code, den man auf der entsprechenden Seite in den Header oder Footer integriert:

<script>
(function (jQuery) {
window.$ = jQuery.noConflict();
})(jQuery);
</script>

Bei der verwendeten Website kommt das sehr flexible Framework Astra zum Einsatz. Eine der Funktionen des Themes ist die Integration von „dynamischen Hooks“. Also schnell einen solchen Code-Hook auf der Buchungskalender Seite eingebaut – und Voilà: Das externe Skript wurde wieder normal angezeigt.