Post navigation

WordPress: Custom CSS und JS hinzufügen ohne Plugin

Für das Hinzufügen von Custom CSS oder JavaScript zu Deinem Theme brauchst Du kein Plugin, das kannst Du smart und einfach mit einem WordPress-Snippet erledigen. Ich zeige Dir die verschiedenen Möglichkeiten.

WordPress: Eigenes CSS hinzufügen

Wichtig: Damit Deine Änderungen auch nach einem Theme-Update vorhanden sind, solltest Du ein Child-Theme für Dein Theme erstellen. Gehe einfach nach meiner Anleitung vor, es ist ganz einfach.

Wenn Du eigenes Custom CSS für Dein Theme nutzen möchtest und das nicht vom Theme-Entwickler vorgesehen wurde, so gibt es hierfür mehrere Möglichkeiten. Welche Du nutzen solltest, hängt ganz von der Menge des CSS ab.

Nur einige Zeilen CSS hinzufügen:

Wenn es nur wenige Zeilen sind, dann wird Dir dieses kleine Snippet für die functions.php Deines Child-Themes bereits ausreichen:

function ah_custom_css() {
?>
<style>
/* Hier Dein CSS einfügen, z.B.: */
background-color: #f5f5f5;
</style>
<?php }
add_action( 'wp_head', 'ah_custom_css' );

Mit dem obigen kleinen Snippet erstellst Du ein kleines Inline-CSS, das in den Header Deines Themes eingefügt wird. Das ist für einige wenige Änderungen optimal.

Ein komplettes Stylesheet hinzufügen:

Wenn Du bereits sehr viele Änderungen am Theme-CSS gemacht hast, dann wäre es empfehlenswert ein eigenes Stylesheet zu nutzen. Erstelle mit einem HTML-Editor eine neue Datei und nenne sie custom.css.

Falls Du noch keinen HTML-Editor besitzt, lade Dir kostenlos Brackets herunter. Auch ich benutze diesen wirklich guten Editor.

Alle Änderungen am CSS des Themes kommen in diese Datei hinein. Lade sie im Anschluss per FTP in den CSS Ordner Deines Child-Themes hinein. Sollte keiner existieren, lege einen an. Das macht die Sache übersichtlicher.

Folgender Code kommt nun in die functions.php hinein:

<?php
// Ab hier kopieren
/**
 * Ein eigenes CSS korrekt hinzufügen
 */
function ah_custom_css_file() {

 wp_enqueue_style('custom-css', get_stylesheet_directory_uri() . '/css/custom.css');
}
add_action('wp_enqueue_scripts', 'ah_custom_css_file');

WordPress: Ein eigenes JavaScript hinzufügen

Für eigenes JavaScript gibt es eine Besonderheit für WordPress, die Dir hilft, den berüchtigten TypeError: $ is undefined Fehler zu vermeiden. Dein JavaScript Code muss in den folgenden Wrapper hinein:

(function($) {
 
 // Hier Dein JavaScript einfügen
 
})( jQuery );

Auch hier gibt es je nach Aufwand wieder beide Lösungen. Für einige wenige Zeilen Code reicht ein einfaches Inline-Script aus:

<?php
// Ab hier kopieren
/**
 * JavaScript inline hinzufügen
 */
function ah_custom_js() {
?>
<script>
 // Dein JavaScript Code
</script> 
<?php }
add_action('wp_head', 'ah_custom_js');

Eine eigene JavaScript-Datei hinzufügen:

Wird der Code aufwändiger, lohnt es sich, eine eigene Datei zu erstellen. Diese wird in den JS-Ordner des Child-Themes geladen. Folgender Code kommt in die functions.php:

<?php
// Ab hier kopieren
/**
 * Ein eigenes JavaScript korrekt hinzufügen
 */
function ah_custom_js_file() {
 // Enqueue a custom JS file with jQuery as a dependency
 wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), false, false);
}
add_action('wp_enqueue_scripts', 'ah_custom_js_file');

Fertig! So einfach ist das.

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

6 Kommentare zu “WordPress: Custom CSS und JS hinzufügen ohne Plugin

  • Danke für die ausführliche Beschreibung. Ich bin gerade dabei mir ein vernünftiges Child-Theme zu erstellen und habe nun zwei kleine Fragen:
    Warum sollte/muss man eine „custom.css“ Datei in den Child-Ordner hinzufügen, wenn man im Child-Theme bereits eine „style.css“ erstellt hat?
    Kann man nicht gleich in der „style.css“ alle Änderungen hineinschreiben?

  • Hallo Andreas,
    was kann ich den tun, dass „automatisch“ generiertes inline-css & inline js vermieden wird? Habe eine Website mit dem Page Builder von WP Bakery erstellt. Das Inline-css & inline-js sieht ryte als „Warnung“, daher frage ich mich wie ich das auslagern kann 🙂
    LG Julia

    • Hi Julia,

      die einfachste Lösung wäre das Plugin »Autoptimize«. Das kann die CSS- und JavaScript-Dateien zusammenfassen und komprimieren. Du kannst in den erweiterten Einstellungen auch angeben, ob das Plugin auch Inline-CSS / Scripte mit aufnehmen soll. Ansonsten muss die jeweilige ID der Dateien herausgefunden werden, die Inlines am Laden gehindert und in Dateien ausgelagert werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.