Letzte Aktualisierung 7. Juli 2026

WordPress Theme erstellen: So erstellen Sie Ihr eigenes Template

Letzte Aktualisierung

7. Juli 2026

Mit einem eigenen WordPress-Theme bestimmen Sie selbst, wie Ihre Website aussieht, aufgebaut ist und funktioniert. Sie sind nicht auf die Vorgaben eines fertigen Themes angewiesen, sondern können Design und Funktionen gezielt an Ihre Anforderungen anpassen.

In dieser Anleitung zeigen wir Schritt für Schritt, wie Sie ein eigenes WordPress-Theme erstellen: Wir erklären, wie Sie die wichtigsten Theme-Dateien anlegen, Stylesheets und Funktionen einbinden und zentrale Elemente wie Menüs einrichten.

Inhaltsverzeichnisanzeigen

Top WordPress Hosting 2026

Gesponsert

ab 2,99 €

pro Monat

Hostinger

1,7

Testergebnis

gut

ab 10,42 €

pro Monat

one.com

ab 25,14 €

pro Monat

Kinsta

1,6

Testergebnis

gut

ab 0,00 €

pro Monat

WordPress.com

1,8

Testergebnis

gut

alle anzeigen

Das Wichtigste in Kürze

Ein WordPress-Theme lässt sich bereits mit wenigen Dateien erstellen. Für die Grundlage reichen eine style.css und eine index.php. Weitere Templates wie single.php oder archive.php ergänzen Sie später nach Bedarf.
Für die Theme-Entwicklung genügen grundlegende Kenntnisse in HTML, CSS und PHP. Sie lernen dabei ganz nebenbei, wie die WordPress-Template-Hierarchie funktioniert und wie Inhalte auf Ihrer Website ausgegeben werden.
In der Datei functions.php hinterlegen Sie die technischen Einstellungen Ihres Themes. Dort binden Sie Stylesheets und Skripte ein, aktivieren Funktionen und registrieren Menüs.
Ein eigenes Theme wächst Schritt für Schritt mit Ihren Anforderungen. Neue Templates, Funktionen und Anpassungen lassen sich jederzeit ergänzen, ohne auf die Vorgaben eines fertigen Themes angewiesen zu sein.

Ein eigenes WordPress-Theme erstellen

Ein eigenes WordPress-Theme gibt Ihnen mehr Kontrolle über den Aufbau, das Design und die technische Grundlage Ihrer Website. Fertige Themes von Drittanbietern sind zwar bequem, aber sie sind oft in den Gestaltungsmöglichkeiten eingeschränkt und bringen überflüssigen Code mit.

In dieser Anleitung lernen Sie, wie Sie ein einfaches WordPress-Theme von Grund auf erstellen. Der Fokus liegt bewusst auf den wichtigsten Dateien, Funktionen und Einstellungen, damit der Einstieg überschaubar bleibt.

Sie arbeiten direkt im Theme-Verzeichnis einer WordPress-Installation. Für eine lokale Entwicklungsumgebung eignen sich zum Beispiel:

Name	Beschreibung	Geeignet für
Local	Sehr einfache Einrichtung mit grafischer Oberfläche. WordPress-Installationen mit wenigen Klicks erstellt und verwaltet.	Einsteiger oder schnelle Testumgebungen
XAMPP	Lokaler Webserver mit Apache, MariaDB und PHP. Mehr Kontrolle über Serverkonfiguration und Versionen.	Nutzer, die tiefer eingreifen oder mehrere Projekte verwalten möchten
MAMP	Ähnlich wie XAMPP. Ermöglicht flexible PHP-Versionen und individuelle Servereinstellungen.	Mac-Nutzer mit Bedarf an mehr Konfigurationsmöglichkeiten

Installieren Sie am besten eine frische WordPress-Instanz. So starten Sie ohne Altlasten durch Plugins oder bestehende Theme-Anpassungen. Mehr dazu lesen Sie hier:

WordPress installieren: Automatisch und manuell einfach erklärt

Theme-Grundstruktur anlegen

Sobald WordPress lokal läuft, navigieren Sie in das Installationsverzeichnis auf Ihrem Rechner. Öffnen Sie den Ordner „wp-content“ und darin den Unterordner „themes“. Legen Sie dort einen neuen Ordner an, zum Beispiel mit dem Namen mein-eigenes-theme.

Hinweis: Verwenden Sie ausschließlich Kleinbuchstaben und Bindestriche für Ihren Theme-Namen. Leerzeichen oder Sonderzeichen führen später zu Problemen.

Ein WordPress-Theme benötigt mindestens zwei Dateien, um vom System erkannt zu werden:

1.
Die style.css enthält den Theme-Header. Er signalisiert WordPress, dass es sich um ein eigenständiges Theme handelt.
2.
Die index.php dient als Fallback-Template. WordPress lädt sie immer dann, wenn keine speziellere Template-Datei vorhanden ist.

Ohne diese beiden Dateien ist das Theme im WordPress-Backend nicht aktivierbar.

Schritt 1: style.css erstellen

Erstellen Sie zunächst die Datei style.css in Ihrem Theme-Ordner mein-eigenes-theme. Öffnen Sie dazu einen Code-Editor Ihrer Wahl und fügen Sie folgenden Header ein:

/* Theme Name: Mein Eigenes Theme Author: Ihr Name Version: 1.0 Description: Ein selbst entwickeltes WordPress-Theme */

Dieser Kommentarblock ist keine Dekoration, sondern Pflicht. WordPress liest die Metadaten aus und zeigt sie im Backend unter „Design“ → „Themes“ an. Ohne den Block bleibt Ihr Theme unsichtbar.

Schritt 2: index.php erstellen

Erstellen und öffnen Sie die Datei index.php in Ihrem Theme-Ordner. Sie beginnen nicht wie bei der style.css mit einem Kommentar, sondern direkt mit einer grundlegenden HTML-Struktur:

<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php bloginfo('name'); ?></title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <h1>Mein erstes eigenes Theme</h1> <?php wp_footer(); ?> </body> </html>

Mehrere Dinge passieren hier nacheinander:

Die Funktion language_attributes() gibt im <html>‑Tag die passenden Sprach- und Richtungsattribute (z. B. lang und dir) auf Basis der WordPress‑Einstellungen aus.
bloginfo('charset') gibt den in WordPress als blog_charset konfigurierten Zeichensatz aus, z. B. UTF-8.
wp_head() ist essenziell, da WordPress und Plugins hier Skripte, Styles und Meta-Informationen einfügen. Ohne diesen Hook funktionieren viele Erweiterungen nicht.
Dasselbe gilt für wp_footer() kurz vor dem schließenden body-Tag.

Speichern Sie die Datei index.php und aktivieren Sie Ihr Theme im Backend:

Ihr Theme im WordPress-Backend.

Rufen Sie die Startseite auf. Wenn Sie eine Überschrift sehen und keine Fehlermeldung erhalten, haben Sie bei der Grundstruktur alles richtig gemacht.

Noch ziemlich leer: Ihr WordPress-Theme.

Sollte statt Ihres Themes nur eine weiße Seite erscheinen, liegt meist ein PHP-Syntaxfehler vor. Aktivieren Sie in der Datei wp-config.php im Stammverzeichnis Ihrer Installation den Debug-Modus mit der folgenden Zeile. So zeigt Ihnen WordPress mögliche Fehler direkt an:

define('WP_DEBUG', true);

Schritt 3: WordPress-Schleife integrieren

WordPress speichert Beiträge, Seiten und weitere Inhaltstypen in einer Datenbank. Der sogenannte Loop (Schleife) ruft diese Inhalte ab und gibt sie aus. Ersetzen Sie in Ihrer index.php den bisherigen statischen h1-Text („Mein erstes eigenes Theme“) durch die WordPress-Schleife:

<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php bloginfo('name'); ?></title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article> <h2><?php the_title(); ?></h2> <div> <?php the_content(); ?> </div> </article> <?php endwhile; ?> <?php else : ?> <p>Keine Inhalte gefunden.</p> <?php endif; ?> <?php wp_footer(); ?> </body> </html>

Die Schleife besteht aus mehreren Elementen:

have_posts() prüft, ob Beiträge vorhanden sind.
the_post() bereitet die aktuelle Datenbankzeile auf.
the_title() und the_content() geben Titel und Inhalt aus.

Die Schleife bildet das Herzstück jedes WordPress-Themes. Ohne Loop erscheinen keine Inhalte.

Laden Sie die Seite erneut. Wenn Beiträge in Ihrer WordPress-Installation vorhanden sind, erscheinen diese nun in einer minimalistischen HTML-Struktur:

Die Artikelschleife ist korrekt ausgeführt.

So schnell kann’s gehen: Sie haben jetzt technisch bereits ein funktionierendes WordPress-Theme erstellt. Es ist noch nicht modular aufgebaut, noch nicht strukturiert oder optisch gestaltet, aber es arbeitet bereits korrekt mit der WordPress-Architektur zusammen.

Schritt 4: header.php und footer.php erstellen

Nun folgt ein wichtiger Schritt zur Modularisierung Ihres Themes. Schneiden Sie aus der index.php den oberen Teil bis einschließlich des öffnenden <body>-Tags und speichern Sie ihn in einer neuen Datei namens header.php:

Zudem verschieben Sie den unteren Teil mit wp_footer() aus der index.php in eine neue Datei namens footer.php:

<?php wp_footer(); ?> </body> </html>

Ihre index.php enthält jetzt nur noch:

<?php get_header(); ?> <main> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class(); ?>> <h2><?php the_title(); ?></h2> <div><?php the_content(); ?></div> </article> <?php endwhile; ?> <?php else : ?> <p>Keine Inhalte gefunden.</p> <?php endif; ?> </main> <?php get_footer(); ?>

get_header() und get_footer() binden die Dateien ein. Das schafft wiederverwendbare Layout-Elemente. Alle weiteren Templates bauen später darauf auf.

Schritt 5: Stylesheet aufbauen

Fügen Sie der Datei style.css nun ein paar erste Stylesheet-Angaben hinzu, als Basis für das spätere Design:

/* Theme Name: Mein Eigenes Theme Author: Ihr Name Version: 1.0 Description: Ein selbst entwickeltes WordPress-Theme */ body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; background-color: #f5f5f5; color: #222; } main { max-width: 900px; margin: 2rem auto; padding: 1rem; background: #ffffff; } article { margin-bottom: 2rem; } h1, h2 { font-weight: 600; }

body entfernt den Standard‑Seitenrand des Browsers, setzt die Schrift auf Arial, erhöht die Zeilenhöhe für bessere Lesbarkeit, legt einen hellgrauen Seitenhintergrund (#f5f5f5) und eine dunkle Textfarbe (#222) fest.
main begrenzt die Inhaltsbreite auf 900px, zentriert den Inhalt durch margin: 2rem auto, fügt innen etwas Abstand (padding: 1rem) hinzu und setzt einen weißen Hintergrund, sodass der Content sich klar vom grauen Seitenhintergrund abhebt.
article fügt zwischen einzelnen Artikeln Abstand nach unten (margin-bottom: 2rem) ein, damit sie optisch getrennt sind.
h1, h2 setzen die Überschriften auf eine etwas stärkere, aber nicht maximale Schriftstärke (font-weight: 600), was Überschriften hervorhebt, ohne sie zu fett wirken zu lassen.

Ein weiterer Schritt ist geschafft: Ihr Theme besitzt nun mit header.php und footer.php erste ausgelagerte Dateien, eine funktionierende WordPress-Schleife sowie erste CSS-Angaben. Jetzt strukturieren Sie diese Basis und bauen das Theme schrittweise aus.

HTML-Struktur organisieren

Ziel ist es nun, die HTML-Struktur sauber zu organisieren, Inhalte korrekt einzubinden und Ihr Theme technisch so aufzubauen, dass Sie es später problemlos erweitern können.

Schritt 1: header.php strukturieren

Zunächst verfeinern Sie die grundlegende HTML-Struktur des Headers. Öffnen Sie dazu die header.php und ergänzen Sie eine semantische Struktur mit header-Element, Navigationsbereich und Container-Struktur:

Hier passiert bereits mehr, als es auf den ersten Blick scheint:

home_url() erzeugt die korrekte URL zur Startseite.
bloginfo('name') und bloginfo('description') greifen auf die Einstellungen unter „Einstellungen“ → „Allgemein“ zu.

Damit wird Ihr Theme dynamisch statt statisch kodiert.

Schritt 2: footer.php strukturieren

Nun strukturieren Sie die footer.php:

Achten Sie darauf, dass wp_footer() unmittelbar vor </body> steht. Entfernen oder verschieben Sie diese Funktion nicht, da viele Plugins genau dort ihre Skripte laden.

Schritt 3: index.php ausbauen

Widmen Sie sich wieder der index.php des Themes und bauen die Hauptstruktur aus:

<?php get_header(); ?> <main class="site-main"> <div class="container"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class(); ?>> <h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </h2> <div class="entry-content"> <?php the_excerpt(); ?> </div> </article> <?php endwhile; ?> <?php else : ?> <p>Keine Beiträge vorhanden.</p> <?php endif; ?> </div> </main> <?php get_footer(); ?>

Was hat sich geändert?

Sie ersetzen the_content() durch the_excerpt(), denn auf Archiv- oder Blogseiten ist ein Auszug oft sinnvoller als der komplette Beitrag.
post_class() fügt automatisch CSS‑Klassen hinzu, etwa post, post-123, category-news oder type-post, was späteres Styling erleichtert.

Testen Sie Ihre Seite jetzt im Browser. Wenn Sie mehrere Beiträge angelegt haben, sehen Sie nun eine Liste mit Titel und Auszug. Jeder Titel verlinkt auf den Einzelbeitrag.

Klickbare Einzelbeiträge in Ihrem Theme.

Schritt 4: style.css erweitern

Nun kümmern Sie sich wieder um das Styling. Öffnen Sie die style.css und erweitern Sie die Basis:

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .site-header { background: #222; color: #fff; padding: 2rem 0; } .site-title a { color: #fff; text-decoration: none; } .site-description { font-size: 0.9rem; opacity: 0.8; } .site-main { padding: 3rem 0; } article { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #ddd; } article h2 a { color: #222; text-decoration: none; } .site-footer { background: #f0f0f0; padding: 2rem 0; text-align: center; font-size: 0.9rem; }

Speichern Sie alles und aktualisieren Sie die Seite. Sie erkennen nun deutlich, wie Struktur und Design bei Ihrem Theme zusammenspielen.

Das Design Ihres Themes nimmt Formen an.

Schritt 5: functions.php erstellen

Es folgt ein wichtiger Schritt bei der Theme-Erstellung: das korrekte Einbinden der Styles über eine neue Datei namens functions.php.

Erstellen Sie eine Datei functions.php in Ihrem Theme-Ordner. Fügen Sie folgenden Code ein:

<?php function mein_theme_assets() { wp_enqueue_style( 'mein-theme-style', get_stylesheet_uri(), array(), '1.0', 'all' ); } add_action('wp_enqueue_scripts', 'mein_theme_assets');

Viel macht die functions.php in diesem Zustand noch nicht:

wp_enqueue_style sorgt dafür, dass WordPress das Stylesheet korrekt registriert und lädt.

Schritt 6: single.php erstellen

Im nächsten Schritt strukturieren Sie Inhalte für einzelne Beiträge. Dafür erstellen Sie eine neue Datei namens single.php. Kopieren Sie dazu die bestehende Struktur aus der index.php, ersetzen Sie jedoch the_excerpt() durch the_content(), da ein einzelner Beitrag in der Einzelbeitragsansicht auch vollständig angezeigt werden soll:

<?php get_header(); ?> <main class="site-main"> <div class="container"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <div class="entry-content"> <?php the_content(); ?> </div> </article> <?php endwhile; ?> <?php endif; ?> </div> </main> <?php get_footer(); ?>

Aufgrund der Template-Hierarchie erkennt WordPress automatisch, dass die Datei single.php existiert, und verwendet sie für einzelne Beiträge:

Jetzt gibt es auch eine eigene Einzelbeitragsansicht.

An diesem Punkt haben Sie bereits:

eine funktionierende Theme-Grundstruktur
modularisierte Header- und Footer-Dateien
eine Schleife (Loop) für die Listenansicht
eine separate Template-Datei für Einzelbeiträge (single.php)
sauberes CSS-Laden über functions.php

Im nächsten Abschnitt erweitern Sie das Theme um gängige WordPress-Funktionen wie Menü-Registrierung, Sidebar-Unterstützung und Theme-Support. Ihre functions.php steht dabei im Mittelpunkt.

WordPress-Funktionen einbinden

Die functions.php eines Themes ist so etwas wie die technische Steuerzentrale Ihres Themes. WordPress lädt sie automatisch, sobald das Theme aktiv ist. Sie hängen dort Funktionen in WordPress-Hooks ein, registrieren Features, Menüs und Sidebars.

Schritt 1: Theme-Support aktivieren

WordPress bietet viele Funktionen, die Themes aktiv einschalten müssen. Ohne Theme-Support fehlen Ihnen später Dinge wie Beitragsbilder, dynamische Titel oder bestimmte HTML-Ausgaben.

Schreiben Sie deshalb eine Setup-Funktion in der Datei functions.php, damit WordPress diese Einstellungen früh genug lädt:

function mein_theme_setup() { add_theme_support('title-tag'); add_theme_support('post-thumbnails'); add_theme_support('html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script' )); } add_action('after_setup_theme', 'mein_theme_setup');

Mit title-tag übernimmt WordPress die Steuerung des <title>-Tags. Das ist wichtig, weil Sie dann nicht in header.php manuell einen statischen Titel pflegen müssen und SEO-Plugins ebenfalls sauber eingreifen können.
post-thumbnails aktiviert Beitragsbilder, die Sie später mit the_post_thumbnail() ausgeben.
Das HTML5-Array sorgt dafür, dass WordPress bestimmte Ausgaben in modernerem HTML rendert. Das erleichtert später die einheitliche Gestaltung von Formularen, Kommentaren oder Galerien.

Schritt 2: Menü registrieren

Als Nächstes kümmern Sie sich um Menüs. Sie haben zwar in der header.php bereits einen Platz für Navigation, doch WordPress braucht eine registrierte Menüposition:

function mein_theme_menus() { register_nav_menus(array( 'hauptmenue' => 'Hauptmenü' )); } add_action('after_setup_theme', 'mein_theme_menus');

Nun passen Sie header.php so an, dass das Menü tatsächlich dort ausgegeben wird.

Nutzen Sie dabei wp_nav_menu() nicht ohne Fallback. In der Praxis existiert zu Beginn oft noch kein Menü. Wenn Sie dann eine leere Navigation ausgeben, wirkt das Theme kaputt.

Bauen Sie deshalb eine Navigation ein, die auch ohne Menüzuweisung sinnvoll bleibt:

<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header class="site-header"> <div class="container"> <h1 class="site-title"> <a href="<?php echo esc_url(home_url('/')); ?>"> <?php bloginfo('name'); ?> </a> </h1> <p class="site-description"><?php bloginfo('description'); ?></p> <nav class="site-nav" aria-label="Hauptnavigation"> <?php if (has_nav_menu('hauptmenue')) { wp_nav_menu(array( 'theme_location' => 'hauptmenue', 'container' => false, 'menu_class' => 'menu' )); } else { echo '<ul class="menu"><li><a href="' . esc_url(home_url('/')) . '">Startseite</a></li></ul>'; } ?> </nav> </div> </header>

Hier passieren gleich mehrere Dinge:

has_nav_menu() prüft, ob im Backend ein Menü zugewiesen wurde.
esc_url() sorgt dafür, dass URLs sicher ausgegeben werden.
Sie geben außerdem eine aria-label-Beschreibung mit, damit Screenreader die Navigation korrekt erkennen.

Schritt 3: Menü im Backend erstellen

Jetzt erstellen Sie im WordPress-Backend ein Menü. Gehen Sie zu „Design“ → „Menüs“, legen Sie ein Menü an und fügen Sie ein paar Seiten oder Kategorien hinzu. Speichern Sie es und weisen Sie es der Position Hauptmenü zu.

Laden Sie danach Ihre Website neu. Wenn das Menü erscheint, ist die Registrierung korrekt.

Ein Menü im WP-Backend erstellen.

Schritt 4: Widget-Bereich registrieren

Nun ergänzen Sie eine Sidebar. Auch wenn viele moderne Layouts ohne klassische Sidebars arbeiten, lernen Sie hier ein zentrales Prinzip von WordPress kennen: Widget-Bereiche.

Ein Widget-Bereich ist ein definierter Platz im Theme, an den Nutzer im Backend Widgets anheften können. Das kann eine Sidebar sein, ein Footer-Bereich oder auch ein spezieller Bereich auf der Startseite.

Registrieren Sie zuerst einen Widget-Bereich in der functions.php:

function mein_theme_widgets() { register_sidebar(array( 'name' => 'Sidebar', 'id' => 'sidebar-1', 'description' => 'Widget-Bereich in der Seitenleiste.', 'before_widget' => '<section class="widget">', 'after_widget' => '</section>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' )); } add_action('widgets_init', 'mein_theme_widgets');

Damit existiert die Sidebar im Backend, aber sie erscheint noch nicht im Frontend. Sie müssen sie in einer Template-Datei ausgeben. Statt die Sidebar direkt in der index.php zu hardcoden, legen Sie eine eigene Datei an. Das ist eine gute Gewohnheit, weil Sie Sidebars dann überall einbinden können, ohne Code zu duplizieren.

Schritt 5: sidebar.php erstellen

Erstellen Sie in Ihrem Theme-Ordner eine sidebar.php:

<?php if (is_active_sidebar('sidebar-1')) : ?> <aside class="sidebar"> <?php dynamic_sidebar('sidebar-1'); ?> </aside> <?php endif; ?>

is_active_sidebar() prüft, ob tatsächlich Widgets zugewiesen wurden. So vermeiden Sie leere Boxen.
dynamic_sidebar() rendert die Widgets inklusive der HTML-Struktur, die Sie bei register_sidebar definiert haben.

Schritt 6: Sidebar in index.php einbinden

Jetzt binden Sie die Sidebar in die index.php ein. Dazu müssen Sie Ihr Layout ein wenig erweitern, sonst steht die Sidebar einfach unter dem Content. Sie bauen eine Layout-Struktur mit Content-Bereich und Sidebar-Bereich.

Passen Sie die index.php so an, dass der Hauptbereich in einer Wrapper-Struktur liegt:

<?php get_header(); ?> <main class="site-main"> <div class="container layout"> <div class="content"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class(); ?>> <h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </h2> <div class="entry-content"> <?php the_excerpt(); ?> </div> </article> <?php endwhile; ?> <?php else : ?> <p>Keine Beiträge vorhanden.</p> <?php endif; ?> </div> <?php get_sidebar(); ?> </div> </main> <?php get_footer(); ?>

get_sidebar() lädt automatisch die Datei sidebar.php. Sie müssen also keine Dateinamen angeben, solange Sie die Standarddatei verwenden.

Schritt 7: Layout in style.css definieren

Nun braucht Ihr CSS in der style.css noch eine Layout-Regel, damit Content und Sidebar auch tatsächlich nebeneinander stehen:

.layout { display: flex; gap: 2rem; align-items: flex-start; } .content { flex: 1 1 0; min-width: 0; } .sidebar { width: 300px; } .widget { margin-bottom: 1.5rem; padding: 1rem; background: #f7f7f7; border: 1px solid #e2e2e2; } .widget-title { margin-top: 0; font-size: 1.1rem; } .site-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; } .site-nav .menu li { margin-right: 1.5rem; } .site-nav .menu a { color: #fff; text-decoration: none; }

Schritt 8: Widgets hinzufügen

Wechseln Sie im Backend zu „Design“ → „Customizer“ → „Widgets“. Fügen Sie in die Sidebar ein paar Widgets ein, etwa eine Suche und zuletzt veröffentlichte Beiträge:

Widgets in der Sidebar Ihres Themes.

Sie haben es fast geschafft: Im nächsten Schritt erweitern Sie noch die Template-Dateien. So erhalten Beiträge, Seiten, Archive und Fehlerseiten jeweils ein passendes Layout.

Weitere Template-Dateien erstellen

Bisher nutzt Ihr Theme nur die index.php für die Listenansicht von Beiträgen und die single.php für einzelne Beiträge. Das reicht langfristig nicht aus. Sobald Sie zusätzliche Dateien wie page.php oder archive.php anlegen, verwendet WordPress diese selbstständig an passender Stelle.

Das ist ein großer Vorteil der Template-Hierarchie. Sie müssen keine komplizierten Bedingungen in Ihre Dateien schreiben. Stattdessen erstellen Sie einfach die passende Datei und WordPress übernimmt die Auswahl.

Schritt 1: page.php erstellen

Als Erstes legen Sie die page.php an, damit Seiten ein eigenes Layout bekommen. Das ist wichtig, weil Seiten häufig anders aussehen sollen als Beiträge.

Kopieren Sie dafür die Grundstruktur aus single.php, lassen aber alles weg, was typisch für Beiträge ist. Der Kern bleibt: Header laden, Loop, Content ausgeben, Footer laden.

<?php get_header(); ?> <main class="site-main"> <div class="container layout"> <div class="content"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <div class="entry-content"> <?php the_content(); ?> </div> </article> <?php endwhile; ?> <?php else : ?> <p>Keine Seite gefunden.</p> <?php endif; ?> </div> <?php get_sidebar(); ?> </div> </main> <?php get_footer(); ?>

Seiten erhalten so ein eigenes Layout:

Seitenlayout mit Sidebar.

Schritt 2: archive.php erstellen

Als Nächstes erstellen Sie die archive.php. Ein Archiv ist in WordPress nicht nur ein Monatsarchiv, sondern auch Kategorien, Tags und Autorenseiten. Sie nutzen wieder den Loop, geben aber zusätzlich eine Archiv-Überschrift aus:

<?php get_header(); ?> <main class="site-main"> <div class="container layout"> <div class="content"> <header class="archive-header"> <h1><?php the_archive_title(); ?></h1> <div class="archive-description"> <?php the_archive_description(); ?> </div> </header> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class(); ?>> <h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </h2> <div class="entry-content"> <?php the_excerpt(); ?> </div> </article> <?php endwhile; ?> <?php else : ?> <p>Keine Beiträge in diesem Archiv.</p> <?php endif; ?> </div> <?php get_sidebar(); ?> </div> </main> <?php get_footer(); ?>

Damit wirken Kategorien und Tag-Seiten nicht mehr wie eine normale Startseite, sondern wie echte Übersichtsseiten mit Kontext:

Kategorienansicht mit Sidebar.

Schritt 3: search.php erstellen

Danach folgt die search.php. WordPress lädt diese Datei, sobald jemand eine Suche ausführt. Die Suchergebnisseite sollte immer zeigen, wonach gesucht wurde, und passende Ergebnisse liefern:

<?php get_header(); ?> <main class="site-main"> <div class="container layout"> <div class="content"> <header class="search-header"> <h1>Suchergebnisse für: <?php echo esc_html(get_search_query()); ?></h1> </header> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class(); ?>> <h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </h2> <div class="entry-content"> <?php the_excerpt(); ?> </div> </article> <?php endwhile; ?> <?php else : ?> <p>Keine Treffer gefunden. Versuchen Sie einen anderen Suchbegriff.</p> <?php endif; ?> </div> <?php get_sidebar(); ?> </div> </main> <?php get_footer(); ?>

So sehen die Suchergebnisse dann aus:

Suchergebnisansicht mit Sidebar.

Schritt 4: 404.php erstellen

Nun erstellen Sie noch die 404.php. Diese Datei greift, wenn WordPress keinen passenden Inhalt findet. Eine gute 404-Seite bietet einen klaren Hinweis darauf und am besten einen direkten Weg zurück, etwa über Suche oder einen Link zur Startseite:

<?php get_header(); ?> <main class="site-main"> <div class="container"> <h1>Seite nicht gefunden</h1> <p>Unter dieser Adresse existiert kein Inhalt. Nutzen Sie die Suche oder gehen Sie zurück zur Startseite.</p> <?php get_search_form(); ?> <p><a href="<?php echo esc_url(home_url('/')); ?>">Zur Startseite</a></p> </div> </main> <?php get_footer(); ?>

So sieht Ihre 404-Seite aus:

Die Fehlerseite mit Suchfeld und Startseitenlink.

Herzlichen Glückwunsch! Ihr erstes eigenes WordPress-Theme steht und deckt die wichtigsten Standardfälle ab: Startseite, Einzelbeiträge, Seiten, Archive, Suche und 404-Seite.

Sie haben jetzt ein Grundgerüst vor sich, das technisch sauber funktioniert und sich bei Bedarf noch erweitern lässt. Als Nächstes geht es darum, das Theme weiter zu professionalisieren.

Nächste Schritte

An diesem Punkt funktioniert Ihr Theme zwar, aber für den produktiven Einsatz reicht das noch nicht ganz. Jetzt beginnt der Teil, der aus einem funktionierenden Theme ein professionelles Theme macht.

Mobile Optimierung

Ein WordPress-Theme muss auf Smartphones genauso zuverlässig funktionieren wie auf großen Monitoren. Prüfen Sie Ihr Layout daher nicht nur im Desktop-Browser, sondern aktiv in der Geräteansicht der Entwickler-Tools.

Reduzieren Sie Abstände, passen Sie Schriftgrößen an und sorgen Sie dafür, dass mehrspaltige Layouts unter einer bestimmten Breite automatisch einspaltig werden.

Technisch reicht dafür oft eine Media-Query-Struktur im CSS. Nehmen Sie als Ausgangspunkt:

@media (max-width: 768px) { .layout { flex-direction: column; } .sidebar { width: 100%; } }

Performance ist eng mit Struktur verbunden. Verzichten Sie auf unnötige Bibliotheken, halten Sie Ihr CSS möglichst kompakt und bedenken Sie, dass jede zusätzliche Datei die Ladezeit beeinflusst.

Gerade bei selbst entwickelten Themes haben Sie hier einen Vorteil: Sie kontrollieren jede einzelne Zeile.

Unterstützung für Gutenberg-Blöcke

Der Block-Editor ist Standard in WordPress. Aktivieren Sie Editor-Styles, damit Schriftarten, Abstände und Farben im Backend möglichst nahe am Frontend liegen.

In der functions.php genügt dafür oft:

add_theme_support('editor-styles'); add_editor_style('assets/css/main.css');

Damit wird Ihre bestehende CSS-Datei auch im Editor genutzt. Redakteure sehen dadurch bereits beim Schreiben, wie Inhalte später aussehen.

Theme-Optionen und Customizer

Ein professionelles Theme bietet seinen Nutzern viele Stellschrauben. Zu Beginn genügen aber auch wenige Einstellungen: ein Logo, eine Akzentfarbe, vielleicht ein Footer-Text oder Social-Links:

Live-Vorschau im Customizer.

Der Customizer ermöglicht eine Live-Vorschau, ohne dass Nutzer Code anfassen müssen. Gleichzeitig behalten Sie die Kontrolle, weil Sie definieren, welche Optionen überhaupt existieren.

Veröffentlichung und Qualitätsanspruch

Auch wenn Sie das Theme nicht veröffentlichen möchten, lohnt sich ein Blick auf die Richtlinien des WordPress-Theme-Repositorys. Dort wird deutlich, worauf es langfristig ankommt:

saubere Nutzung von WordPress-APIs
keine fest eingebauten Fremd-Skripte
klare Trennung von Darstellung und Funktion
sichere Ausgabe von Daten mit esc_html(), esc_url() und ähnlichen Funktionen

Dieser Qualitätsmaßstab hilft Ihnen auch bei internen Projekten. Ein Theme, das nach diesen Prinzipien aufgebaut ist, bleibt wartbar, updatefähig und stabil.

Fazit: Ein eigenes Theme bietet mehr Kontrolle

Ein eigenes WordPress-Theme zu entwickeln lohnt sich vor allem deshalb, weil Sie damit die Struktur und Funktionsweise Ihrer Website selbst bestimmen können. Statt sich an die Vorgaben fertiger Themes anzupassen, entscheiden Sie selbst, wie Ihr Projekt aufgebaut ist.

Genau dieses Verständnis der WordPress-Mechanik macht langfristig den Unterschied. Wer einmal ein Theme von Grund auf aufgebaut hat, arbeitet auch bei zukünftigen Projekten sicherer und strukturierter. Das erste eigene Theme ist daher nicht als Endprodukt, sondern als Ausgangspunkt zu verstehen.

Top WordPress Hosting 2026

Gesponsert

ab 2,99 €

pro Monat

Hostinger

1,7

Testergebnis

gut

ab 10,42 €

pro Monat

one.com

ab 25,14 €

pro Monat

Kinsta

1,6

Testergebnis

gut

ab 0,00 €

pro Monat

WordPress.com

1,8

Testergebnis

gut

alle anzeigen

Autor: Simon Stich

Simon Stich arbeitet als IT-Journalist und Webentwickler mit Schwerpunkt WordPress. Sein eigenes Unternehmen hat er 2009 gegründet. Nach mehreren Stationen im In- und Ausland lebt er heute in Freiburg im Breisgau.