Manchmal möchte man nur eine Kleinigkeit an einem WordPress-Theme ändern, zum Beispiel eine Schriftfarbe oder einen Schriftstil anpassen. Wenn diese Änderungen im Theme standardmäßig nicht möglich sind, gibt es alternativ die Option eigenes CSS zu integrieren und so CSS-Eigenschaften des Themes zu ersetzen oder sogar ganz neue CSS-Eigenschaften zu ergänzen. Und wie funktioniert das?

Die Voraussetzung ist, dass man bereits ein wenig mit CSS vertraut ist. Dann ist die Anpassung eines Themes mit eigenem CSS eigentlich gar nicht so schwierig und es gibt drei verschiedene Möglichkeiten das eigene CSS einzubinden. Wenn man wirklich nur ein paar CSS-Eigenschaften ändern oder hinzufügen möchte und sonst das Theme im Standard-Zustand bleiben soll, kann man ein WordPress-Plugin nutzen, wie z.B. Simple Custom CSS oder My Custom CSS. Wer bereits das Jetpack-Plugin nutzt, benötigt überhaupt kein weiteres Plugin, sondern kann einfach die bereits im Jetpack-Plugin integrierte Funktion „Eigenes CSS“ aktivieren und unter Design → CSS bearbeiten mit dem eigenen CSS loslegen. In vielen WordPress Premium-Themes ist außerdem bereits eine Option für das Schreiben von eigenem CSS vorhanden. So spart man sich ebenfalls die Installation einen extra Plugins, der Nachteil ist allerdings, dass so das CSS nicht Theme-unabhängig ist und bei einem Theme-Wechsel verloren geht. Diese Option sollte also nur genutzt werden, wenn speziell CSS des Themes angepasst werden soll.

Die dritte Möglichkeit ist dann noch eigenes CSS über die style.css Datei eines Child-Themes zu integrieren. Wenn man bereits ein Child-Theme nutzt oder Theme-Anpassungen geplant sind, die über die reine CSS-Anpassungen hinaus gehen, ist die Nutzung eines Child-Themes auf jeden Fall sinnvoll. In einem Child-Theme kann man alle Theme-Dateien anpassen und auch eine eigene functions.php Datei integrieren. So ist man ganz unabhängig vom Eltern-Theme und kann jede Menge Änderungen und Erweiterungen am Theme vornehmen.

CSS-Anpassungen mit Hilfe eines WordPress-Plugins

Simple Custom CSS

Mein derzeitiger Plugin-Favorit für CSS-Anpassungen ist Simple Custom CSS. Das Plugin ist wirklich ganz einfach und du findest nach der Installation den neuen Menüpunkt “Custom CSS“ unter Design. Hier kannst du jetzt einfach loslegen, dein CSS zu schreiben.

Simple Custom CSS im WordPress Admin-Bereich.
Simple Custom CSS im WordPress Admin-Bereich.

Nach dem Speichern deiner Änderungen kannst du deine Anpassung im Browser kontrollieren.

Die Farbanpassung der Überschriften im Browser.
Die Farbanpassung der Überschriften im Browser.

Die richtige CSS-Eigenschaft im Theme finden

Wenn du einmal nicht genau weisst, welche CSS-Eigenschaft des Themes du anpassen musst, um deine gewünschte Änderung zu erreichen, kannst du Browsertools wie die Funktion „Element untersuchen“ (z.B. Firefox oder Chrome) oder Browser-Addons wie Firebug (für Safari, Chrome oder Firefox) nutzen.

Die Element untersuchen-Funktion im Chrome-Browser.
Die Element untersuchen-Funktion im Chrome-Browser.

Im Elmastudio-Artikel „Video-Tipp: HTML- und CSS-Elemente schnell im Browser kontrollieren“ findest du ein praktische Video-Anleitung, welche die Funktion zum Finden des passenden CSS erklärt.

!important nutzen

Da dein neues CSS standardmäßig die CSS-Eigenschaften des Themes überschreibt, benötigst du eigentlich nicht die !important Regel. Falls das CSS des Themes einmal nicht überschrieben werden sollte, kannst du aber dennoch mit der Regel !important nachhelfen. Also z.B.:

[code]
.entry-details {
text-transform: none !important;
}
[/code]

Custom CSS von Jetpack

Falls du das Jetpack-Plugin sowieso schon nutzt, solltest du auf jeden Fall die Custom CSS-Funktion von Jetpack aktivieren und dein CSS unter Design → CSS bearbeiten eintragen.

So musst du kein zusätzliches Plugin installieren. Außerdem gibt es bei der Custom CSS-Funktion von Jetpack noch die sehr schöne Option „CSS Revisionen“. So kannst du ähnlich wie bei deinen Artikeltext-Revisionen die verschiedenen gespeicherten Versionen deines eigenes CSS vergleichen und auch zu einer älteren Version zurückkehren, falls einmal etwas schief gelaufen ist.

CSS Revisionen im Jetpack Custom CSS Feature.
CSS Revisionen im Jetpack Custom CSS Feature.

Die Eigene CSS-Option des Themes nutzen

Viele Premium WordPress-Themes bieten (meist auf der Theme-Optionenseite) die Möglichkeit, eigenes CSS direkt zu integrieren. Die Option hat ebenfalls den Vorteil, dass kein neues Plugin installiert werden muss. Wenn dein Themes diese Option bietet, du Jetpack nicht installiert hast und du nur ein paar kleinere CSS-Anpassungen machen möchtest, bietet sich diese Option an.

Du solltest aber darauf achten, wirklich nur CSS-Anpassungen vorzunehmen, die sich auf das Theme beziehen. Denn die CSS-Anpassungen sind nicht Theme-unabhängig und werden bei einem Theme-Wechsel nicht mit übertragen.

CSS-Anpassungen in einem Child-Themes umsetzen

Für etwas fortgeschrittene WordPress-Nutzer, die ihr Theme etwas mehr anpassen möchten, gibt es die praktische Option ein eigenes Child-Theme zu erstellen (hier eine Anleitung zur Erstellung eines Child-Themes). Mit einem Child-Theme kann man leicht Änderungen an einem Eltern-Theme vornehmen, ohne das diese bei einem Update des Eltern-Themes gelöscht werden.

Wenn du also bereits ein Child-Theme im Einsatz hast oder planst, noch weitere Änderungen direkt in den Theme-Dateien vorzunehmen, solltest du deine CSS-Anpassungen und Erweiterungen natürlich direkt in die style.css Datei deines Child-Themes schreiben. So hast du all deine Anpassungen an einem Ort und du musst auch nicht extra ein weiteres Plugin installieren.

Dein Feedback

Welche Plugins und Tools findest du praktisch, um eigenes CSS in WordPress zu integrieren? Welche Erfahrungen und Tipps kannst du weitergeben? Über dein Feedback zum Thema Eigenes CSS in WordPress freue ich mich sehr!