kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Eigene CSS-Styles bzw. Stylesheets im WordPress-Admin-Bereich verwenden

Ab und zu kommt es vor, dass der Admin-Bereich von WordPress individuell gestaltet werden soll. Beispielsweise soll das Farbkonzept für den Kunden angepasst werden. Zu diesem Zweck könnt ihr ein zusätzliches Stylesheet erstellen und mittels Action-Hook im Backend laden. In diesem Beitrag erklären wir, was getan werden muss.

WordPress-Backend per CSS stylen

Erstellt zunächst eine neue CSS-Datei und fügt die gewünschten Stile ein. In diesem Beispiel nennen wir das Stylesheet style-admin.css und legen es im Hauptverzeichnis des Themes ab. Also dort, wo auch die style.css liegt.

Der folgende Code färbt die Werkzeugleiste pink ein:

#wpadminbar {
   background: deeppink;
 }

Nun muss die neue CSS-Datei mittels functions.php registriert, eingereiht und anschließend an der richtigen Stelle geladen werden. Fügt dazu folgenden Code in die functions.php ein, oder ergänzt den Bereich der Datei, in dem CSS- und JavaScript-Dateien bereits registriert und eingereiht werden.

function kb_admin_style() {
   wp_enqueue_style('admin-styles', get_template_directory_uri().'/style-admin.css');
}

add_action('admin_enqueue_scripts', 'kb_admin_style');

Das Ergebnis sieht so aus:

Eingefärbte Werkzeugleiste in WordPress
Mit ein wenig eigenem CSS-Code wurde die Werkzeugleiste im Administrationsbereich eingefärbt

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

3 Kommentare

  1. Inga

    Verfasst am 30. Mai 2016 um 22:21 Uhr.

    Das ist ja cool. Das WP Grau im Backend zieht so depressiv runter.

  2. E.Struth

    Verfasst am 31. Oktober 2019 um 18:04 Uhr.

    Ich überschreibe das WP-admin-CSS ungewollt durch mein eigenes Plugin.
    Wenn es mehrere CSS-Dateien gibt, gibt es Probleme bei Namensgleichheit der Tags z.B. label gegen label in der anderen CSS-Datei bzw. hängt auch ab, wie spezifisch der tag ist z.B. label gegen div p label. Welcher CSS-tag hat Vorrang. Ich glaube, man sollte CSS bezüglich ID oder Klassen verwenden

    • Jonas Hellwig

      Verfasst am 1. November 2019 um 7:55 Uhr.

      Welcher CSS-Selektor wie wirkt und warum wird maßgeblich durch die CSS Spezifität beschrieben. Wir haben dazu einen ausführlichen Artikel veröffentlicht. Ebenso zum Thema CSS-Selektoren. Ich hoffe diese Ressourcen helfen weiter!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.