WordPress-Theme erstellen: Anleitung in 6 Schritten mit Code

Sie können zwar jederzeit ein vorgefertigtes WordPress-Theme installieren, mit einem selbst erstellten Theme verleihen Sie Ihrer Website jedoch einen individuelleren Look.

Wenn Sie Ihr eigenes Theme mit gängigen Sprachen wie PHP, HTML und CSS programmieren, können Sie außerdem gezielt die Funktionen und Elemente integrieren, die Sie benötigen, und so die Leistung Ihrer Website verbessern.

Ein WordPress-Theme von Grund auf zu erstellen, muss nicht kompliziert sein. Für ein einfaches Theme mit einem einheitlichen Layout und statischen Elementen benötigen Sie beispielsweise nur zwei Dateien.

In dieser Anleitung erfahren Sie, wie Sie in sechs Schritten ein eigenes WordPress-Theme erstellen:

• Erstellen und speichern Sie die Template-Dateien. Legen Sie wichtige Dateien wie index.php, style.css, header.php und footer.php im WordPress-Theme-Verzeichnis an. Diese Dateien bestimmen das Layout und die Funktionen Ihres Themes und sollten sich im selben Ordner befinden.
• Richten Sie das erste CSS-Stylesheet ein. Ergänzen Sie style.css um die Metadaten des Themes und grundlegende CSS-Regeln, die dessen Erscheinungsbild festlegen. WordPress erkennt die Datei und zeigt die grundlegenden Gestaltungsinformationen im Admin-Bereich an.
• Machen Sie das WordPress-Theme funktionsfähig. Ergänzen Sie functions.php um wichtige Funktionen, beispielsweise die Unterstützung von Widgets und individuellen Navigationsmenüs. Binden Sie externe Ressourcen und Funktionen ein, damit das Theme innerhalb der WordPress-Umgebung ordnungsgemäß funktioniert.
• Erstellen Sie das Layout Ihres eigenen Themes. Passen Sie Template-Dateien wie header.php, footer.php und single.php an, um die Struktur Ihrer Website festzulegen. Verbinden Sie die einzelnen Bereiche mithilfe von Funktionen wie get_header() und get_footer(), um ein einheitliches Design zu schaffen.
• Optimieren Sie das Design mit CSS. Ergänzen Sie benutzerdefinierten CSS-Code, um Elemente wie das Logo, den Header und den Footer zu gestalten. Achten Sie darauf, dass das Design responsiv ist und sich an unterschiedliche Bildschirmgrößen anpasst.
• Testen Sie Ihr Theme und stellen Sie es bereit. Überprüfen Sie zunächst auf einer Staging-Website, ob das Theme korrekt dargestellt wird. Laden Sie anschließend den Theme-Ordner auf Ihre Live-Website hoch und aktivieren Sie das Theme im WordPress-Admin-Bereich.

Entwicklungsumgebung für WordPress-Themes einrichten

Wenn Sie ein eigenes Theme entwickeln, sollten Sie es nicht sofort auf Ihrer Live-Website einsetzen, da dabei Fehler auftreten können.

Richten Sie stattdessen eine WordPress-Staging-Umgebung mit dem integrierten Tool ein, das in Hostingers Managed Hosting für WordPress-Plan enthalten ist. Das geht schneller als die Einrichtung einer lokalen Entwicklungsumgebung, da Sie nicht mehrere Tools installieren müssen.

Öffnen Sie dazu das Hostinger-Dashboard und navigieren Sie zu Websites → Dashboard. Klicken Sie in der Seitenleiste auf WordPress → Staging.

Erstellen Sie anschließend eine WordPress-Staging-Umgebung, indem Sie zum Tab Staging wechseln und auf Staging erstellen klicken. Geben Sie die gewünschte Subdomain ein und klicken Sie auf Erstellen.

So erstellen Sie ein WordPress-Theme

Nachdem Sie die Staging-Umgebung eingerichtet haben, können Sie mit den folgenden Schritten ein WordPress-Theme von Grund auf mit PHP, HTML5 und CSS3 erstellen.

1. Erstellen und speichern Sie die Template-Dateien

Für ein eigenes WordPress-Theme benötigen Sie mindestens zwei Dateien. Die Datei index.php dient zur Anzeige der Inhalte, während style.css die visuelle Gestaltung … beispielsweise die Schriftarten – festlegt.

Die meisten WordPress-Themes enthalten jedoch zusätzliche Template-Dateien, die das Layout bestimmter Website-Bereiche wie Beiträge und Seiten bestimmen. Zu den gängigsten gehören:

• header.php – enthält den HTML-Code, der im oberen Bereich Ihrer WordPress-Website angezeigt wird.
• footer.php – enthält den HTML-Code für den unteren Bereich Ihrer Website.
• sidebar.php – erzeugt die Elemente der Seitenleiste.
• functions.php – erweitert das Theme um Funktionen, beispielsweise WordPress-Widgets.
• single.php – stellt einzelne Beiträge einschließlich benutzerdefinierter Beitragstypen dar.
• page.php – zeigt die statischen Inhalte einer einzelnen Seite an.

In dieser Anleitung verwenden wir alle genannten Dateien. Gehen Sie wie folgt vor, um sie auf Ihrer Staging-Website zu erstellen:

1. Melden Sie sich im Hostinger-Dashboard an und öffnen Sie den Dateimanager Ihrer Website.

2. Öffnen Sie das WordPress-Theme-Verzeichnis über public_html → staging → wp-content → themes.
3. Klicken Sie in der Seitenleiste auf Neuer Ordner.
4. Geben Sie einen Namen für Ihr Theme ein. Er sollte eindeutig und kurz sein und ausschließlich Buchstaben und Zahlen ohne Leerzeichen enthalten. Klicken Sie auf Erstellen.
5. Öffnen Sie den Ordner mit einem Doppelklick und wählen Sie in der Seitenleiste Neue Datei aus.
6. Geben Sie index.php ein und klicken Sie auf Erstellen.
7. Wiederholen Sie die beiden vorherigen Schritte für alle weiteren Template-Dateien. In dieser Anleitung erstellen wir style.css, header.php, footer.php, functions.php, sidebar.php, single.php und page.php.

Speichern Sie alle Theme-Dateien im selben Ordner innerhalb des WordPress-Installationsverzeichnisses. So kann das CMS die Dateien entsprechend der Template-Hierarchie laden.

Wenn Ihre gesamte Website dasselbe Layout verwendet, benötigen Sie nicht alle benutzerdefinierten Templates. Wir empfehlen dennoch, die Dateien getrennt anzulegen. So können Sie den Hauptcode von zusätzlichen Inhalten trennen und Ihr Theme später einfacher anpassen.

Für dynamische Designelemente müssen Sie außerdem JavaScript-Dateien im Theme-Verzeichnis erstellen. Darauf verzichten wir in dieser Anleitung. Stattdessen legen wir einen Ordner namens Images an, in dem wir Bilddateien wie Logos speichern.

Die Theme-Dateien sind bisher leer. Im nächsten Schritt fügen wir zunächst die grundlegende Gestaltung hinzu und erstellen anschließend das Layout.

2. Richten Sie das erste CSS-Stylesheet ein

Nachdem Sie alle Template-Dateien erstellt haben, können Sie mit der Programmierung beginnen. Ergänzen Sie zunächst das zuvor angelegte Stylesheet style.css um die Angaben, anhand derer WordPress Ihr Theme erkennt.

Dazu gehören der Theme-Name, der Autor und eine Beschreibung. Diese Informationen erscheinen später im WordPress-Admin-Bereich und müssen dem Format des WordPress-Dateiheaders entsprechen. Hier ein Beispiel:

/*
Theme Name: My Theme
Author: Hostinger
Author URI: http://www.hostinger.com/tutorials
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html

Klicken Sie oben rechts auf das Diskettensymbol, um die Datei zu speichern. Kehren Sie anschließend im Hostinger-Dashboard zur Website-Verwaltung zurück und öffnen Sie WordPress → Staging. Klicken Sie bei Ihrer Testumgebung auf Staging verwalten und wählen Sie Staging-Admin-Bereich aus.

Öffnen Sie in der Seitenleiste Design → Themes. Dort sehen Sie nun das Grundgerüst Ihres Themes.

Als Nächstes gestalten wir das Theme. Öffnen Sie dazu das Stylesheet und fügen Sie unterhalb des Dateiheaders Ihren CSS-Code ein. Mit dem folgenden Beispiel ändern wir die Hintergrundfarbe:

* {
  box-sizing: border-box;
}

body {
  background-color: #f9f9f9;
  font-family: Helvetica;
}

Sehen wir uns den Code genauer an. Das Sternchen (*) am Anfang ist ein universeller CSS-Selektor, der alle HTML-Elemente auswählt. Auf diese Elemente werden die Regeln innerhalb des ersten geschweiften Klammerpaares angewendet. Hier legen wir mit box-sizing fest, wie die Abmessungen eines Elements im CSS-Box-Modell berechnet werden, das aus Inhalt, Innenabstand und Rahmen besteht.

Der zweite CSS-Regelsatz bestimmt die Hintergrundfarbe und die Standardschriftart für die HTML-Inhalte innerhalb des <body>-Elements.

Da noch keine HTML-Inhalte vorhanden sind, werden Sie vorerst keine Änderungen sehen. Sobald wir die Elemente und die Struktur des Themes erstellt haben, ergänzen wir weitere CSS-Regeln.

3. Machen Sie das WordPress-Theme funktionsfähig

Nachdem Ihr WordPress-Theme im Admin-Dashboard angezeigt wird, können wir seine Struktur und Funktionen einrichten. Dazu ergänzen wir die Dateien functions.php und sidebar.php um entsprechenden Code.

functions.php

Browser können Ihr WordPress-Theme aufgrund unterschiedlicher Standardeinstellungen für Außen- und Innenabstände unterschiedlich darstellen. Damit das Layout möglichst einheitlich angezeigt wird, binden Sie die Datei normalize.css über functions.php ein.

normalize.css ist ein vorgefertigtes Stylesheet, das eine einheitliche Grundlage für Ihren CSS-Code schafft und Darstellungsunterschiede zwischen Browsern ausgleicht. Fügen Sie dazu die folgende Funktion in functions.php ein:

<?php
// This function enqueues the Normalize.css for use.
// The first parameter is a name for the stylesheet,
// the second is the URL. Here we use an online
// version of the css file.
function add_normalize_CSS() {
    wp_enqueue_style(
        'normalize-styles',
        "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"
    );
}

add_action('wp_enqueue_scripts', 'add_normalize_CSS');

Dieser Code weist WordPress an, die Datei normalize.css von der angegebenen Quell-URL zu laden.

Fügen Sie anschließend eine Funktion hinzu, um einen Widget-Bereich beziehungsweise eine Seitenleiste zu aktivieren. Widgets sind modulare Erweiterungen, mit denen Sie bestimmte Funktionen in verschiedene Bereiche Ihrer WordPress-Website integrieren können.

Ergänzen Sie den vorherigen Code um den folgenden Abschnitt:

// Register a new sidebar simply named 'sidebar'
function add_widget_support() {
    register_sidebar( array(
        'name'          => 'Sidebar',
        'id'            => 'sidebar',
        'before_widget' => '<div>',
        'after_widget'  => '</div>',
        'before_title'  => '<h2>',
        'after_title'   => '</h2>',
    ) );
}

// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_widget_support' );

Aktivieren Sie das Theme nun über Design → Themes, indem Sie auf Aktivieren klicken. Anschließend sollte unter Design der Menüpunkt Widgets erscheinen. Dort können Sie Widgets zu Ihrer Website hinzufügen oder vorhandene Widgets entfernen.

Der Code verwendet einen sogenannten Action-Hook. Mit diesem Mechanismus lassen sich PHP-Funktionen an bestimmten Stellen in WordPress ausführen, um Einstellungen und Funktionen zu erweitern, ohne die Core-Dateien zu verändern. Auf Hooks gehen wir später noch genauer ein.

Fügen Sie abschließend den folgenden Code hinzu, um ein individuelles Navigationsmenü zu registrieren:

// Register a new navigation menu
function add_Main_Nav() {
    register_nav_menu('header-menu', __( 'Header Menu' ));
}

// Hook to the init action hook, run our navigation menu function
add_action( 'init', 'add_Main_Nav' );

Dadurch erscheint unter Design der Menüpunkt Menüs. Denken Sie daran, den neuen Code nach jeder Änderung zu speichern. Klicken Sie dazu im Code-Editor des Dateimanagers auf das Diskettensymbol.

Sie können Ihrem Theme noch weitere Funktionen hinzufügen. Häufig integrieren WordPress-Website-Besitzer beispielsweise Beitragsbilder und Vorschaubilder für Beiträge.

sidebar.php

Als Nächstes richten wir die Seitenleiste unseres WordPress-Themes ein, damit die Widgets mithilfe der Funktion get_sidebar() angezeigt werden können.

Fügen Sie den folgenden Code in sidebar.php ein und speichern Sie die Datei:

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
  <aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar' ); ?>
  </aside>
<?php endif; ?>

Die if-Anweisung prüft, ob die Seitenleiste aktiv ist und Widgets enthält. Ist dies der Fall, werden die Widgets angezeigt, die Sie unter Design → Widgets hinzugefügt haben.

4. Erstellen Sie das Layout Ihres eigenen Themes

Nachdem wir die Seitenleiste und die Funktion zur CSS-Normalisierung eingerichtet haben, können wir das Layout unseres WordPress-Themes erstellen. Am Ende dieses Schritts nimmt die Struktur Ihrer Website Gestalt an.

Neben index.php bearbeiten wir die Dateien header.php, footer.php, single.php, page.php und style.php, um den verschiedenen Seiten ein eigenes Layout zu geben.

header.php

Die Template-Datei header.php legt den oberen Bereich Ihrer Website fest. Beginnen Sie mit folgendem Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dieses Meta-Tag ist eine Grundlage für responsives Design. Es sorgt dafür, dass die Breite des Viewports der Gerätebreite entspricht und das Layout Ihres WordPress-Themes an unterschiedliche Bildschirmgrößen angepasst werden kann. Dieses Konzept erläutern wir später ausführlicher.

Fügen Sie anschließend Folgendes hinzu:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

Die DOCTYPE-Deklaration informiert den Browser darüber, dass es sich um ein HTML-Dokument handelt. Die Funktion language_attributes() ergänzt das HTML-Element um die entsprechenden Sprach- und Textrichtungsattribute.

Erstellen Sie danach den Bereich zwischen <head> und </head>. Dieser enthält die Metadaten des Dokuments, beispielsweise den Seitentitel, den verwendeten Zeichensatz, die Viewport-Einstellungen für responsives Design und die Verknüpfung zum Stylesheet. Für diese Angaben werden unterschiedliche HTML-Tags verwendet.

<head>
  <title><?php bloginfo('name'); ?> &raquo; <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
  <?php wp_head(); ?>
</head>

Anschließend öffnen wir den <body>-Bereich des HTML-Dokuments. Mit der Funktion body_class() weist WordPress dem <body>-Element automatisch CSS-Klassen zu, die wir später für die Gestaltung verwenden können.

<body <?php body_class(); ?>>

Fügen Sie nun den Header mit der CSS-Klasse my-logo hinzu. Innerhalb der Tags <h1> und </h1> binden wir das Logo aus dem Ordner Images ein. Es dient als Hauptüberschrift und ist mit der Startseite Ihrer Website verlinkt.

<header class="my-logo">
    <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/Images/logo.png" alt="Site Logo" width="50px" height="50px"></a></h1>
</header>

Fügen Sie abschließend folgenden Code hinzu, um das Navigationsmenü im Header des Themes anzuzeigen:

<?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>

index.php

Die Datei index.php definiert die Struktur der Startseite und dient als Standard-Template, wenn keine spezielleren Seiten-Templates vorhanden sind.

Wenn Sie unterschiedliche Layouts für Header, Seitenleiste und Footer verwenden, können Sie deren Code mithilfe von Template-Tags in index.php einbinden. Mit get_header() laden Sie beispielsweise den Header. Für die anderen Bereiche stehen entsprechende Funktionen zur Verfügung.

Um Ihre Website in einzelne Bereiche zu unterteilen, verwenden Sie semantische HTML5-Elemente wie <header> und <section>. Wenn Sie diese mithilfe Ihres CSS-Stylesheets gestalten möchten, können Sie ihnen Klassen zuweisen. Das funktioniert beispielsweise so:

<header class="class-name">

Das folgende Beispiel zeigt den Code für index.php mit Template-Tags und semantischen HTML-Elementen:

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-loop">
        <header>
          <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_excerpt(); ?>
      </article>
    <?php endwhile; else : ?>
      <article>
        <p>Sorry, no posts were found!</p>
      </article>
    <?php endif; ?>
  </section>
  <?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

Der Code enthält außerdem einen WordPress-Loop. Dabei handelt es sich um PHP-Code, der Beiträge aus der Datenbank abruft und ihre Daten an weitere Funktionen übergibt. Der Loop beginnt mit <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> und endet mit <?php endif; ?>.

Innerhalb des Loops verwenden wir folgende Funktionen, um bestimmte Informationen zu einem Beitrag abzurufen:

• <?php the_permalink(); ?> – gibt die URL des Beitrags aus.
• <?php the_title_attribute(); ?> – gibt den Beitragstitel in einem Format aus, das sich für HTML-Attribute eignet.
• <?php the_title(); ?> – zeigt den Titel des Beitrags an.
• <?php the_author(); ?> – gibt den Namen des Beitragsautors aus.
• <?php the_excerpt(); ?> – gibt einen Auszug des Beitrags aus. Wenn Sie keinen Auszug hinterlegt haben, wird dieser automatisch erstellt.

footer.php

Die Datei footer.php bestimmt, welche Inhalte im unteren Bereich Ihres Themes erscheinen, beispielsweise Copyright-Angaben oder eine Sitemap. Hier können Sie auch die schließenden Tags </body> und </html> einfügen, sofern diese nicht bereits in header.php vorhanden sind.

Verwenden Sie das semantische HTML-Element <footer>, um den Inhalt des Footers festzulegen. In unserem Beispiel fügen wir am Seitenende einen Copyright-Hinweis hinzu.

Außerdem integrieren wir den Action-Hook wp_footer, damit über die Funktion wp_footer() entsprechender Code aus den WordPress-Core-Dateien oder Plugins ausgeführt werden kann.

Der vollständige Code sieht folgendermaßen aus:

<footer>
  <p>Copyright &copy; 2025</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

single.php

Die Datei single.php legt das Layout für einzelne Beiträge in WordPress fest. Neben Blogbeiträgen kann sie auch für benutzerdefinierte Beitragstypen verwendet werden, beispielsweise für Produktseiten eines Online-Shops.

Binden Sie zuerst die Header-Datei über die Funktion get_header() ein:

<?php get_header(); ?>

Fügen Sie anschließend die Tags <section> und </section> hinzu, um einen Container für den Hauptinhalt zu erstellen. Weisen Sie diesem Bereich eine CSS-Klasse zu, damit Sie ihn später gestalten können.

Mit einem WordPress-Loop rufen wir die Beitragsinhalte ab und geben sie über the_content() aus.

Sind keine Beitragsinhalte vorhanden, wird stattdessen eine Fehlermeldung angezeigt. Der vollständige Code sieht so aus:

<main class="wrap">
  <section class="content-area content-full-width">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_content(); ?>
      </article>
    <?php endwhile; else : ?>
      <article>
        <p>Sorry, no post was found!</p>
      </article>
    <?php endif; ?>
  </section>
</main>
<?php get_footer(); ?>

Anders als in den anderen Template-Dateien verwenden wir hier keine Funktion get_sidebar(). So werden die Seitenleiste und die Widgets bei einzelnen Beiträgen nicht angezeigt.

page.php

Seiten wie Landingpages enthalten meist dauerhafte Inhalte, die sich nur selten ändern. Ist keine eigene Seiten-Template-Datei vorhanden, verwendet WordPress für diese Seiten index.php statt single.php.

Für page.php nutzen wir ähnlichen Code wie für single.php, nehmen aber einige Anpassungen vor, um die Darstellung von Seiten und Beiträgen zu unterscheiden. Wir fügen eine Seitenleiste hinzu und verkleinern den Inhaltsbereich.

Der Code sieht folgendermaßen aus:

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_content(); ?>
      </article>
    <?php endwhile; else : ?>
      <article>
        <p>Sorry, no page content was found!</p>
      </article>
    <?php endif; ?>
  </section>
  <?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

Obwohl wir denselben WordPress-Loop verwenden, verarbeitet dieser Code Seiten statt Beiträge, da er sich in der Datei page.php befindet.

Ihr individuelles WordPress-Theme verfügt nun über ein Layout und Inhalte. Wenn Sie Ihre Staging-Website aufrufen, sehen Sie allerdings zunächst nur unformatierten Text und das Logo, da die weiteren CSS-Regeln noch fehlen.

Sie können die PHP-Template-Dateien nicht nur über den Dateimanager bearbeiten, sondern auch den Theme-Datei-Editor verwenden, um Code hinzuzufügen oder zu ändern. Sie erreichen ihn über das Menü Design im WordPress-Admin-Dashboard.

5. Optimieren Sie das Design mit CSS

Nachdem Sie die HTML-Elemente erstellt und ihnen Klassen zugewiesen haben, können Sie deren Erscheinungsbild über das Stylesheet anpassen.

Öffnen Sie dazu erneut style.css und fügen Sie zunächst den folgenden Code hinzu, um die Breite, den Innenabstand und die Hintergrundfarbe des Logo-Bereichs zu ändern:

.my-logo, footer {
  width: 100%;
  padding-left: 1%;
  margin-bottom: 8px;
  background-color: #78baff;
  border: 1px solid #78baff;
}

Ergänzen Sie anschließend die folgenden CSS-Regeln, um die Verlinkung innerhalb der h1-Überschrift, die Artikel und den Footer zu gestalten:

body > header > h1 > a {
  color: #ffffff;
  font-weight: 400;
}

article > header {
}

footer {
  margin-top: 4px;
}

a {
  text-decoration: none;
}

/* 'Margin: 0 auto' centers block content on the page */
.wrap {
  width: 99%;
  margin: 0 auto;
}

Fügen Sie abschließend die folgenden CSS-Regeln hinzu, um weitere Elemente wie den Inhaltsbereich und die Seitenleiste zu gestalten:

.content-area {
  display: inline-block;
}

.content-thin {
  width: 70%;
}

.content-full-width {
  width: 100%;
}

.content-area, .primary-sidebar {
  display: inline-block;
}

.primary-sidebar {
  width: 25%;
  padding: 1%;
  vertical-align: top;
  background-color: #ececec;
}

.article-loop {
  width: 45%;
  text-align: left;
  margin: 5px;
  padding: 10px;
}

.article-full {
  width: 99%;
  padding: 1%;
}

.article-loop, .article-full {
  display: inline-block;
  vertical-align: top;
  background-color: #FFF;
  border-radius: 4px;
  margin-bottom: 4px;
}

Nachdem Sie die neuen CSS-Regeln angewendet haben, sollte Ihre Staging-Website ungefähr so aussehen:

Sie können das Stylesheet auch anpassen, indem Sie über den Theme-Editor benutzerdefiniertes CSS in WordPress hinzufügen. Öffnen Sie dazu in der Seitenleiste Design → Themes → Anpassen → Zusätzliches CSS.

6. Testen Sie Ihr Theme und stellen Sie es bereit

Bevor Sie Ihr neues Theme auf Ihrer Live-Website bereitstellen, müssen Sie es zunächst in der WordPress-Staging-Umgebung aktivieren. So können Sie prüfen, ob es korrekt dargestellt wird und alle Funktionen wie vorgesehen arbeiten.

Öffnen Sie das WordPress-Admin-Dashboard Ihrer Staging-Website und aktivieren Sie das neue Theme über das Menü Themes. Rufen Sie anschließend die Test-Website auf, indem Sie oben in der Admin-Leiste auf Zur Website klicken.

Wenn Sie die Darstellung und die verschiedenen Layouts überprüft haben, können Sie das Theme auf Ihre Live-Website übertragen.

Öffnen Sie dazu erneut den Dateimanager Ihrer Staging-Umgebung, wählen Sie den Theme-Ordner aus und klicken Sie in der oberen Leiste auf Herunterladen. Laden Sie den Ordner als ZIP-Datei herunter.

Entpacken Sie den Ordner auf Ihrem Computer und laden Sie ihn über den Dateimanager in das Verzeichnis /wp-content/themes Ihrer Live-Website hoch. Aktivieren Sie das Theme anschließend über das WordPress-Admin-Dashboard.

Grundlegende Konzepte der WordPress-Theme-Entwicklung

Wenn Sie erst einmal Ihr eigenes WordPress-Theme erstellt haben, möchten Sie später möglicherweise weitere Funktionen hinzufügen oder das Erscheinungsbild anpassen. Deshalb erläutern wir im Folgenden wichtige Grundlagen zur Gestaltung und Funktionsweise von WordPress-Themes.

Media Queries und responsives Design

Die Bildschirme Ihrer Website-Besucher unterscheiden sich hinsichtlich Auflösung, Größe und Ausrichtung. Wenn Sie Ihr Theme ausschließlich für Desktop-Geräte entwickeln, wird es auf anderen Geräten wie Smartphones möglicherweise nicht korrekt angezeigt oder funktioniert nicht wie vorgesehen.

Mit responsivem Design stellen Sie sicher, dass Ihr Theme auf unterschiedlichen Bildschirmgrößen ordnungsgemäß funktioniert. Die Website passt dabei ihr Layout, die Anordnung der Inhalte und die Größe einzelner Elemente automatisch an die Anzeigeeigenschaften des jeweiligen Geräts an.

Verwenden Sie CSS-Media-Queries, um festzulegen, wie Inhalte bei unterschiedlichen Viewport-Größen dargestellt werden. Dabei können Sie Prozentwerte nutzen, um das Layout und die Elementgrößen im Verhältnis zur Bildschirmgröße zu bestimmen.

Bei einem zweispaltigen Theme kann beispielsweise jede Spalte unabhängig von der Auflösung und Ausrichtung 50 % der verfügbaren Breite einnehmen.

Für Media Queries stehen verschiedene CSS-Merkmale zur Verfügung. Zu den häufig verwendeten gehören:

• max-width – legt die maximale Breite des sichtbaren Browserbereichs fest.
• min-width – legt die minimale Breite des sichtbaren Bereichs fest.
• orientation – prüft, ob der Bildschirm im Hoch- oder Querformat ausgerichtet ist.

Wir empfehlen, die Media Queries am Ende des Stylesheets einzufügen und die betreffenden Elemente über CSS-Klassen anzusprechen. So bleibt der Code übersichtlich und das Theme lässt sich leichter anpassen.

Mit der folgenden Media Query können Sie beispielsweise die Breite des Hauptinhalts und der Seitenleiste unseres zuvor erstellten Themes automatisch anpassen:

@media screen and (max-width: 400px) {
  .content-area,
  .primary-sidebar {
    width: 80%;
  }
}

Diese Regel gilt für Bildschirme und Browserfenster mit einer maximalen Breite von 400 Pixeln. Die ausgewählten Elemente mit den Klassen content-area und primary-sidebar erhalten innerhalb dieses Viewports eine Breite von 80 % ihres jeweiligen Bezugsbereichs.

Damit Ihre Inhalte auch bei anderen Bildschirmgrößen und -ausrichtungen korrekt dargestellt werden, benötigen Sie möglicherweise zusätzliche Regeln. Sie können beispielsweise festlegen, dass die Elemente unter bestimmten Bedingungen die gesamte verfügbare Breite einnehmen:

@media screen and (max-width: 800px) {
  .content-area,
  .primary-sidebar {
    width: 100%;
  }
}

Template-Tags

Template-Tags sind PHP-Funktionen, mit denen Sie Dateien einbinden und komplexe Datenbankabfragen vereinfachen können. Statt umfangreichen Code selbst zu schreiben, können WordPress-Entwickler solche Aufgaben häufig mit einer einzigen Codezeile erledigen.

Um ein bestimmtes Template auf einer Seite einzubinden, müssen Sie den entsprechenden Tag in die jeweilige Datei einfügen. Wenn Sie beispielsweise den Footer nur auf der Startseite anzeigen möchten, dann verwenden Sie get_footer() am Ende von home.php, nicht jedoch in page.php.

Einige Template-Tags sind optional, wenn Sie die zugehörigen Template-Dateien nicht verwenden. Andere sind notwendig, damit WordPress-Loops korrekt funktionieren. Sie rufen Beitragsinformationen aus der Datenbank ab und stellen diese für die weitere Verarbeitung zur Verfügung.

Zu den häufig verwendeten Template-Tags zum Einbinden von Dateien gehören:

• get_header() – bindet das Template header.php ein.
• get_sidebar() – lädt das Template sidebar.php.
• get_footer() – bindet das Template footer.php ein.
• get_search_form() – lädt das Template searchform.php.

Die folgenden Template-Tags geben Informationen aus der WordPress-Datenbank aus:

• bloginfo() – zeigt die über den Parameter angeforderten Informationen an. Beispielsweise gibt bloginfo("name") den Namen Ihrer Website aus.
• single_post_title() – zeigt den Titel des aktuell aufgerufenen Beitrags an, wenn Sie die Funktion in single.php verwenden.
• the_author() – gibt den Autor des aktuell angezeigten Beitrags aus.
• the_content() – gibt den Hauptinhalt eines Beitrags oder einer Seite aus.
• the_excerpt() – zeigt einen Auszug eines Beitrags oder einer Seite an.

WordPress-Loop

Ein WordPress-Loop ist ein Codeabschnitt, der Beiträge durchläuft, ihre Daten abruft und an weitere Funktionen übergibt. Seine grundlegende Aufgabe besteht darin, Inhalte aus der Datenbank zu laden und auf der Website anzuzeigen.

Bei der Entwicklung von WordPress-Themes ist der Loop entscheidend, um Beiträge dynamisch darzustellen. Ohne ihn wären Sie auf statische Inhalte beschränkt, da die Template-Dateien nicht automatisch auf die aktuellen Informationen aus der Datenbank zugreifen könnten.

Der Loop wird in index.php und anderen Templates verwendet, die Beitragsinhalte anzeigen. Er beginnt mit einer if-Anweisung wie dieser:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Anschließend legen Sie mit Template-Tags, HTML oder PHP-Funktionen fest, wie die abgerufenen Daten dargestellt werden sollen, sofern entsprechende Inhalte vorhanden sind. Mit the_content() können Sie beispielsweise den vollständigen Inhalt eines Beitrags anzeigen, während the_excerpt() eine kürzere Zusammenfassung ausgibt.

In unserer zuvor erstellten Datei page.php verwenden wir folgenden Code, um die Seiteninformationen als Hauptinhalt darzustellen:

<article class="article-full">
  <header>
    <h2><?php the_title(); ?></h2>
    By: <?php the_author(); ?>
  </header>
  <?php the_content(); ?>
</article>

Der WordPress-Loop enthält außerdem eine else-Anweisung, die festlegt, was geschieht, wenn keine passenden Daten vorhanden sind. In unserem Beispiel wird dann eine Fehlermeldung ausgegeben:

<?php endwhile; else : ?>
  <p><?php _e( 'Sorry, no pages matched your criteria.' ); ?></p>
<?php endif; ?>

Action-Hooks

Mit Hooks können Sie die Standardfunktionen von WordPress erweitern oder verändern, ohne die Core-Dateien zu bearbeiten. WordPress unterscheidet dabei zwei Arten von Hooks: Actions und Filter.

Filter-Hooks dienen dazu, vorhandene Daten zu verändern und die angepassten Werte zurückzugeben. Action-Hooks ermöglichen dagegen die Ausführung zusätzlicher Funktionen zu bestimmten Zeitpunkten.

Mit Hooks können Sie außerdem Funktionen aus WordPress-Plugins in Ihr Theme integrieren. Dadurch lässt sich die Kompatibilität verschiedener Softwarekomponenten innerhalb des Content-Management-Systems (CMS) verbessern und ein stabiler Betrieb unterstützen.

Darüber hinaus können Sie Ihren Code mithilfe von Hooks auf verschiedene Dateien verteilen. Das vereinfacht spätere Änderungen, Updates und die Fehlerbehebung. Hooks lassen sich auch verwenden, um zusätzliche Funktionen zu aktivieren – beispielsweise den integrierten WordPress-Customizer oder den Website-Editor für Block-Themes.

In unserem neu erstellten Theme verwenden wir die Funktion wp_head() in header.php. Sie löst einen Action-Hook aus, über den WordPress und Plugins zusätzlichen Code in den HTML-Head-Bereich einfügen können:

<?php wp_head(); ?>
</head>

Die Funktion wp_footer() im Footer-Template löst ebenfalls einen Action-Hook aus. Darüber können WordPress und Plugins zusätzlichen Code ausführen und beispielsweise benötigte Skripte einbinden:

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

Wenn Ihr Theme die erforderlichen Hooks nicht enthält, wird wichtiger Code möglicherweise nicht geladen und Plugins können ihre Funktionen nicht ordnungsgemäß ausführen. Fehlt beispielsweise wp_footer(), wird unter Umständen die WordPress-Admin-Leiste nicht angezeigt, da sie diesen Action-Hook verwendet.

Best Practices für die Erstellung eines WordPress-Themes

Damit Ihr WordPress-Theme zuverlässig funktioniert und seine Integrität gewahrt bleibt, sollten Sie bei der Entwicklung die folgenden Best Practices beachten.

Überprüfen Sie den Code und die Dateien Ihres Themes

Prüfen Sie, ob Ihr neues Theme den aktuellen WordPress-Richtlinien entspricht. Neben der Funktionsprüfung hilft die Code-Validierung dabei, Probleme zu erkennen, die die Sicherheit, Kompatibilität, Lizenzierung oder Qualität beeinträchtigen könnten.

Besonders einfach geht das mit einem Plugin wie Theme Check. Wir empfehlen, die Prüfung nach Änderungen regelmäßig durchzuführen, damit Sie mögliche Probleme frühzeitig erkennen.

Testen Sie Ihr Theme auf verschiedenen Geräten und in unterschiedlichen Browsern

Um sicherzustellen, dass die Media Queries Ihres WordPress-Themes bei unterschiedlichen Viewport-Größen korrekt funktionieren, sollten Sie die Website auf verschiedenen Geräten testen.

Mit der Geräte-Symbolleiste Ihres Browsers können Sie unterschiedliche Bildschirmgrößen simulieren. Öffnen Sie in Google die Funktion mit Strg + Umschalt + C und anschließend Strg + Umschalt + M. Über die obere Leiste können Sie die Auflösung und das Seitenverhältnis anpassen.

Testen Sie Ihr WordPress-Theme nicht nur auf verschiedenen Geräten, sondern auch in unterschiedlichen Browsern. Da diese CSS und HTML teilweise unterschiedlich darstellen, können Fehler auftreten, die sich negativ auf die Benutzererfahrung auswirken.

Verwenden Sie ein Starter-Theme

Mit einem Starter-Theme können Sie die Entwicklung vereinfachen. Statt den gesamten Code von Grund auf zu schreiben, müssen Sie lediglich die gewünschten Gestaltungselemente und Funktionen ergänzen.

Starter-Themes entsprechen in der Regel den WordPress-Coding-Standards und bieten damit eine solide Grundlage für die weitere Entwicklung. Einige verfügen zudem über eine große Community und eine umfangreiche Wissensdatenbank, die Ihnen bei der Fehlerbehebung helfen.

Da zahlreiche Starter-Themes verfügbar sind, empfehlen wir eine kostenlose Variante von einem renommierten Entwickler, wie beispielsweise Astra oder Underscores.

Minimieren und optimieren Sie Ihren Code

Wenn Sie WordPress-Themes von Grund auf entwickeln, sollten Sie auf sauberen Code und möglichst kleine Dateien achten. Dadurch können Browser Ihr Theme schneller darstellen, was die Ladegeschwindigkeit Ihrer Website verbessert.

Um die Ladezeiten weiter zu verkürzen, können Sie Tools wie Minifier verwenden, um die Größe Ihrer PHP-, CSS- und JavaScript-Dateien zu reduzieren. Bei der Minifizierung werden überflüssige Zeichen wie Leerzeichen entfernt, die keinen Einfluss auf die Funktionalität des Codes haben.

Bevor Sie Ihren Code minifizieren, sollten Sie eine Sicherungskopie der Originaldateien erstellen. Minifizierter Code ist häufig schwerer lesbar, was die Fehlersuche und spätere Wartungsarbeiten erschweren kann.

Erstellen Sie außerdem Child-Themes. Damit können Sie einem bestehenden Theme neue Funktionen oder Gestaltungselemente hinzufügen, ohne die ursprünglichen Template-Dateien zu verändern. So lassen sich Fehlkonfigurationen vermeiden und Änderungen leichter rückgängig machen.

Fazit

Wenn Sie ein eigenes WordPress-Theme von Grund auf erstellen, lässt Ihre Website individueller gestalten. Außerdem können Sie gezielte Funktionen integrieren, die Sie tatsächlich benötigen. Das reduziert unnötigen Code und kann die Ladegeschwindigkeit Ihrer Seiten verbessern.

In diesem Artikel haben wir erklärt, wie Sie ein eigenes Theme für Ihre WordPress-Website entwickeln. Nachdem Sie eine Staging-Umgebung eingerichtet haben, gehen Sie in sechs Schritten vor:

1. Erstellen Sie index.php, style.css und die weiteren Template-Dateien im Theme-Ordner Ihrer Staging-Umgebung innerhalb des WordPress-Verzeichnisses themes.
2. Richten Sie das erste CSS-Stylesheet ein, indem Sie die Angaben zum Theme-Entwickler und die Hintergrundfarbe ergänzen.
3. Machen Sie Ihr WordPress-Theme funktionsfähig, indem Sie über functions.php und sidebar.php eine Seitenleiste einrichten.
4. Erstellen Sie das Layout Ihres WordPress-Themes, indem Sie index.php und die weiteren Template-Dateien mithilfe von HTML-Tags in Bereiche unterteilen.
5. Verbessern Sie die Gestaltung Ihres Themes, indem Sie im Stylesheet CSS-Regeln für die einzelnen Klassen ergänzen.
6. Testen Sie Ihr eigenes Theme in der Staging-Umgebung und übertragen Sie die Dateien nach Abschluss der Entwicklung auf Ihre Live-Website.

Achten Sie auf responsives Design, damit Ihr WordPress-Theme auf unterschiedlichen Bildschirmgrößen korrekt dargestellt wird. Konfigurieren Sie außerdem die Template-Tags, WordPress-Loops und Action-Hooks sorgfältig, um die Kompatibilität mit anderen Softwarekomponenten des CMS zu gewährleisten.

Häufig gestellte Fragen (FAQ) zur Erstellung eines WordPress-Themes

Im Folgenden beantworten wir einige häufig gestellte Fragen rund um die Erstellung eines eigenen WordPress-Themes.

Alle Tutorial-Inhalte auf dieser Website unterliegen Hostingers strengen redaktionellen Standards und Werten.

Erstellt von

Eveline Boschmann

Add Hostinger as a preferred source on Google

Eveline ist Lokalisierungsexpertin mit langjähriger Erfahrung in der Transkreation von Inhalten für den deutschen Markt. Sie unterstützt Hostinger dabei, die Kernwerte und die Markenbotschaft des Unternehmens an ein internationales Publikum zu vermitteln und Hostingers hochwertige Tutorials für alle zugänglich zu machen.

Mehr von Eveline Boschmann