Eigenes CSS in ein WordPress-Theme integrieren – so funktioniert’s

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.:

.entry-details {
text-transform: none !important;
}

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!

  1. Hallo zusammen,

    ich denke man sollte wo möglich auf Plugins verzichten weil es wie wir alle wissen die Seite natürlich ggf aufbläht und eine potentielle Fehlerquelle oder Sicherheitslücke darstellt. Trotzdem ist man natürlich immer daran interessiert alles so einfach wie möglich zu bekommen und dafür sind die Plugins schliesslich ja auch da. Da man den Code aber ohnehin schreiben muss kann man ihn meiner Meinung nach wirklich, wie du ja selber schreibst, einfach in die Styles.css eintragen.

    Was ich aber eigentlich schreiben wollte. Dieses Jetpack ist doch wirklich ein Krampf oder? Hat eigentlich irgendjemand damit gute Erfahrungen gemacht? Wer nur Teile davon wie zB die Tiled Gallery haben möchte dem seien die Light Versionen ans Herz gelegt. Hast bestimmt auch schonmal drüber geschrieben aber kam mir aus aktuellem Anlasse gerade in den Sinn.

    – mh

    • Hallo MH,

      also ich benütze Jetpack auf mehreren Seiten und bin eigentlich sehr zufrieden. Ich picke mir halt wirklich nur die Sachen raus, die ich brauche. Man hat halt einige (für mich nützliche) Plugins in einem Pack zusammengefasst und kann sich sicher sein, dass diese auch immer auf die neueste WordPress-Version angepasst werden und einwandfrei funktionieren. Das ist bei einzelnen anderen Plugins nicht immer der Fall.
      Zum CSS anpassen: dass mache ich auch immer direkt im styles.css. Habe da einfach ein besseres Gefühl dabei, als wenn irgend ein Plugin meine CSS-Datei einfach überschreibt.

      Viele Grüße,
      Andy

      • Danke für das Feedback Andy aber ich dachte genau das ist das Problem. Man kann doch, meines Wissens nach, bei Jetpack eben gerade nicht die nicht benötigten Module aussparen.

        Irre ich da?
        – mh

    • Das stimmt schon, aber einige der Module sind einfach besser als so manches Plugin. Stammen eben von den WordPress-Entwicklern. Das Jetpack-Modul „Custom CSS“ ist z.B. meine erste Wahl und ich habe viele Plugins getestet. Da ich aber nur vier der Jetpack-Module brauche, habe ich es quasi ausgebaut ein eigenes Plugin daraus gemacht. Funktioniert bestens.

  2. Einige Themes bringen die custom.css gleich mit. Das finde ich wirklich sehr praktisch. Aber Plugins sind auch eine Alternative. Mir gefällt an der custom.css (oder Child-Lösung), dass diese update-sicher sind. Mir ist es übrigens schon passiert, dass ich Jetpack deaktiviert hatte und nicht über die Konsequenzen bezüglich der „custom css“ nachgedacht hatte. Das macht auch deutlich, dass die Modifikationen zum Theme gehören und Plugin-Lösungen eigentlich nur die zweite Wahl sein können.

  3. Stephan Lück

    Ich erstelle mir eine extra script.php um die js und css Dateien einzubinden

    als ersten nutze ich normalize.css, dann gefolgt von der main.css – gefolgt von einer app.css.
    diese werden dann mittels sass compiliert

  4. Oder man macht ein Child-Theme und packt sein eigenes CSS via @import rein.

    • Performancemäßig ist das allerdings echt mies. Hier sollte man lieber im Child die Parent-Datei und dann die Child-Datei laden. Oder einfach alles reinkopieren….

  5. Ich ändere auch alles gleich im style.css und versuche, die Änderungen immer zu kommentieren, damit ich sehen kann, was ich wo geändert habe. Ich halte dies für die einfachste Möglichkeit.
    Sabienes

    • Sabienes, das hält aber maximal bis zum nächsten Theme-Update. Wenn Du dann vergisst, vorher Deine angepasste Style.css zu sichern, ist die ganze Arbeit futsch – Was ausgesprochen ärgerlich sein kann.

      Ich nutze daher auch entweder die Custom CSS des Themes oder ein Plugin. Bei größeren Anpassungen empfiehlt sich aber immer ein Child-Theme.

  6. Moinsen,

    Meine bevorzugte Lösung ist ein Child-Theme. Ebenso schnell und einfach umsetzbar und sicher gegen Updates. Außerdem nicht so ressourcenhungrig wie andere Konstrukte.

    Gruß
    Jens

  7. Hallo Ellen
    Danke für den klaren Beitrag – immer wieder schön hier vorbei zu schauen und zu stöbern, wenn es der Alltag erlaubt…
    Viele WordPress Premium Themes, die ich für meine Kunden einsetze, bieten die individuelle style-Kiste schon an, ansonsten ist die child-theme Version für mich die Beste.
    Ob ein Plugin zum Einsatz kommt, ist immer eine Frage der performance der Seite / des Blogs.
    Grüße ins Schwabenländle

  8. Hallo Ellen,
    was macht man wenn man z.B. Genesis framework verwendet und ein Childtheme. Ich möchte dann aber für jede Multisite ein eigenes style.css verwenden. Mir fällt da zur Zeit nur ein, für jede Unterseite ein childtheme zu erstellen und dieses für jeder Unterseite zu aktivieren. Gibt es einen eleganteren Weg? Und wie weiß jedes Childtheme zu welchem parent es gehört? Da wäre eine Multisite style.css Version sehr wünschenswert. Oder gibt es dazu ein Plugin?

    Grüße Henryk

  9. Ich bevorzuge die Lösung mit dem Child-Theme.
    Es ist leicht umzusetzen und Theme Updates überschreiben meine individuellen Anpassungen nicht.
    Der Einsatz von Plugins beeinflusst die Geschwindigkeit der Website.
    Plugins müssen regelmässig aktualisiert werden.
    Mit einem Child-Theme umgehe ich die Nachteile, welche mir durch den Einsatz von
    zusätzlichen Plugins entstehen.

  10. Danke, ich benutze immer Custom css

  11. Custom CSS ist für mich die beste Lösung, um auch bei Theme-Updates noch alles beisammen zu halten.

    <a href="http://www.two4media.com&quot; title="Webdesign Koblenz" Two4Media Web+Print

  12. Hallo Ellen und all die anderen,
    Dank an Ellen für den Post.
    Ich bin noch sehr am Anfang mit der Coderei und nutze daher ein css Plugin und finde den Gedanken der „Updatesicherheit“ sehr sympathisch.

    Leider habe ich die Erfahrung machen müssen, dass manche Anweisungen einfach ignoriert werden.
    So habe ich versucht meine Social-Icons in der Navileiste nach rechts zu verschieben (float:right) dies wird einfach nicht ausgeführt. Font-Size hingegen geht einwandfrei.
    Keine Ahnung warum das so ist.

    Wenn so etwas passiert, hilft es dann ein Child Theme zu haben oder muss man direkt in die style.css rein.

  13. Entschuldigung. Ich habe mich verirrt. Ich dachte, hier erklärt jemand, wie man sämtliche in einem Theme festgelegte Farben als Laie verändern kann.
    Aber hier sind ja nur Fachleute unter sich, die sich streiten, welche Methode die beste ist.
    Schade eigentlich…

  14. Ischmir ist gut!
    Vorher hatte ich nur eine Frage. Jetzt sind es mindestens drei. LOL.
    eine cosum.css oder eine style.css habe ich in meinem Theme nicht gefunden. Jetzt weiß ich aber, dass ein ChildTheme die große Lösung ist. Super! Wo gibts das denn?
    Und eigentlich brauche ich dass auch nur, weil mir der Seitenreport angezeigt hat, dass ich zuviel Spaghetticodes habe und das nicht gut ist.
    Und nun?

  15. Hallo Leute,

    wo findet man denn diese Codes? Gibt es da eine Seite?
    z.B. wenn ich meine Beitragsseite anders aufgebaut werden will?

    Liebe Grüße,

    Julia

    • Hallo Julia,
      das benötigte CSS für deine Anpassungen ist leider nicht vorbereitet, sondern du musst es selbst schreiben. Es gibt aber jede Menge Tipps und Tutorials im Web, so dass du eventuell noch einer Lösung für deine Anpassung googeln kannst.
      Viele Grüße, Ellen

  16. Ein Plugin für „Individuelles CSS“ ist für Einsteiger definitiv einfacher als die Erstellung eines Child-Themes. Neben den hier genannten Plugins ist das folgende empfehlenswert:

    SiteOrigin CSS
    https://de.wordpress.org/plugins/so-css/

    SiteOrigin CSS bietet im Editor eine Code-Vervollständigung, auf Klick sogar mit Live-Vorschau, in der die Änderung sofort angezeigt werden. Mit dem Inspektor hilft es, die richtigen Selektoren zu finden, und es gibt einen visuellen Editor, in dem man die CSS-Anweisungen nicht von Hand schreiben muss. Praktisch, wenn man die genaue Syntax nicht auswendig kann.

Hinterlasse eine Antwort

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