Eine fertige HTML-Website muss nicht entsorgt werden, wenn Sie zu WordPress wechseln. Sie können Ihr Markup, index.html und style.css, nehmen und daraus in etwa einer Stunde ein voll funktionsfähiges Theme erstellen. Das ist keine Zauberei: WordPress basiert auf PHP-Templates, die wiederum aus gewöhnlichem HTML zusammengesetzt sind, aufgeteilt in logische Teile.

Das Problem ist, dass die meisten Tutorials Sie entweder ab den ersten Absätzen mit Fachbegriffen überhäufen oder stillschweigend voraussetzen, dass Sie bereits PHP beherrschen. Wir gehen einen anderen Weg: Wir beginnen mit einem konkreten HTML-Mockup (Header, Content, Sidebar, Footer) und bauen daraus methodisch, Datei für Datei, ein funktionierendes Theme. Keine Magie, nur Code und Logik.

Am Ende dieser Anleitung haben Sie ein fertiges Theme, das Sie im WordPress-Adminbereich hochladen, aktivieren und Ihre HTML-Struktur innerhalb einer dynamischen Plattform sehen können. Dies ist der erste Teil, das Fundament. Im zweiten Teil behandeln wir individuelle Seitenvorlagen, benutzerdefinierte Felder und den Customizer.

💡 Kurzüberblick:

• Geben Sie dem Theme einen eindeutigen Namen und füllen Sie den style.css-Header aus, WordPress erkennt Themes anhand dieser Metadaten.
• Zerlegen Sie die ursprüngliche index.html in vier PHP-Dateien: header.php, index.php, sidebar.php und footer.php.
• Implementieren Sie die standardmäßigen WordPress-Hooks (get_header, get_sidebar, get_footer, wp_head und wp_footer), damit die Plattform Ihr Markup „sieht" und aufgreift.
• Fügen Sie den WordPress-Loop in die index.php ein, das Code-Snippet, das Blogbeiträge innerhalb Ihres HTML-Gerüsts ausgibt.
• Erstellen Sie ein ZIP-Archiv, laden Sie das Theme im Adminbereich hoch und aktivieren Sie es, Ihre Website erwacht in WordPress zum Leben.

1. Benennung des Themes und die style.css-Datei

Als Erstes müssen Sie Ihrem Theme einen eindeutigen Namen geben. Selbst wenn Sie das Theme ausschließlich für Ihre eigene Website erstellen, muss WordPress es im Bereich „Design → Themes" irgendwie identifizieren können.

Ausgangssituation:

• Sie haben eine index.html und eine Stylesheet-Datei style.css (oder eine beliebige andere CSS-Datei).
• Sie haben eine funktionierende WordPress-Installation mit mindestens einem Standard-Theme, zum Beispiel Twenty Twenty-Five.
• Sie haben bereits einen Ordner für Ihr zukünftiges Theme innerhalb von /wp-content/themes/ angelegt.

Öffnen Sie Ihren Code-Editor (wir empfehlen Sublime Text oder VS Code), kopieren Sie den Inhalt Ihres Stylesheets in eine neue Datei und speichern Sie diese als style.css im Theme-Ordner. Ganz oben in der Datei, vor dem gesamten CSS-Code, fügen Sie den Metadaten-Block ein:

1
/*
2
Theme Name: My HTML-to-WordPress Theme
3
Theme URI: https://example.com
4
Description: Theme assembled from a static HTML layout.
5
Version: 1.0
6
Author: Your Name
7
Author URI: https://example.com
8
Tags: custom-theme, html-to-wordpress, beginner
9
*/

Entfernen Sie die Kommentarzeichen /* und */ nicht, WordPress liest genau diese aus. Das Feld Theme Name ist hier entscheidend: Unter diesem Namen erscheint das Theme im Adminbereich. Die anderen Felder sind optional, wir empfehlen jedoch, sie alle auszufüllen, das ist gute Praxis.

Speichern Sie die Datei. In diesem Stadium kann WordPress Ihr Theme bereits erkennen, auch wenn es noch leer ist und nichts Nützliches tut.

2. Aufteilung von HTML in PHP-Templates

Ein klassisches WordPress-Theme setzt sich aus mehreren PHP-Dateien zusammen, von denen jede für ihren eigenen Seitenabschnitt verantwortlich ist. Das gängigste Layout ist Header, Content, Sidebar, Footer. Falls Ihr HTML anders strukturiert ist (zum Beispiel Sidebar links oder zwei Sidebars), bleibt das Prinzip dasselbe, passen Sie die Aufteilung einfach an Ihre Struktur an.

Erstellen Sie vier leere Dateien im Theme-Ordner:

• header.php, Website-Header
• index.php, Haupt-Template, Montagepunkt
• sidebar.php, Sidebar-Bereich
• footer.php, Footer

Sie sind vorerst leer, erwarten Sie keine Wunder. Gehen wir der Reihe nach vor.

2.1 Header.php, Website-Header

Gehen Sie in den WordPress-Adminbereich, öffnen Sie „Design → Theme-Editor" und wählen Sie das Standard-Theme (zum Beispiel Twenty Twenty-Five). Suchen Sie dessen header.php und kopieren Sie den gesamten <head>-Block, das ist der Mindestsatz an Meta-Tags und Hooks, ohne den WordPress nicht korrekt funktioniert. Folgendes müssen Sie in Ihre header.php übertragen:

1
<head>
2
    <meta charset="<?php bloginfo( 'charset' ); ?>">
3
    <meta name="viewport" content="width=device-width">
4
    <title>&lt;?php wp_title( '|', true, 'right' ); ?&gt;</title>
5
    <link rel="profile" href="https://gmpg.org/xfn/11">
6
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
7
    <?php wp_head(); ?>
8
</head>

Die Funktion bloginfo() setzt dynamisch Website-Einstellungen ein (Zeichenkodierung, Pingback-URL). Der Hook wp_head() ist kritisch: Plugins und der WordPress-Core fügen darüber ihre Skripte, Styles und Meta-Tags ein. Ohne ihn ist das Theme halb tot.

Öffnen Sie nun Ihre ursprüngliche index.html und kopieren Sie den Header-Code, alles innerhalb von <header> oder einem ähnlichen Block, und fügen Sie ihn in die header.php ein, **direkt nach dem schließenden </head>-Tag und dem öffnenden **<body>. In unserem Demo-Markup sieht das so aus:

1
<body>
2
    <header class="header">
3
        <p>This is header section. Put your logo and other details here.</p>
4
    </header>
5

Fügen Sie die Einbindung Ihres Stylesheets zwischen den <head>-Tags hinzu:

1
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style.css" />

Die Funktion get_template_directory_uri() gibt die URL Ihres Theme-Ordners zurück, der Pfad zur CSS-Datei funktioniert auf jedem Server ohne Hardcoding. Speichern Sie header.php.

2.2 Index.php, Montagepunkt

index.php ist in WordPress eine Pflichtdatei. Sie speichert kein Markup als solches, sondern setzt die Seite aus Teilen zusammen. Öffnen Sie Ihre leere index.php und fügen Sie drei Zeilen hinzu:

1
<?php get_header(); ?>
2
 
3
<?php get_sidebar(); ?>
4
<?php get_footer(); ?>

Die erste Zeile bindet header.php ein. Die letzten beiden, sidebar.php und footer.php, kommen ganz ans Ende. Der Hauptinhalt (Content-Bereich und Loop, mehr dazu im nächsten Abschnitt) wird dazwischen platziert.

Kopieren Sie den Block mit der Klasse .content (Hauptinhaltsbereich) aus Ihrer ursprünglichen index.html und fügen Sie ihn zwischen get_header() und get_sidebar() ein:

1
<?php get_header(); ?>
2
 
3
    <div class="content">
4
        <p>This is the main content area.</p>
5
    </div><!-- .content -->
6
 
7
<?php get_sidebar(); ?>
8
<?php get_footer(); ?>
9

Das Schema ist einfach: WordPress setzt die Seite sequenziell von oben nach unten zusammen, Header, Content, Sidebar, Footer. Jedes get_*() zieht die entsprechende PHP-Datei heran.

2.3 Sidebar.php und footer.php

Sidebar und Footer sind sehr unkompliziert. Kopieren Sie den Inhalt der .sidebar- und .footer-Blöcke aus Ihrer index.html in die entsprechenden PHP-Dateien.

sidebar.php:

1
<aside class="sidebar">
2
    <p>This is the side bar</p>
3
</aside>
4
 
5
<?php dynamic_sidebar( 'sidebar' ); ?>
6

Die Funktion dynamic_sidebar() gibt Widgets aus, die im Adminbereich („Design → Widgets") zugewiesen wurden. Wenn die Sidebar nicht benötigt wird, löschen Sie diese Zeile.

footer.php:

1
<footer class="footer">
2
    <p>And this is the footer.</p>
3
</footer>
4
 
5
<?php wp_footer(); ?>
6
</body>
7
</html>
8

Beachten Sie: </body> und </html> werden in die footer.php verschoben. In Ihrem ursprünglichen HTML stehen sie wahrscheinlich ebenfalls ganz am Ende, und so soll es auch sein. Der Hook wp_footer() ist genauso obligatorisch wie wp_head(): Ohne ihn funktionieren viele Plugins und WordPress selbst nicht (zum Beispiel erscheint die Admin-Leiste nicht).

3. Der WordPress-Loop: Ausgabe von Beiträgen

Das Theme ist zusammengesetzt, das Gerüst funktioniert. Aber der Inhaltsbereich ist noch statisch, mit fest im ursprünglichen HTML hinterlegtem Text. Damit WordPress beginnt, echte Blogbeiträge auszugeben, benötigen Sie The Loop, ein spezielles PHP-Konstrukt, das veröffentlichte Beiträge durchläuft und sie einzeln innerhalb Ihres Markups anzeigt.

Dies ist das wichtigste Code-Stück im Theme. Es kommt in die index.php, innerhalb des <div class="content">-Blocks, und ersetzt den statischen Platzhaltertext:

1
<?php if ( have_posts() ) : ?>
2
    <?php while ( have_posts() ) : the_post(); ?>
3
        <article <?php post_class(); ?>>
4
            <header class="post-header">
5
                <time datetime="<?php echo get_the_date( 'c' ); ?>">
6
                    <?php echo get_the_date(); ?>
7
                </time>
8
                <h2>
9
                    <a href="<?php the_permalink(); ?>" rel="bookmark">
10
                        <?php the_title(); ?>
11
                    </a>
12
                </h2>
13
                <span class="post-author"><?php the_author(); ?></span>
14
            </header>
15
 
16
            <div class="entry">
17
                <?php if ( has_post_thumbnail() ) : ?>
18
                    <?php the_post_thumbnail( 'medium' ); ?>
19
                <?php endif; ?>
20
                <?php the_content(); ?>
21
                <?php edit_post_link( 'Edit', '<span class="edit-link">', '</span>' ); ?>
22
                <?php wp_link_pages(); ?>
23
            </div>
24
 
25
            <footer class="post-footer">
26
                <?php comments_popup_link(
27
                    'Leave a comment',
28
                    '1 comment',
29
                    '% comments'
30
                ); ?>
31
            </footer>
32
        </article>
33
    <?php endwhile; ?>
34
 
35
    <nav class="navigation">
36
        <div class="prev-posts"><?php next_posts_link( '← Previous posts' ); ?></div>
37
        <div class="next-posts"><?php previous_posts_link( 'Newer posts →' ); ?></div>
38
    </nav>
39
<?php else : ?>
40
    <p>No posts found.</p>
41
<?php endif; ?>
42

So funktioniert es:

• have_posts() prüft, ob Beiträge zur Anzeige vorhanden sind. Wenn ja, wird der Loop betreten.
• the_post() bereitet die Daten für den nächsten Beitrag vor.
• post_class() fügt standardmäßige CSS-Klassen zu <article> hinzu, nützlich für das Styling verschiedener Beitragstypen.
• the_permalink() und the_title() geben die URL und den Titel des Beitrags aus.
• the_content() ist der eigentliche Beitragstext.
• the_post_thumbnail() ist das Beitragsbild, falls eines gesetzt ist.
• comments_popup_link() ist der Link zu den Kommentaren.
• next_posts_link() und previous_posts_link() übernehmen die Paginierung.

Der else-Block greift, wenn überhaupt keine Beiträge vorhanden sind, und zeigt eine Platzhalternachricht an.

Nach dem Einfügen des Loops sieht Ihre vollständige index.php so aus:

1
<?php get_header(); ?>
2
 
3
    <div class="content">
4
        <?php if ( have_posts() ) : ?>
5
            <?php while ( have_posts() ) : the_post(); ?>
6
                <article <?php post_class(); ?>>
7
                    <header class="post-header">
8
                        <time datetime="<?php echo get_the_date( 'c' ); ?>">
9
                            <?php echo get_the_date(); ?>
10
                        </time>
11
                        <h2>
12
                            <a href="<?php the_permalink(); ?>" rel="bookmark">
13
                                <?php the_title(); ?>
14
                            </a>
15
                        </h2>
16
                        <span class="post-author"><?php the_author(); ?></span>
17
                    </header>
18
                    <div class="entry">
19
                        <?php if ( has_post_thumbnail() ) : ?>
20
                            <?php the_post_thumbnail( 'medium' ); ?>
21
                        <?php endif; ?>
22
                        <?php the_content(); ?>
23
                        <?php edit_post_link( 'Edit', '<span class="edit-link">', '</span>' ); ?>
24
                        <?php wp_link_pages(); ?>
25
                    </div>
26
                    <footer class="post-footer">
27
                        <?php comments_popup_link(
28
                            'Leave a comment',
29
                            '1 comment',
30
                            '% comments'
31
                        ); ?>
32
                    </footer>
33
                </article>
34
            <?php endwhile; ?>
35
            <nav class="navigation">
36
                <div class="prev-posts"><?php next_posts_link( '← Previous posts' ); ?></div>
37
                <div class="next-posts"><?php previous_posts_link( 'Newer posts →' ); ?></div>
38
            </nav>
39
        <?php else : ?>
40
            <p>No posts found.</p>
41
        <?php endif; ?>
42
    </div><!-- .content -->
43
 
44
<?php get_sidebar(); ?>
45
<?php get_footer(); ?>
46

4. Erstellung und Installation des Themes

Alle fünf Dateien (style.css, header.php, index.php, sidebar.php und footer.php) sollten sich in Ihrem Theme-Ordner befinden (nennen Sie ihn zum Beispiel my-html-theme). Packen Sie den Ordner in ein ZIP-Archiv.

Anschließend das übliche Vorgehen: WordPress-Admin → „Design" → „Themes" → „Neues Theme hinzufügen" → „Theme hochladen". Wählen Sie die ZIP-Datei aus, klicken Sie auf „Installieren", dann auf „Aktivieren". Besuchen Sie die Website, Ihr HTML-Mockup ist innerhalb von WordPress zum Leben erwacht, und Blogbeiträge werden im Inhaltsbereich angezeigt.

Damit ist der erste Teil abgeschlossen. Sie haben nun ein funktionierendes Theme-Gerüst: WordPress erkennt es, greift die Hooks auf und gibt dynamischen Inhalt über den Loop aus. Im nächsten Teil behandeln wir individuelle Seitenvorlagen (single.php, page.php), die Template-Hierarchie und die Einbindung von Skripten über functions.php.

⁉️🤔 Häufig gestellte Fragen

Muss ich PHP beherrschen, um ein Theme aus HTML zu erstellen?

Nein. Das Minimum, das Sie schreiben werden, sind einige Funktionsaufrufe wie get_header() und ein 15-zeiliger Loop. Alles andere ist das Kopieren von HTML-Code, den Sie bereits haben. PHP fungiert hier als „Klebstoff", nicht als Hauptsprache. Wenn Sie verstehen, wo <?php ?> geöffnet und geschlossen wird, reicht das für den Einstieg.

Was, wenn mein HTML-Mockup nicht nach dem Schema „Header-Content-Sidebar-Footer" aussieht?

Das Prinzip ändert sich nicht. WordPress setzt die Seite durch sequenzielles Aufrufen von PHP-Dateien zusammen, deren Reihenfolge in der index.php das Layout bestimmt. Wenn Ihre Sidebar links ist, rufen Sie einfach get_sidebar() vor dem Content-Block auf. Zwei Sidebars? Erstellen Sie sidebar-left.php und sidebar-right.php mit separaten Aufrufen. Das Schema ist flexibel.

Kann ich ein Theme ohne Sidebar erstellen?

Ja, und das vereinfacht die Aufgabe sogar. Entfernen Sie einfach den Aufruf <?php get_sidebar(); ?> aus der index.php und erstellen Sie die Datei sidebar.php nicht. Viele moderne Themes, einschließlich WordPress-Block-Themes, funktionieren völlig ohne Sidebar.

Ist es zwingend erforderlich, genau header.php, index.php, sidebar.php und footer.php zu verwenden?

index.php und style.css sind obligatorisch, ohne sie erkennt WordPress das Theme nicht. Die anderen Dateien sind optional. Aber header.php, sidebar.php und footer.php sind der De-facto-Standard für klassische Themes: Alle Entwickler verstehen sie, und die Funktionen get_header(), get_sidebar() und get_footer() sind dafür vorgesehen. Bleiben Sie für Ihr erstes Theme bei diesem Satz von vier Dateien.

Funktioniert dieser Ansatz mit Block-Themes (FSE)?

Nein, diese Anleitung gilt für klassische PHP-Themes, die weiterhin bestehen und unterstützt werden (WordPress hat sie nicht aufgegeben und hat dies auch nicht vor). Block-Themes (Full Site Editing) verwenden HTML-Templates und eine theme.json-Datei. Wenn Ihr Ziel darin besteht, vorhandenes HTML schnell in ein funktionierendes Theme zu verwandeln, ist der klassische Ansatz deutlich einfacher: weniger Abstraktionen, vertrautes „Header-Content-Sidebar-Footer"-Modell.

Wie geht es weiter: Ihr erster Schritt in der Theme-Entwicklung

Sie haben ein grundlegendes Theme-Gerüst aus HTML-Markup zusammengestellt, mit einem funktionierenden Loop, eingebundenen Hooks und dynamischem Inhalt. Das Theme lässt sich bereits im Adminbereich installieren und gibt Beiträge aus. Nun gibt es zwei Richtungen für die Weiterentwicklung:

• Wenn die Ausgabe von Beiträgen in Ihrem Markup ausreicht, befüllen Sie die Website mit Inhalten und verfeinern Sie das CSS entsprechend Ihrer Marke.

Fangen Sie klein an: Erstellen Sie das Theme gemäß dieser Anleitung, aktivieren Sie es und fügen Sie ein paar Testbeiträge hinzu. Sobald Sie Ihr HTML mit darin enthaltenen Live-Beiträgen sehen, wird alles Weitere leichter fallen.