Post navigation

WordPress: Custom CSS und JS hinzufügen ohne Plugin

WordPress Snippets · · Keine Kommentare

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.

Abonniere meinen Newsletter

Melde Dich für meinen Newsletter "WordPress & Bloggen" an und verpasse keinen Artikel. Als Dankeschön bekommst Du Gratis meine nützliche Checkliste:
»12 Dinge, die Du vor einem Theme-Wechsel beachten solltest«.

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er ist ebenfalls Autor von drei richtig guten WordPress E-Books.

Schreibe einen Kommentar

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