WordPress 7.0 wurde am 20. Mai 2026 veröffentlicht und bringt neben zahlreichen neuen Features ein umfassendes visuelles Redesign des Admin-Bereichs mit. Wer den Classic Editor nutzt, wird schnell feststellen, dass diverse UI-Elemente deutlich zu groß geraten sind: Buttons, Inputs, Checkboxen und Selects wurden im Rahmen des neuen WordPress Design Systems vergrößert. Das Core-Trac-Ticket #64547 dokumentiert die Änderungen: Input-Felder und Selects wuchsen von 30px auf 40px Höhe, Buttons bekamen größere Padding-Werte und neue Focus-Ring-Styles, und die Publish-Metabox wurde von Floats auf Flexbox umgestellt.
Das Problem im Detail
Im Block-Editor fallen die größeren Elemente kaum auf, weil das gesamte Layout darauf ausgelegt ist. Im Classic Editor hingegen, wo die Sidebar-Metaboxen nur rund 280 Pixel breit sind, führen die vergrößerten Buttons zu Umbrüchen und Layoutfehlern.
Besonders betroffen ist die Veröffentlichen-Metabox. Hier stehen die Buttons für Entwurf speichern und Vorschau normalerweise nebeneinander. Nach dem Update auf 7.0 brechen sie untereinander um, weil sie schlicht zu breit für den Container geworden sind.
Verschärft durch die deutsche Oberfläche
Das Problem tritt in der deutschen WordPress-Oberfläche besonders stark auf. Wo im Englischen ein kompaktes Preview steht, heißt es auf Deutsch Vorschau anzeigen, also 19 statt 7 Zeichen. In Kombination mit dem vergrößerten Padding reicht der Platz schlicht nicht mehr aus. Ähnliche Probleme können in anderen Sprachen mit längeren Beschriftungen auftreten, etwa im Französischen oder Niederländischen. Im Englischen fällt das Problem möglicherweise gar nicht oder deutlich weniger auf.
Die Lösung: Ein Code-Snippet
Das folgende PHP-Snippet setzt die UI-Elemente im Admin-Bereich auf die gewohnten Größen zurück und kürzt den zu langen Vorschau-Button per CSS auf die alte Beschriftung. Es lässt sich direkt über das Plugin Code Snippets einfügen, als PHP-Snippet mit dem Ausführungstyp “Nur im Admin” oder “Überall” ausführen.
add_action('admin_head', function() {
echo '<style>
/* Inputs zurück auf Pre-7.0 Größe */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"] {
min-height: 30px !important;
height: 30px !important;
padding: 0 8px !important;
font-size: 14px !important;
border-radius: 0 !important;
}
/* Titel-Feld braucht seine eigene Größe */
#title {
height: auto !important;
min-height: 44px !important;
font-size: 1.7em !important;
padding: 3px 8px !important;
}
/* Textareas: nur Schriftgröße, keine Höhenbeschränkung */
textarea {
font-size: 14px !important;
}
/* Selects: kein festes height, sonst brechen Plugin-Selects */
select {
min-height: 30px !important;
font-size: 14px !important;
}
/* Buttons auf alte Größen */
.wp-core-ui .button,
.wp-core-ui .button-secondary {
font-size: 13px !important;
min-height: 30px !important;
height: 30px !important;
line-height: 28px !important;
padding: 0 8px !important;
border-radius: 3px !important;
}
.wp-core-ui .button-primary {
font-size: 13px !important;
min-height: 30px !important;
height: 30px !important;
line-height: 28px !important;
padding: 0 10px !important;
border-radius: 3px !important;
}
.wp-core-ui .button-large {
min-height: 32px !important;
height: 32px !important;
line-height: 30px !important;
font-size: 14px !important;
}
/* Checkboxen und Radios */
input[type="checkbox"],
input[type="radio"] {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
}
/* Vorschau-Button: Text per CSS kürzen */
#post-preview {
font-size: 0 !important;
}
#post-preview::before {
content: "Vorschau" !important;
font-size: 13px !important;
}
/* Publish-Metabox: Float-Layout wiederherstellen */
#save-action {
float: left !important;
width: auto !important;
}
#save-action .spinner {
margin: 2px 4px 0 !important;
}
#preview-action {
float: right !important;
width: auto !important;
}
#minor-publishing-actions::after {
content: "" !important;
display: table !important;
clear: both !important;
}
#major-publishing-actions {
display: block !important;
}
#delete-action {
float: left !important;
}
#publishing-action {
float: right !important;
}
#major-publishing-actions::after {
content: "" !important;
display: table !important;
clear: both !important;
}
/* List-Table Controls */
.tablenav .actions select {
height: 30px !important;
min-height: 30px !important;
}
.tablenav .button {
min-height: 30px !important;
height: 30px !important;
}
/* Seiten-Titel-Button */
.page-title-action {
font-size: 13px !important;
min-height: 30px !important;
height: 30px !important;
line-height: 28px !important;
padding: 0 8px !important;
}
</style>';
});Hinweise
Das Snippet greift ausschließlich im Admin-Bereich und hat keine Auswirkungen auf das Frontend der Website. Es ist als Workaround gedacht, bis das Classic Editor Plugin ein Kompatibilitäts-Update für WordPress 7.0 veröffentlicht.
Wer kein Code Snippets nutzt, kann den Code auch in die functions.php des Child-Themes einfügen oder als MU-Plugin (Must Use Plugin, nicht Multi User) unter wp-content/mu-plugins/revert-wp70-admin-styles.php ablegen. MU-Plugins werden auf jeder WordPress-Installation automatisch geladen, ohne Aktivierung im Plugin-Menü. In diesem Fall muss ein <?php-Tag an den Anfang der Datei.
Die Umbenennung des Vorschau-Buttons von Vorschau anzeigen auf Vorschau erfolgt rein per CSS über font-size: 0 und ein ::before-Pseudo-Element. Der Screen-Reader-Text bleibt dabei erhalten, die Accessibility wird nicht beeinträchtigt.
Das Ganze ist ein quick&dirty-Fix, ich kann nicht garantieren, dass das bei jeder Nutzerin funktioniert, bei Bedarf bitte hier kommentieren. Bei mir funktionierts. 🙂
Selects: Vorsicht bei Plugins
Das Snippet setzt für <select>-Elemente bewusst nur min-height und font-size, aber keine feste Höhe. Der Grund: Themes wie Astra und diverse Plugins verwenden eigene Select-Stylings in ihren Metaboxen. Ein erzwungenes height: 30px würde deren Layout brechen. Falls einzelne Selects im Admin-Bereich noch zu groß erscheinen, können diese gezielt per ID oder Klasse angepasst werden.