Der Standardsatz an Formatierungsschaltflächen im WordPress-Editor ist jedem vertraut: fett, kursiv, Listen, Zitate. Wenn Sie jedoch regelmäßig eine Schaltfläche in einer bestimmten Farbe, einen Warnhinweis-Block oder eine Bildunterschrift in einem markenkonformen Rahmen einfügen müssen, schlägt die Routine mit voller Wucht zu. Jedes Mal: in den Textmodus wechseln, style="" schreiben, Klassen aus einem Spickzettel kopieren. Eine Schaltfläche wurde blau, eine andere hellblau. Ein Block mit Schatten, ein anderer ohne.

Das Problem ist nicht das Fehlen von Werkzeugen, sondern dass das Dropdown-Menü „Formate" in TinyMCE standardmäßig ausgeblendet ist. Und selbst wenn Sie es aktivieren, ist es leer: WordPress weiß nicht, welche Stile Sie benötigen. Sie können sie dort jedoch hinzufügen.

Es gibt drei Ansätze: über Code in functions.php, über ein Plugin mit visuellem Konstruktor und über den nativen Block-Editor-Mechanismus register_block_style(). Alle drei funktionieren und decken unterschiedliche Szenarien ab: von der manuellen Kontrolle über jedes Pixel bis hin zu „geklickt und angewendet".

💡 Kurzübersicht:

• Wir aktivieren das Dropdown-Menü „Formate" im klassischen Editor mit dem Filter mce_buttons_1 und befüllen es mit unseren eigenen Stilen über tiny_mce_before_init, mit Schritt-für-Schritt-Code im Inneren.
• Wir erstellen editor-style.css für die Live-Vorschau direkt im Editor: Eine Schaltfläche sieht bereits vor der Veröffentlichung wie eine Schaltfläche aus.
• Wir installieren TinyMCE Custom Styles, einen GUI-Konstruktor für Formate ohne Codeeingriff, mit automatisch generierten CSS-Dateien.
• Wir betrachten den nativen Weg für Gutenberg: Blockvarianten über register_block_style() registrieren, Stile über theme.json oder wp_add_inline_style() einbinden.

Was benutzerdefinierte Stile sind und warum Sie sie benötigen

Ein benutzerdefinierter Stil ist eine CSS-Voreinstellung, die Sie über das Dropdown-Menü des Editors auf ein ausgewähltes Fragment anwenden. Anstatt zum hundertsten Mal einen Absatz in <span style="..."> zu verpacken, wählen Sie „Hervorhebung" im Menü „Formate" und erhalten eine gelbe Markierung mit abgerundeten Ecken. Ein Klick.

Drei Gründe, dies einmal einzurichten und dann zu vergessen:

• Konsistenz. Alle Schaltflächen, Warnungen und Bildunterschriften sehen von Veröffentlichung zu Veröffentlichung gleich aus. Das Design driftet nicht auseinander.
• Geschwindigkeit. Der Redakteur gräbt sich nicht in CSS ein und kopiert keine magischen Klassen aus dem Notizblock, sondern drückt nur eine Schaltfläche.
• Sicherheit. Niemand überschreibt versehentlich das Markup durch Inline-Stile im Textmodus.

Typische Szenarien: Handlungsaufforderungs-Schaltfläche (theme-button), „Wichtig"-Block mit Icon und farbigem Rand, Aufzählungsliste mit Häkchen, Bildunterschrift im markenkonformen Stil, Code-Hervorhebung innerhalb eines Absatzes.

Methode 1: Code, über functions.php und editor-style.css

Der Weg für diejenigen, die keine Scheu haben, einmal die functions.php zu öffnen. Ergebnis: Das Dropdown-Menü „Formate" erscheint in der TinyMCE-Werkzeugleiste, und darin befinden sich Ihre eigenen Stile. Zehn Zeilen PHP, eine CSS-Datei, null überflüssige Plugins.

Schritt 1. Die Schaltfläche „Formate" aktivieren

Standardmäßig ist die Format-Dropdown-Liste styleselect ausgeblendet. Dieser Filter holt sie in die erste Zeile des Editors zurück. Platzieren Sie den Code in der functions.php des aktiven Themes oder, korrekter, des Child-Themes:

1
function myprefix_mce_buttons_1( $buttons ) {
2
    array_unshift( $buttons, 'styleselect' );
3
    return $buttons;
4
}
5
add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );

Der Hook mce_buttons_1 fügt die Schaltfläche der ersten Werkzeugleistenzeile hinzu. Wenn Sie die zweite oder dritte bevorzugen, verwenden Sie mce_buttons_2 oder mce_buttons_3.

functions.php gespeichert, einen beliebigen Beitrag geöffnet, ein Dropdown-Menü „Formate" erschien in der oberen Zeile links. Noch ist es leer.

Schritt 2. Eigene Stile registrieren

Nun befüllen wir das Menü mit tatsächlichen Formaten. Fügen Sie einen zweiten Filter in dieselbe functions.php ein:

1
function myprefix_add_format_styles( $init_array ) {
2
    $style_formats = array(
3
        array(
4
            'title'    => __( 'Theme Button', 'text-domain' ),
5
            'selector' => 'a',
6
            'classes'  => 'theme-button',
7
        ),
8
        array(
9
            'title'    => __( 'Highlight', 'text-domain' ),
10
            'inline'   => 'span',
11
            'classes'  => 'text-highlight',
12
        ),
13
    );
14
    $init_array['style_formats'] = json_encode( $style_formats );
15
    return $init_array;
16
}
17
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );

Was die Parameter der einzelnen Elemente bedeuten:

• title, der Name, den der Redakteur im Dropdown-Menü sieht.
• selector, das HTML-Tag, auf das der Stil angewendet wird. 'a' bedeutet, dass „Theme-Button" nur bei Links funktioniert.
• inline, umschließt den ausgewählten Text mit einem Tag (normalerweise span) mit der angegebenen Klasse. Perfekt, um ein Wort oder eine Phrase innerhalb eines Absatzes hervorzuheben.
• classes, CSS-Klasse (oder durch Leerzeichen getrennte Klassen), die dem Element hinzugefügt wird.

Fügen Sie Ihre eigenen Elemente nach demselben Schema zum Array hinzu. Die vollständige Liste der akzeptierten Parameter finden Sie in der TinyMCE-Dokumentation auf developer.wordpress.org.

Schritt 3. CSS für das Frontend schreiben

Das Menü ist befüllt, aber der Browser weiß noch nicht, wie .theme-button aussieht. Fügen Sie CSS zum Stylesheet des Themes (oder Child-Themes) hinzu:

1
.theme-button {
2
    display: inline-block;
3
    padding: 10px 15px;
4
    color: #fff;
5
    background: #1796c6;
6
    text-decoration: none;
7
}
8
.theme-button:hover {
9
    text-decoration: none;
10
    opacity: 0.8;
11
}
12
.text-highlight {
13
    background: #FFFF00;
14
}

Nach dem Speichern ist die Schaltfläche im Frontend gestaltet. Im Admin-Bereich zeigt der Editor sie jedoch noch nicht an.

Schritt 4. editor-style.css für die Vorschau im Editor hinzufügen

Um Stile direkt im visuellen Editor vor der Veröffentlichung anzuzeigen, benötigen Sie eine separate editor-style.css-Datei. WordPress kann diese automatisch erkennen:

1
function myprefix_theme_add_editor_styles() {
2
    add_editor_style( 'editor-style.css' );
3
}
4
add_action( 'init', 'myprefix_theme_add_editor_styles' );

Erstellen Sie eine Datei editor-style.css im Theme-Stammverzeichnis und kopieren Sie das CSS aus Schritt 3 hinein. Arbeiten Sie mit einem fremden Theme, legen Sie diese Datei im Child-Theme an: WordPress prüft zuerst das Child-Theme und lädt die dort vorhandene editor-style.css anstelle der des Parents.

Ergebnis: Text ausgewählt, „Highlight" gewählt, die gelbe Hervorhebung ist sofort im Editor sichtbar. Auf einen Link geklickt, „Theme Button" gewählt, er wird zu einem blauen Button.

Methode 2: TinyMCE Custom Styles Plugin, ohne Codeeingriff

Wenn Sie nicht an der functions.php hantieren möchten, aber Styles benötigen, gibt es ein fertiges Plugin. Es leistet dasselbe über eine visuelle Oberfläche im Admin.

Installieren und aktivieren Sie TinyMCE Custom Styles. Stand Juni 2026 verzeichnet das Plugin über 8.000 aktive Installationen und unterstützt den klassischen Gutenberg-Block ab Version 1.1.1. Das letzte Update (v1.1.5, Juni 2024) hat Sicherheitslücken geschlossen. Der Autor, Tim Reeves, sucht offen einen Nachfolger, die Codebasis ist jedoch stabil: Das Plugin zieht keine externen Abhängigkeiten und berührt die Datenbank nicht über seine eigene Optionstabelle hinaus.

Das Plugin erscheint in der allgemeinen Liste der installierten Plugins. Stellen Sie sicher, dass es aktiviert ist, bevor Sie mit der Konfiguration fortfahren.

Navigieren Sie nach der Aktivierung zu Einstellungen → TinyMCE Custom Styles. Der erste Bildschirm bietet die Wahl, wo die CSS-Dateien gespeichert werden sollen. Ich empfehle die dritte Option: Legen Sie einen separaten Ordner (zum Beispiel tinymce-styles) in wp-content/uploads an. Das schützt die Styles bei Updates des Themes oder des Plugins selbst. Klicken Sie auf „Save Settings".

Der erste Bildschirm zeigt drei Platzierungsoptionen für CSS. Wählen Sie die dritte und legen Sie einen Ordnernamen fest, zum Beispiel tinymce-styles.

Scrollen Sie auf der Seite nach unten und klicken Sie auf „Add New Style". Es öffnet sich ein Konstruktor, in dem Sie Folgendes festlegen:

• Title, die Bezeichnung im Dropdown-Menü (zum Beispiel „Großer blauer Button").
• Type, selektorbasiert (greift an einem bestimmten Tag), inline (umschließt mit span) oder Block.
• Classes und CSS-Eigenschaften, direkt in der Oberfläche, ohne Dateien.

Klicken Sie nach dem Speichern der Einstellungen unten auf der Seite auf „Add New Style". Es öffnet sich ein Konstruktor mit Feldern für Titel, Typ und CSS-Eigenschaften.

Speichern Sie, öffnen Sie einen beliebigen Beitrag und suchen Sie das Dropdown-Menü „Formats" in der zweiten Symbolleiste. Der neue Stil ist bereits vorhanden. Text auswählen, Stil wählen, wird sofort angewendet.

Der Vorteil des Plugins: Die CSS-Dateien (editor-style.css und editor-style-shared.css) werden automatisch im ausgewählten Ordner angelegt. Sie laden sie per FTP herunter, bearbeiten sie in einem komfortablen Editor und laden sie wieder hoch, ohne einen einzigen Eingriff in die functions.php.

Methode 3: register_block_style(), der native Weg für Gutenberg

Die beiden vorherigen Methoden funktionieren im klassischen TinyMCE-Editor und dessen Classic-Block innerhalb von Gutenberg. Wenn Sie jedoch ausschließlich im Block-Editor arbeiten, gibt es einen direkteren Weg: register_block_style().

Diese Funktion registriert eine Stilvariation für einen bestimmten Block, Button, Überschrift, Zitat, Gruppe. Die Variation erscheint im Seitenleisten-Panel des Blocks, und der Editor wendet sie mit einem Klick an.

Beispiel: Fügen wir einem Button eine „Fancy"-Variation mit gelbem Hintergrund und abgerundeten Ecken hinzu:

1
function myprefix_register_block_styles() {
2
    register_block_style(
3
        'core/button',
4
        array(
5
            'name'  => 'fancy',
6
            'label' => __( 'Fancy', 'text-domain' ),
7
        )
8
    );
9
}
10
add_action( 'init', 'myprefix_register_block_styles' );

Das CSS wird entweder über theme.json (bei modernen Block-Themes) oder über wp_add_inline_style() eingebunden:

1
.is-style-fancy .wp-block-button__link {
2
    background-color: #f0c040;
3
    color: #fff;
4
    border: none;
5
    border-radius: 15px;
6
    padding: 10px 20px;
7
}

Dieser Ansatz ist unabhängig von TinyMCE und funktioniert nativ in Gutenberg. Bei Themes mit theme.json (alle modernen Block-Themes) lassen sich die Stile direkt im Abschnitt styles.blocks beschreiben, ohne eine einzige Zeile PHP.

⁉️🤔 Häufige Fragen

Formate werden im Editor nicht angezeigt. Woran liegt das?

Gehen Sie zunächst zu Einstellungen → Advanced Editor Tools und stellen Sie sicher, dass der „Formats"-Button nicht aus der Toolbar entfernt wurde. AET übernimmt die Kontrolle über die Button-Zeilen, und Ihr mce_buttons_1-Filter wird möglicherweise ignoriert, bis Sie den Button explizit über die Plugin-Oberfläche hinzufügen. Prüfen Sie außerdem, ob der mce_buttons_1-Filter registriert ist und ein Array mit dem Element 'styleselect' zurückgibt. Leeren Sie den Browser-Cache und den Server-Cache, oft liegt das Problem nur daran.

Kann ich einen Stil an mehrere Selektoren gleichzeitig binden?

Ja. Übergeben Sie anstelle des Strings 'selector' => 'a' ein Array: 'selector' => 'a, button, span'. TinyMCE wendet den Stil auf das erste passende übergeordnete Tag aus der Liste an. In der Praxis ist das nützlich, wenn ein visueller Stil sowohl für Links als auch für <button>-Elemente funktionieren soll. Die Reihenfolge im Array ist entscheidend: Befindet sich der markierte Text in einem Link, der in einem div verschachtelt ist, und die Selektoren lauten 'div, a', wird der Stil auf div angewendet, nicht auf a. Setzen Sie spezifischere Selektoren an den Anfang.

Wie unterscheidet sich editor-style.css von editor-style-shared.css?

Das Plugin TinyMCE Custom Styles erstellt zwei Dateien. editor-style.css wird nur im TinyMCE-Editor geladen. editor-style-shared.css wird sowohl im Editor als auch im Frontend geladen, Stile daraus sind für die Besucher der Website sichtbar. Wird ein Stil nur für den Bearbeitungskomfort benötigt, platzieren Sie ihn in editor-style.css. Soll der Stil auf der Website wirken, gehört er in editor-style-shared.css. Beim manuellen Ansatz ist das Analogon zur Shared-Datei das Haupt-Stylesheet des Themes, und editor-style.css (eine separate, über add_editor_style() registrierte Datei) wirkt sich nur auf die Vorschau innerhalb von TinyMCE aus.

Ist es zwingend erforderlich, für diese Bearbeitungen ein Child-Theme zu erstellen?

Nein, der Code funktioniert auch in der functions.php des Haupt-Themes. Beim nächsten Theme-Update werden jedoch alle Bearbeitungen überschrieben. Die Regel ist einfach: Jede Anpassung über functions.php gehört in ein Child-Theme, das ist Ihre Versicherung gegen den Verlust von Änderungen. Falls Sie noch kein Child-Theme haben, erstellen Sie es in zehn Minuten anhand der Child-Theme-Anleitung: zwei Dateien, style.css mit einem Header und functions.php mit dem Import der Eltern-Styles, und Ihre benutzerdefinierten Formate überstehen jedes Update.

Das Plugin wurde seit 2024 nicht mehr aktualisiert. Sollte ich es installieren?

Mit Stand Juni 2026 befindet sich das Plugin TinyMCE Custom Styles weiterhin im Katalog von WordPress.org mit über 8.000 aktiven Installationen. Der Autor sucht offen nach einem Nachfolger, aber die Codebasis ist nicht aufgegeben: Das letzte Update (v1.1.5, Juni 2024) hat Sicherheitslücken geschlossen. Es besteht ein Risiko, das jedoch beherrschbar ist: Das Plugin zieht keine externen Abhängigkeiten und greift nicht tief in die Datenbank ein. Sollte das Plugin in Zukunft nicht mehr aktualisiert werden, können Sie die Stile jederzeit in die manuelle Methode überführen (Schritte 1-4 oben), ohne CSS zu verlieren. Eine aktiv entwickelte Alternative ist Advanced Editor Tools (AET) von Automattic, dessen Option „Create CSS classes menu" das Menü jedoch oft mit unnötigen Klassen überfrachtet. TinyMCE Custom Styles gibt Ihnen die manuelle Kontrolle über jedes Element, daher sind sie keine Konkurrenten, sondern ergänzen sich eher.

Code, Plugin oder Blöcke: Was Sie für Ihr Szenario wählen sollten

Die Wahl läuft auf zwei Fragen hinaus: In welchem Editor arbeiten Sie, und sind Sie bereit, einmal die functions.php zu öffnen?

Arbeiten Sie im klassischen Editor oder im Classic-Block von Gutenberg und scheuen keinen Code, nehmen Sie Methode 1. Zehn Zeilen PHP, eine CSS-Datei, volle Kontrolle.

Möchten Sie einen visuellen Format-Konstruktor, ohne Code anzufassen und mit automatischer CSS-Generierung, installieren Sie TinyMCE Custom Styles. Bedenken Sie das Risiko der langfristigen Unterstützung, aber zum heutigen Stand liefert das Plugin, was es verspricht.

Leben Sie im Block-Editor, beherrschen Sie register_block_style(). Dieser Weg ist nativ für Gutenberg, hängt nicht von TinyMCE ab und wird vom WordPress-Core unterstützt.

In jedem der drei Szenarien erhalten Sie die Hauptsache: Formatierung mit einem Klick statt manuellem Kopieren von Klassen und Inline-Styles. Und das bedeutet ein bis zwei Stunden gesparte Zeit pro Monat auf jeder regelmäßig publizierenden Website.