Ein Theme liefert das Grundgerüst, Blöcke bringen Inhalte in Form und der Editor hält zahlreiche Designoptionen für dich bereit. Doch manchmal fehlt genau die eine Einstellung, die deine Website wirklich unverwechselbar macht. Der Button soll beim Darüberfahren reagieren, eine Infobox mehr Aufmerksamkeit erhalten oder eine Überschrift auf dem Smartphone kleiner ausfallen. Was dir dann helfen kann: CSS in WordPress.
Mit wenigen Codezeilen kannst du Farben, Abstände, Schriftgrößen und zahlreiche weitere Details gezielt verändern. Dafür musst du weder ein komplettes Theme entwickeln noch tief in die Programmierung einsteigen.
Allerdings solltest du wissen, wo du den Code sicher platzierst und wie du verhinderst, dass aus einem kleinen Designkniff ein großes Darstellungschaos wird. Wir zeigen dir, wie du CSS in WordPress einfügst, bearbeitest und individuell anpassen kannst.
Was ist CSS und welche Rolle spielt es in WordPress?
CSS steht für „Cascading Style Sheets“. Die Stylesheet-Sprache bestimmt, wie die Elemente einer Website im Browser dargestellt werden. Während HTML die inhaltliche Struktur vorgibt, kümmert sich CSS um den sichtbaren Auftritt: Farben, Schriftarten, Größen, Abstände, Rahmen, Hintergründe und Positionen.
Vereinfacht gesagt: HTML baut das Haus, CSS entscheidet über Fassadenanstrich, Einrichtung und Lichtkonzept. CSS in WordPress ergänzt somit die Gestaltungsmöglichkeiten, die dein Theme, der Gutenberg-Editor oder ein Page Builder bereits mitbringen.
Eine CSS-Regel besteht in der Regel aus drei Elementen:
- meine-infobox ist der Selektor und bestimmt, welches Element angesprochen wird.
- background-color ist die Eigenschaft, die verändert werden soll.
- #f4f7fb ist der zugewiesene Wert.
Die geschweiften Klammern fassen alle Anweisungen für den Selektor zusammen. Möchtest du mehrere Eigenschaften verändern, schreibst du diese einfach untereinander. Auf diese Art lässt sich CSS in WordPress sehr präzise einsetzen, ohne gleich das komplette Seitendesign umzubauen.
CSS in WordPress einfügen: Vier Wege führen zum neuen Look
Wie du deinen Code hinterlegst, hängt vom verwendeten Theme, vom Umfang der Anpassungen und von deinen Zugriffsrechten ab. Grundsätzlich stehen dir vier Möglichkeiten zur Verfügung:
- Website-Editor für Block-Themes
- Customizer für klassische Themes
- CSS-Plugin für zusätzliche Funktionen
- Child-Theme für umfangreiche Anpassungen
Zusätzliches CSS im Website-Editor
Verwendest du ein Block-Theme, findest du die zentrale CSS-Funktion im Website-Editor. Der Weg dorthin führt normalerweise über:
- „Design“ und „Editor“ öffnen
- Die globalen Stile aufrufen
- Das Drei-Punkte-Menü auswählen
- Auf „Zusätzliches CSS“ klicken
- Code einfügen und Änderungen speichern
Seit WordPress 6.2 gehört der CSS-Editor zur Stiloberfläche. Der dort eingetragene Code wirkt sich auf die gesamte Website aus. Darüber hinaus kannst du einzelne Blocktypen mit zusätzlichen Regeln gestalten. Die genaue Position der Funktion kann dabei je nach WordPress-Version und Theme leicht variieren.
Zusätzliches CSS im Customizer
Bei klassischen Themes führt der Weg meist über „Design“, „Customizer“ und „Zusätzliches CSS“. Dort kannst du:
- CSS-Code direkt eingeben,
- Änderungen in der Vorschau kontrollieren,
- und das Ergebnis anschließend veröffentlichen.
Das häufig gesuchte WordPress Custom CSS wird getrennt von den eigentlichen Theme-Dateien gespeichert. Ein gewöhnliches Theme-Update überschreibt den Code daher nicht. Wechselst du jedoch das Theme, gilt das hinterlegte CSS nicht automatisch für das neue Design.
WordPress CSS einbinden: Plugin als komfortable Lösung
Ein CSS-Plugin bietet sich als smarte Alternative an, wenn dein Theme kein geeignetes Eingabefeld besitzt oder du Änderungen komfortabler verwalten möchtest. Je nach Plugin kannst du Regeln beispielsweise:
- nur auf bestimmten Seiten einsetzen,
- einzelnen Beiträgen zuweisen,
- nach Desktop, Tablet und Smartphone unterscheiden,
- und übersichtlich sammeln und bearbeiten.
Allerdings bedeutet jedes zusätzliche Plugin auch zusätzlichen Wartungsaufwand. Prüfe deshalb sicherheitshalber im Vorfeld, ob WordPress die benötigte Funktion bereits mitbringt.
Stylesheet im Child-Theme
Bei umfangreicheren Anpassungen ist ein Child-Theme die professionelle Lösung. Dein Code landet beispielsweise in dessen „style.css“ und bleibt von Aktualisierungen des Parent-Themes unberührt.
Diese Variante lohnt sich besonders, wenn du:
- zahlreiche verschiedene CSS-Regeln verwendest,
- das Design grundlegend individualisierst,
- mit mehreren Stylesheets arbeitest,
- und Änderungen langfristig sauber pflegen möchtest.
Zusätzliche Stylesheets sollten über „wp_enqueue_style()“ korrekt geladen werden. So bleibt dein individuelles CSS in WordPress strukturiert, wartbar und updatesicher.
WordPress CSS bearbeiten: Sicher ändern statt wild experimentieren
Bevor du CSS in WordPress bearbeitest, solltest du ein Backup erstellen und größere Änderungen zunächst in einer Staging-Umgebung testen. Ein fehlendes Semikolon zerschießt zwar selten die komplette Website, kann aber nachfolgende Regeln außer Kraft setzen. Ein zu allgemein gewählter Selektor verändert möglicherweise mehr Elemente als geplant.
Die Entwicklerwerkzeuge deines Browsers helfen dir dabei, das richtige Element zu finden. Mit einem Rechtsklick und „Untersuchen“ siehst du dessen HTML-Struktur, vorhandene Klassen und aktive CSS-Regeln.
Änderungen in dieser Ansicht sind nur vorübergehend: Nach dem Neuladen verschwinden sie wieder. Damit kannst du gefahrlos ausprobieren, bevor du den Code in WordPress übernimmst.
CSS-Anpassungen sicher testen und speichern
Vermeide nach Möglichkeit den direkten Eingriff in die „style.css“ des aktiven Parent-Themes. Beim nächsten Update können deine Änderungen überschrieben werden. Auch „!important“ solltest du nicht als Universalwerkzeug missbrauchen.
Die Anweisung kann zwar konkurrierende Regeln überstimmen, erschwert aber spätere Anpassungen. Wer WordPress CSS bearbeiten möchte, fährt mit spezifischen Selektoren und einer sauberen Struktur langfristig besser.
Prüfe nach jeder Änderung außerdem:
- die Desktop-, Tablet- und Smartphone-Ansicht,
- verschiedene Browser,
- zentrale Seitentypen wie Startseite, Beiträge und Kontaktseite,
- Lesbarkeit, Kontraste und anklickbare Elemente,
- sowie Ladezeit und mögliche Darstellungsfehler.
Mini-Tutorial: Eigenes CSS in WordPress verwenden
Mit diesem Beispiel gestaltest du einen Absatz oder eine Gruppe als hervorgehobene Infobox.
Schritt 1: Block auswählen
Öffne die gewünschte Seite im Block-Editor und markiere den Block, den du gestalten möchtest. Klappe in der rechten Seitenleiste den Bereich „Erweitert“ auf.
Schritt 2: CSS-Klasse vergeben
Trage unter „Zusätzliche CSS-Klasse(n)“ den Namen „meine-infobox“ ein. Wichtig: In dieses Feld gehört der Klassenname ohne Punkt. WordPress weist die Klasse anschließend dem ausgewählten Block zu. Der Bereich „Erweitert“ kann je nach Block weitere CSS-Funktionen anbieten.
Schritt 3: CSS-Regel hinzufügen
Öffne nun den Bereich für zusätzliches CSS in WordPress und füge folgenden Code ein:
Der Punkt vor „meine-infobox“ kennzeichnet den Selektor als Klasse. „padding“ erzeugt Innenabstand, „background-color“ legt die Hintergrundfarbe fest und „border-left“ setzt eine farbige Linie an den linken Rand. Durch „border-radius“ werden die Ecken leicht abgerundet.
Schritt 4: Mobilansicht optimieren
Damit die Box auf kleinen Bildschirmen weniger Platz beansprucht, ergänzt du eine Media- Query:
Speichere die Änderungen, lösche bei Bedarf den Website-Cache und kontrolliere das Ergebnis in mehreren Ansichten. Schon ist dein eigenes CSS in WordPress aktiv.
Fazit: Kleine Codezeilen mit großer Designwirkung
CSS in WordPress gibt dir die Freiheit, eine Website über die Standardeinstellungen des Themes hinaus zu gestalten. Kleinere Anpassungen lassen sich bequem über den Website-Editor oder Customizer erledigen. Für umfangreiche, dauerhaft wartbare Änderungen empfiehlt sich dagegen ein sauber aufgebautes Child-Theme.
Sobald mehrere Regeln ineinandergreifen, unterschiedliche Geräte berücksichtigt werden müssen oder die Änderungen geschäftskritische Seiten betreffen, lohnt sich professionelle Unterstützung.
WP Munich entwickelt technisch stabile WordPress-Lösungen, die gut aussehen, schnell laden und im Alltag einfach zu warten sind. Wir analysieren deine bestehende Website, setzen individuelle Designanpassungen sauber um und sorgen dafür, dass nicht nur der neue Button, sondern das gesamte Setup funktioniert.
