Das Frontend bezeichnet alle Teile einer Website oder Webanwendung, die der Besucher im Browser direkt sieht und mit denen er interagiert. Es umfasst die gerenderte HTML-Struktur, die Stilregeln in CSS und das Verhalten durch JavaScript, das der Browser des Nutzers ausführt.
Was bedeutet das?
In der klassischen Dreiteilung einer Webanwendung steht das Frontend dem Backend und der Datenbank gegenüber. Das Backend verarbeitet Anfragen auf dem Server, liest Daten aus der Datenbank und erzeugt eine Antwort. Das Frontend empfängt diese Antwort und stellt sie visuell dar. Im WordPress-Kontext bedeutet das: Wenn ein Besucher eine Seite aufruft, führt WordPress auf dem Server PHP-Code aus, liest Inhalte aus der MySQL-Datenbank und gibt fertiges HTML an den Browser aus. Dieser HTML-Code, zusammen mit den verlinkten CSS- und JavaScript-Dateien, bildet das Frontend.
Die drei Kerntechnologien des Frontends sind klar voneinander abgegrenzt. HTML (Hypertext Markup Language) beschreibt die semantische Struktur des Inhalts: Überschriften, Absätze, Listen, Links, Bilder und Formulare. CSS (Cascading Style Sheets) legt das visuelle Erscheinungsbild fest: Farben, Schriften, Abstände, Layout und Animationen. JavaScript ergänzt interaktives Verhalten: Menüs, die sich bei Klick aufklappen, Formulare, die ohne Seitenneuladen abgeschickt werden, oder Inhalte, die nach dem Laden der Seite dynamisch nachgeladen werden.
In WordPress trennt das Theme das Frontend vom Backend. Das Theme steuert, wie die Inhalte aus der Datenbank im Browser aussehen. Es enthält Template-Dateien (PHP), Stylesheet-Dateien (CSS), JavaScript-Dateien und Grafiken. Besucher der Website sehen ausschließlich das Frontend. Das WordPress-Backend, der Administrationsbereich unter /wp-admin/, ist ebenfalls ein Frontend im technischen Sinne, richtet sich aber ausschließlich an angemeldete Nutzer mit entsprechenden Berechtigungen.
Mit der Verbreitung des Block-Editors und von Full-Site-Editing-Themes rückt das Frontend-Rendering in WordPress noch stärker in den Vordergrund. Block-Themes ermöglichen es, Template-Teile wie Header und Footer direkt im Browser zu bearbeiten und deren Ergebnis live im Frontend zu überprüfen.
Beispiel aus der Praxis
Sie beauftragen eine Agentur mit einem Redesign Ihrer WordPress-Website. Die Agentur entwickelt ein neues Theme, das die Farben, Schriften und das Seitenlayout anpasst. Alle Änderungen betreffen ausschließlich das Frontend: Inhalte, Beiträge und Seitenstruktur in der Datenbank bleiben unberührt. Nach dem Theme-Wechsel sehen Besucher die neue Gestaltung, während die redaktionellen Inhalte identisch bleiben.
Tipp
Für die Qualitätssicherung von Frontend-Änderungen empfiehlt sich der Einsatz der Browser-Entwicklerwerkzeuge (DevTools). Über die Taste F12 öffnen alle gängigen Browser ein Panel, das den DOM-Baum, angewendete CSS-Regeln, JavaScript-Fehler und Netzwerkanfragen anzeigt. Das ermöglicht es, Darstellungsprobleme direkt im Browser zu analysieren, ohne am Quellcode suchen zu müssen.