WordPressKategorie

Wie du dein eigenes WordPress-Theme entwickelst: Die wichtigsten Tipps mit Schritt-für-Schritt-Anleitung

•39 min lesen
GoDaddy Deutschland Content Team
Titelmotiv des Blogartikels zum Thema: Wie du dein eigenes WordPress-Theme entwickelst: Die wichtigsten Tipps mit Schritt-für-Schritt-Anleitung

See More

Jedes Business braucht eine professionelle Webseite!

Bringe deine Webseite jetzt ganz einfach online!

See More

Du möchtest dein eigenes WordPress Theme erstellen, bist aber unsicher, wo du anfangen sollst? Obwohl WordPress.org und zahlreiche Theme-Marktplätze tausende schöne und funktionale Themes anbieten, stößt du vielleicht an Grenzen, wenn es um ganz spezielle Design-Wünsche oder individuelle Funktionen geht. Die gute Nachricht: Mit etwas Grundwissen in HTML, CSS und PHP kannst du dein eigenes WordPress Theme selbst erstellen – und dieser umfassende Guide zeigt dir genau, wie das geht.

In diesem Tutorial lernst du alle wichtigen Schritte kennen, um dein eigenes WordPress Template zu erstellen. Vom Einrichten der Entwicklungsumgebung über die ersten Code-Zeilen bis hin zu fortgeschrittenen Techniken wie Child Themes und responsive Design – hier findest du alles, was du brauchst.

Das erwartet dich in diesem Artikel:

  • Vollständige Vorbereitung deiner Entwicklungsumgebung
  • Grundlagen der WordPress Theme-Struktur
  • Schritt-für-Schritt Anleitung zum Erstellen deines ersten Themes
  • Child Theme Entwicklung für Update-Sicherheit
  • Responsive und Bootstrap-basierte Themes
  • Gutenberg-Integration und moderne Best Practices
  • Hilfreiche Tools und Software für die Theme-Entwicklung

Du entwickelst für Kunden? Dann brauchst du eine professionelle Domain – jetzt sichern!

Sichere dir jetzt deine Wunschdomain

Voraussetzungen & Was du mitbringen solltest

Bevor wir mit der eigentlichen Theme-Entwicklung starten, lass uns kurz klären, welche Kenntnisse du idealerweise mitbringen solltest. Keine Sorge – du musst kein Programmier-Profi sein, aber ein paar Grundlagen erleichtern dir den Einstieg erheblich.

Du solltest bereits Erfahrung haben mit:

  • HTML: Grundlegende Struktur von Webseiten (Überschriften, Absätze, Listen, Links)
  • CSS: Styling von HTML-Elementen (Farben, Schriftarten, Layouts)
  • PHP: Grundlagen wie Variablen, Schleifen und Funktionen
  • WordPress: Du hast bereits mit WordPress gearbeitet und weißt, was Themes, Plugins und Posts sind

Falls du bei einem dieser Punkte noch Auffrischung brauchst, ist das völlig okay. Du kannst während der Theme-Entwicklung parallel dazulernen – WordPress ist ein hervorragendes "Learning by Doing"-Projekt.

Bevor du loslegst: Nutze WordPress Hosting & spare dir die Server-Konfiguration!

Hol dir WordPress Hosting von GoDaddy

Warum überhaupt ein eigenes WordPress Theme erstellen?

Du fragst dich vielleicht, ob der Aufwand sich lohnt. Hier sind einige überzeugende Gründe:

  • Volle Kontrolle: Du bestimmst jedes Detail deines Designs
  • Performance: Nur der Code, den du wirklich brauchst – keine Bloat von Universal-Themes
  • Individualität: Deine Website sieht aus wie keine andere
  • Lerneffekt: Du verstehst WordPress von Grund auf
  • Wartung: Du weißt genau, was dein Code macht
  • Berufliche Perspektive: Theme-Entwicklung ist eine gefragte Fähigkeit

Entwicklungsumgebung einrichten

Bevor du im Editor deiner Wahl die ersten Code-Zeilen tippen kannst, brauchst du eine geeignete Entwicklungsumgebung. Um mit der WordPress-Theme-Entwicklung zu starten, musst du einen lokalen Webserver auf deinem Computer einrichten. Dafür gibt es verschiedene Lösungen, die dir den Einstieg erleichtern, wie Local by Flywheel, XAMPP oder MAMP. In diesem Artikel erfährst du, wie du diese Tools installierst und WordPress schnell zum Laufen bringst.

Lokalen Webserver installieren

Für die WordPress Theme-Entwicklung benötigst du eine lokale Installation mit:

  • Webserver (Apache oder Nginx)
  • Datenbank (MySQL oder MariaDB)
  • PHP (mindestens Version 7.4, besser 8.0+)
  • WordPress (aktuelle Version)

Die einfachsten Lösungen für Anfänger:

Local by Flywheel (empfohlen für Einsteiger)

  • Kostenlos und benutzerfreundlich
  • Ein-Klick WordPress-Installation
  • Integrierte SSL-Zertifikate
  • Verfügbar für Windows und Mac
  • Download: localwp.com

XAMPP (klassische Lösung)

  • Kostenlos und Open Source
  • Manuelle WordPress-Installation nötig
  • Für Windows, Mac und Linux
  • Download: apachefriends.org

MAMP (Mac-Alternative)

  • Einfache Einrichtung auf macOS
  • Kostenlose Basisversion verfügbar
  • Download: mamp.info

WordPress lokal installieren

Nachdem du deinen lokalen Server eingerichtet hast, geht es nun darum, WordPress zu installieren. Lade dazu die neueste Version von WordPress herunter und entpacke die Dateien in den entsprechenden Ordner. Im nächsten Schritt musst du eine Datenbank erstellen und die Installation über deinen lokalen Server starten.

  1. Lade WordPress herunter von wordpress.org/download
  2. Entpacke die Dateien in den entsprechenden Ordner:
    • Local by Flywheel: Automatisch im App-Ordner
    • XAMPP: htdocs/dein-projekt
    • MAMP: htdocs/dein-projekt
  3. Erstelle eine Datenbank über phpMyAdmin
  4. Führe die WordPress-Installation aus über localhost/dein-projekt

Debug-Modus aktivieren – unverzichtbar für Theme-Entwicklung

Um Fehler schnell zu finden und zu beheben, solltest du den WordPress Debug-Modus aktivieren. Das ist ein absolutes Muss für die Theme-Entwicklung!

So aktivierst du WP_DEBUG:

  1. Öffne die Datei wp-config.php im WordPress-Hauptverzeichnis
  2. Suche nach der Zeile:

php

define( 'WP_DEBUG', false );
  1. Ändere sie zu:

php

define( 'WP_DEBUG', true );

Erweiterte Debug-Optionen (füge diese Zeilen direkt nach WP_DEBUG ein):

php

// Schreibt Fehler in eine Log-Datei (wp-content/debug.log)
define( 'WP_DEBUG_LOG', true );

// Zeigt Fehler direkt auf dem Bildschirm an
define( 'WP_DEBUG_DISPLAY', true );

// Zeigt PHP-Fehler und Warnungen
@ini_set( 'display_errors', 1 );

// Nutzt die nicht-minifierten Versionen von JS und CSS (hilfreich beim Debuggen)
define( 'SCRIPT_DEBUG', true );

Wichtig: Deaktiviere WP_DEBUG_DISPLAY wieder, bevor du dein Theme auf einen Live-Server überträgst!

Empfohlene Code-Editoren

Ein guter Code-Editor kann die Entwicklung deines WordPress-Themes deutlich erleichtern und effizienter machen. Visual Studio Code ist eine der beliebtesten und leistungsfähigsten Optionen, besonders durch seine vielen nützlichen Erweiterungen. Aber auch andere Editoren wie Sublime Text oder PHPStorm bieten jeweils ihre eigenen Vorteile.

Visual Studio Code (am beliebtesten)

  • Kostenlos und leistungsstark
  • Hervorragende PHP- und WordPress-Extensions
  • Integriertes Git
  • Syntax-Highlighting für alle relevanten Sprachen
  • Download: code.visualstudio.com

Empfohlene VS Code Extensions:

Alternativen:

VS Code & Co. sind super – aber ohne das richtige Hosting kommt dein Theme nie online

Geh auf Nummer sicher - WordPress Hosting von GoDaddy

Mehrere WordPress-Versionen testen (für fortgeschrittene Entwickler)

Wenn du dein WordPress Theme nicht nur für dich selbst erstellen möchtest, sondern planst, es zu verteilen oder zu verkaufen, solltest du es mit verschiedenen WordPress-Versionen testen. Der Standard ist Kompatibilität mit mindestens den letzten zwei Major-Releases.

Ältere WordPress-Versionen findest du auf der offiziellen Releases-Seite: wordpress.org/download/releases/

Professionelle Lösungen für Multi-Version-Testing:

  • Docker: Containerisierte WordPress-Installationen
  • Vagrant: Virtuelle Maschinen für Entwicklung
  • VVV (Varying Vagrant Vagrants): WordPress-spezifische Vagrant-Konfiguration

WordPress Theme Grundlagen

Bevor du dein erstes WordPress Theme selbst erstellen kannst, ist es wichtig zu verstehen, wie WordPress überhaupt funktioniert und wie Themes in dieses System integriert sind.

Wie WordPress eine Seite aufbaut

WordPress ist ein dynamisches Content Management System. Das bedeutet: Wenn jemand deine Website aufruft, baut WordPress die Seite in Echtzeit aus verschiedenen Komponenten zusammen:

  1. URL-Analyse: WordPress analysiert die aufgerufene URL
  2. Query: WordPress fragt die Datenbank nach den passenden Inhalten ab
  3. Template-Auswahl: WordPress wählt die passende Template-Datei aus deinem Theme
  4. Rendering: WordPress verarbeitet PHP-Code, fügt Inhalte ein und generiert HTML
  5. Ausgabe: Der fertige HTML-Code wird an den Browser geschickt

Die WordPress Template-Hierarchie

Ein entscheidendes Konzept beim WordPress Theme Erstellen ist die Template-Hierarchie. WordPress folgt einer klaren Rangfolge bei der Auswahl, welche Template-Datei für welchen Seitentyp verwendet wird.

Beispiel für eine einzelne Seite (Page):

WordPress sucht in folgender Reihenfolge:

  1. page-.php – Spezifische Seite basierend auf URL-Slug
  2. page-.php – Spezifische Seite basierend auf ID
  3. page.php – Allgemeines Seiten-Template
  4. singular.php – Template für einzelne Posts/Pages
  5. index.php – Fallback-Template (wird IMMER benötigt)

Beispiel für Blog-Posts:

  1. single-.php – Für Custom Post Types
  2. single.php – Für normale Blog-Posts
  3. singular.php – Allgemeines Single-Template
  4. index.php – Fallback

Für die Startseite:

  1. front-page.php – Statische Startseite
  2. home.php – Blog-Startseite
  3. index.php – Fallback

Diese Hierarchie gibt dir enorme Flexibilität: Du kannst für jeden Seitentyp ein eigenes Design erstellen, oder mit wenigen Templates arbeiten und die index.php als Basis nutzen.

Die absolut notwendigen Dateien für ein WordPress Theme

Um ein funktionierendes WordPress Theme zu erstellen, brauchst du minimal nur zwei Dateien:

1. style.css – Die Theme-Stylesheet-Datei

  • Enthält CSS für das Design
  • Enthält Theme-Informationen im Header-Kommentar
  • Pflichtdatei – ohne sie erkennt WordPress dein Theme nicht

2. index.php – Das Haupt-Template

  • Fallback-Template für alle Seitentypen
  • Enthält die grundlegende HTML-Struktur
  • Pflichtdatei – WordPress braucht mindestens ein Template

Empfohlene zusätzliche Dateien (für reale Projekte)

In realen Projekten wirst du neben den grundlegenden Dateien noch viele weitere benötigen, um dein Theme funktional und strukturiert zu gestalten. Zu den wichtigsten gehören Template-Dateien wie header.php, footer.php oder single.php, die jeweils spezifische Bereiche deiner Website steuern. Darüber hinaus kommen funktionale Dateien wie die functions.php und das Screenshot-Bild hinzu, um das Theme weiter anzupassen und zu optimieren.

Template-Dateien:

  • header.php – Header-Bereich (Logo, Navigation, Meta-Tags)
  • footer.php – Footer-Bereich (Copyright, Footer-Menü, Scripts)
  • sidebar.php – Sidebar mit Widgets
  • single.php – Einzelner Blog-Post
  • page.php – Statische Seiten
  • archive.php – Archiv-Seiten (Kategorien, Tags, Datum)
  • 404.php – Fehlerseite
  • search.php – Suchergebnisse
  • comments.php – Kommentarbereich

Funktionale Dateien:

  • functions.php – Theme-Funktionen und -Features
  • screenshot.png – Vorschaubild (empfohlen: 1200×900 Pixel)

Asset-Ordner (optional aber empfohlen):

/dein-theme/
  /css/          – Zusätzliche Stylesheets
  /js/           – JavaScript-Dateien
  /images/       – Theme-Bilder
  /fonts/        – Custom Fonts
  /inc/          – PHP-Include-Dateien
  /template-parts/ – Wiederverwendbare Template-Teile

Wo werden WordPress Themes gespeichert?

Alle Themes befinden sich im Verzeichnis:

/wp-content/themes/dein-theme-name/

Jedes Theme hat seinen eigenen Unterordner. WordPress erkennt automatisch alle Ordner in diesem Verzeichnis als potenzielle Themes – vorausgesetzt, sie enthalten mindestens eine style.css mit korrektem Header.

Dein erstes WordPress Theme erstellen – Let's Code!

Jetzt wird es praktisch! In diesem Abschnitt erstellen wir gemeinsam Schritt für Schritt dein erstes WordPress Theme. Keine Sorge – wir starten einfach und bauen nach und nach aus.

Schritt 1: Theme-Ordner anlegen

Öffne dein WordPress-Verzeichnis und navigiere zu:

/wp-content/themes/

Erstelle hier einen neuen Ordner für dein Theme. Der Name sollte:

  • Kleingeschrieben sein
  • Keine Leerzeichen enthalten (nutze Bindestriche)
  • Beschreibend sein

Beispiel:

mein-erstes-theme

Schritt 2: style.css erstellen – Die Identität deines Themes

Erstelle im Theme-Ordner eine neue Datei namens style.css. Der Anfang dieser Datei ist besonders wichtig: Der Theme-Header-Kommentar teilt WordPress alle wichtigen Informationen über dein Theme mit.

Vollständiger style.css Header:

css

/*
Theme Name: Mein Erstes Theme
Theme URI: https://deine-website.de/mein-theme
Author: Dein Name
Author URI: https://deine-website.de
Description: Ein individuelles WordPress Theme, das ich selbst erstellt habe. Perfekt für meine persönliche Website.
Version: 1.0
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mein-erstes-theme
Tags: custom, blog, responsive
*/

/* ==========================================================================
   Ab hier beginnt dein CSS
   ========================================================================== */

/* Reset und Grundstile */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* Container */
.site {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.site-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 0;
}

.site-title a {
    color: #333;
    text-decoration: none;
}

/* Navigation */
.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.main-navigation a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.main-navigation a:hover {
    color: #0073aa;
}

/* Content */
.site-content {
    padding: 40px 0;
}

article {
    margin-bottom: 40px;
}

.entry-title {
    font-size: 32px;
    margin-bottom: 10px;
}

.entry-title a {
    color: #333;
    text-decoration: none;
}

.entry-title a:hover {
    color: #0073aa;
}

.entry-meta {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

.entry-content {
    line-height: 1.8;
}

/* Footer */
.site-footer {
    padding: 20px 0;
    border-top: 1px solid #eee;
    text-align: center;
    color: #666;
    font-size: 14px;
}

Erklärung der wichtigsten Header-Felder:

  • Theme Name: Der Name, der im WordPress-Backend angezeigt wird (Pflichtfeld)
  • Description: Kurze Beschreibung deines Themes
  • Version: Versionsnummer für Updates
  • Text Domain: Wichtig für Übersetzungen (sollte dem Ordnernamen entsprechen)
  • Tags: Stichwörter zur Kategorisierung (bei öffentlichen Themes relevant)

Schritt 3: index.php erstellen – Das Herzstück deines Themes

Die index.php ist das wichtigste Template deines Themes. Sie wird verwendet, wenn keine spezifischere Template-Datei existiert.

Erstelle eine neue Datei index.php mit folgendem Inhalt:

php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

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

<div id="page" class="site">
    <header class="site-header">
        <div class="site-branding">
            <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>
        </div>
    </header>

    <main id="main" class="site-content">
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                ?>
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <header class="entry-header">
                        <h2 class="entry-title">
                            <a href="<?php the_permalink(); ?>">
                                <?php the_title(); ?>
                            </a>
                        </h2>
                        <div class="entry-meta">
                            Veröffentlicht am <?php echo get_the_date(); ?> 
                            von <?php the_author(); ?>
                        </div>
                    </header>

                    <div class="entry-content">
                        <?php the_excerpt(); ?>
                    </div>

                    <footer class="entry-footer">
                        <a href="<?php the_permalink(); ?>" class="read-more">
                            Weiterlesen →
                        </a>
                    </footer>
                </article>
                <?php
            endwhile;

            // Pagination
            the_posts_pagination( array(
                'mid_size' => 2,
                'prev_text' => '← Zurück',
                'next_text' => 'Weiter →',
            ) );

        else :
            ?>
            <p>Keine Beiträge gefunden.</p>
            <?php
        endif;
        ?>
    </main>

    <footer class="site-footer">
        <p>&copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?>. 
        Alle Rechte vorbehalten.</p>
    </footer>
</div>

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

Wichtige WordPress-Funktionen erklärt:

  • wp_head(): Unverzichtbar! Lädt WordPress-Scripts, Styles und Meta-Tags. Muss im <head> stehen.
  • wp_footer(): Unverzichtbar! Lädt Scripts vor </body>. Wichtig für Plugins.
  • language_attributes(): Fügt Sprach-Attribute für HTML-Tag ein
  • bloginfo(): Gibt Website-Informationen aus (Name, Beschreibung, Charset, etc.)
  • body_class(): Fügt dynamische CSS-Klassen zum Body-Tag hinzu
  • home_url(): URL zur Startseite
  • esc_url(): Macht URLs sicher (Security Best Practice)

Der WordPress Loop – Das Herzstück der Content-Ausgabe

Wenn du mit WordPress arbeitest, begegnet dir früher oder später der sogenannte WordPress Loop – und ohne ihn läuft gar nichts. Er ist das Herzstück der Content-Ausgabe und entscheidet, welche Inhalte auf deiner Webseite erscheinen. Verstehst du den Loop, verstehst du WordPress – denn hier steuerst du, wie Posts geladen, verarbeitet und ausgegeben werden.

php

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // Hier kommt die Ausgabe eines Posts
    endwhile;
endif;
?>

Was passiert hier?

  1. have_posts(): Prüft, ob Posts vorhanden sind
  2. while ( have_posts() ): Durchläuft alle gefundenen Posts
  3. the_post(): Setzt die Post-Daten für den aktuellen Durchlauf
  4. Innerhalb der Schleife kannst du Template-Tags verwenden

Wichtige Template Tags im Loop:

  • the_title(): Titel des Posts
  • the_content(): Vollständiger Inhalt
  • the_excerpt(): Kurzzusammenfassung
  • the_permalink(): URL zum Post
  • the_ID(): Post-ID
  • get_the_date(): Veröffentlichungsdatum
  • the_author(): Autor-Name
  • post_class(): CSS-Klassen für den Post
  • the_post_thumbnail(): Beitragsbild (Featured Image)

Schritt 4: Theme aktivieren und testen

Glückwunsch – du hast jetzt ein funktionierendes WordPress Theme erstellt! Jetzt ist es an der Zeit, es zu aktivieren:

  1. Logge dich in dein WordPress-Backend ein (http://localhost/dein-projekt/wp-admin)
  2. Gehe zu Design → Themes
  3. Du solltest dein Theme mit dem Namen sehen, den du in der style.css angegeben hast
  4. Klicke auf Aktivieren

Tipp: Füge einen Screenshot hinzu (1200×900 Pixel, gespeichert als screenshot.png im Theme-Ordner), damit dein Theme eine Vorschau hat.

Für bessere Wartbarkeit solltest du Header und Footer in separate Dateien auslagern. Das ist ein wichtiger Schritt beim professionellen WordPress Theme Erstellen.

Erstelle header.php:

php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>

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

<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#main">
        Zum Inhalt springen
    </a>

    <header id="masthead" class="site-header">
        <div class="site-branding">
            <?php
            if ( has_custom_logo() ) :
                the_custom_logo();
            else :
                ?>
                <h1 class="site-title">
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                        <?php bloginfo( 'name' ); ?>
                    </a>
                </h1>
                <?php
            endif;

            $description = get_bloginfo( 'description', 'display' );
            if ( $description || is_customize_preview() ) :
                ?>
                <p class="site-description"><?php echo $description; ?></p>
            <?php endif; ?>
        </div>

        <nav id="site-navigation" class="main-navigation">
            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                    'fallback_cb'    => false,
                )
            );
            ?>
        </nav>
    </header>

    <main id="main" class="site-content">

Erstelle footer.php:

php

</main><!-- #main -->

    <footer id="colophon" class="site-footer">
        <div class="site-info">
            <p>
                &copy; <?php echo date( 'Y' ); ?> 
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                    <?php bloginfo( 'name' ); ?>
                </a>
            </p>
            <p>
                Powered by <a href="https://wordpress.org/">WordPress</a> | 
                Theme: <?php echo wp_get_theme()->get( 'Name' ); ?>
            </p>
        </div>
    </footer>
</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

Aktualisiere nun deine index.php:

php

<?php get_header(); ?>

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
                <h2 class="entry-title">
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                </h2>
                <div class="entry-meta">
                    <?php
                    printf(
                        'Veröffentlicht am %1$s von %2$s',
                        '<time datetime="' . esc_attr( get_the_date( 'c' ) ) . '">' . esc_html( get_the_date() ) . '</time>',
                        '<span class="author">' . esc_html( get_the_author() ) . '</span>'
                    );
                    ?>
                </div>
            </header>

            <div class="entry-content">
                <?php
                if ( is_singular() ) :
                    the_content();
                else :
                    the_excerpt();
                endif;
                ?>
            </div>
        </article>
        <?php
    endwhile;

    the_posts_pagination();

else :
    ?>
    <p>Keine Beiträge gefunden.</p>
    <?php
endif;
?>

<?php get_footer(); ?>

Die Template-Funktionen:

  • get_header(): Bindet header.php ein
  • get_footer(): Bindet footer.php ein
  • get_sidebar(): Bindet sidebar.php ein
  • get_template_part( 'name' ): Bindet custom Template-Parts ein

functions.php und erweiterte Funktionen

Die functions.php ist das Kontrollzentrum deines Themes. Hier registrierst du Features, lädst Scripts und Styles, und definierst eigene Funktionen. Diese Datei ist optional, aber in der Praxis wirst du sie immer benötigen.

Grundgerüst der functions.php erstellen

Damit dein WordPress-Theme korrekt funktioniert, brauchst du ein solides Fundament – und das beginnt mit der functions.php. In dieser Datei aktivierst du wichtige Theme-Funktionen wie Menüs, Beitragsbilder oder HTML5-Unterstützung. Sobald das Grundgerüst steht, kannst du dein Theme Schritt für Schritt professioneller und flexibler gestalten.

php

<?php
/**
 * Mein Erstes Theme Functions
 *
 * @package Mein_Erstes_Theme
 */

// Direkten Zugriff verhindern (Security Best Practice)
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Theme Setup
 */
function mein_theme_setup() {
    
    // Theme-Unterstützung für verschiedene Features aktivieren
    
    // Automatische Feed-Links
    add_theme_support( 'automatic-feed-links' );
    
    // Dynamischen Title-Tag
    add_theme_support( 'title-tag' );
    
    // Beitragsbilder (Featured Images)
    add_theme_support( 'post-thumbnails' );
    
    // Benutzerdefinierte Bildgrößen
    add_image_size( 'mein-theme-featured', 1200, 600, true );
    add_image_size( 'mein-theme-thumbnail', 400, 300, true );
    
    // HTML5-Markup für bestimmte Features
    add_theme_support(
        'html5',
        array(
            'search-form',
            'comment-form',
            'comment-list',
            'gallery',
            'caption',
            'style',
            'script',
        )
    );
    
    // Custom Logo
    add_theme_support(
        'custom-logo',
        array(
            'height'      => 100,
            'width'       => 400,
            'flex-height' => true,
            'flex-width'  => true,
        )
    );
    
    // Navigationsmenü registrieren
    register_nav_menus(
        array(
            'menu-1' => esc_html__( 'Hauptmenü', 'mein-erstes-theme' ),
            'footer-menu' => esc_html__( 'Footer-Menü', 'mein-erstes-theme' ),
        )
    );
    
}
add_action( 'after_setup_theme', 'mein_theme_setup' );

Wichtige Theme-Support-Features:

  • automatic-feed-links: RSS-Feed-Links
  • title-tag: WordPress steuert den <title>-Tag
  • post-thumbnails: Beitragsbilder aktivieren
  • html5: Moderne HTML5-Markup-Unterstützung
  • custom-logo: Logo-Upload im Customizer
  • custom-background: Hintergrund anpassbar
  • custom-header: Header-Bild anpassbar
  • align-wide: Gutenberg Wide/Full Width Unterstützung

Stylesheets und JavaScript richtig laden

Niemals solltest du Styles und Scripts direkt im HTML einbinden (z.B. mit <link> oder <script>-Tags). WordPress hat dafür ein eigenes System, das Konflikte verhindert und Ladezeiten optimiert.

Füge diesen Code zu deiner functions.php hinzu:

php

/**
 * Styles und Scripts laden
 */
function mein_theme_scripts() {
    
    // Haupt-Stylesheet
    wp_enqueue_style(
        'mein-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
    
    // Zusätzliches Stylesheet (optional)
    wp_enqueue_style(
        'mein-theme-custom',
        get_template_directory_uri() . '/css/custom.css',
        array( 'mein-theme-style' ),
        '1.0.0'
    );
    
    // JavaScript für Navigation
    wp_enqueue_script(
        'mein-theme-navigation',
        get_template_directory_uri() . '/js/navigation.js',
        array(),
        '1.0.0',
        true // Im Footer laden
    );
    
    // jQuery ist bereits in WordPress enthalten
    // Wenn du es brauchst, einfach als Dependency angeben:
    wp_enqueue_script(
        'mein-theme-scripts',
        get_template_directory_uri() . '/js/scripts.js',
        array( 'jquery' ),
        '1.0.0',
        true
    );
    
    // Comment-Reply Script (nur wenn nötig)
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
    
}
add_action( 'wp_enqueue_scripts', 'mein_theme_scripts' );

Parameter von wp_enqueue_style() und wp_enqueue_script():

  1. Handle: Eindeutiger Name für die Datei
  2. Source: Pfad zur Datei
  3. Dependencies: Array von Abhängigkeiten (andere Scripts/Styles, die zuerst geladen werden müssen)
  4. Version: Versionsnummer (wichtig für Browser-Caching)
  5. Media/In Footer: Bei Styles: Media-Type (z.B. 'screen'); Bei Scripts: true = im Footer laden

Nützliche WordPress-Funktionen:

  • get_stylesheet_uri(): URL zur style.css
  • get_template_directory_uri(): URL zum Theme-Ordner
  • get_stylesheet_directory_uri(): URL zum aktuellen Theme (wichtig für Child Themes)

Widget-Bereiche (Sidebars) registrieren

Auch wenn sie "Sidebar" heißen – Widget-Bereiche können überall platziert werden: Im Header, Footer, in der Seitenleiste oder mitten im Content.

php

/**
 * Widget-Bereiche registrieren
 */
function mein_theme_widgets_init() {
    
    register_sidebar(
        array(
            'name'          => esc_html__( 'Sidebar', 'mein-erstes-theme' ),
            'id'            => 'sidebar-1',
            'description'   => esc_html__( 'Haupt-Sidebar für Blog-Seiten', 'mein-erstes-theme' ),
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        )
    );
    
    // Footer-Widget-Bereiche
    register_sidebar(
        array(
            'name'          => esc_html__( 'Footer Spalte 1', 'mein-erstes-theme' ),
            'id'            => 'footer-1',
            'description'   => esc_html__( 'Erste Footer-Spalte', 'mein-erstes-theme' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
    
}
add_action( 'widgets_init', 'mein_theme_widgets_init' );

Widget-Bereich im Template ausgeben:

Erstelle eine sidebar.php:

php

/**
 * Widget-Bereiche registrieren
 */
function mein_theme_widgets_init() {
    
    register_sidebar(
        array(
            'name'          => esc_html__( 'Sidebar', 'mein-erstes-theme' ),
            'id'            => 'sidebar-1',
            'description'   => esc_html__( 'Haupt-Sidebar für Blog-Seiten', 'mein-erstes-theme' ),
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        )
    );
    
    // Footer-Widget-Bereiche
    register_sidebar(
        array(
            'name'          => esc_html__( 'Footer Spalte 1', 'mein-erstes-theme' ),
            'id'            => 'footer-1',
            'description'   => esc_html__( 'Erste Footer-Spalte', 'mein-erstes-theme' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
    
}
add_action( 'widgets_init', 'mein_theme_widgets_init' );

Weitere nützliche Funktionen für dein Theme

Excerpt-Länge anpassen:

php

<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
    return;
}
?>

<aside id="secondary" class="widget-area">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>

Excerpt "Weiterlesen"-Text ändern:

php

function mein_theme_excerpt_more( $more ) {
    return '... <a href="' . get_permalink() . '" class="read-more">Weiterlesen</a>';
}
add_filter( 'excerpt_more', 'mein_theme_excerpt_more' );

Body-Klassen hinzufügen:

php

function mein_theme_body_classes( $classes ) {
    if ( is_singular() ) {
        $classes[] = 'singular-page';
    }
    return $classes;
}
add_filter( 'body_class', 'mein_theme_body_classes' );

Wichtiger Hinweis zu Theme vs. Plugin

Eine goldene Regel beim WordPress Theme Erstellen: Funktionalität, die beim Theme-Wechsel erhalten bleiben soll, gehört NICHT in die functions.php!

In die functions.php gehören:

  • Design-bezogene Funktionen
  • Theme-spezifische Features
  • Widget-Bereiche
  • Menü-Positionen
  • Bildgrößen

In ein Plugin gehören:

  • Custom Post Types
  • Geschäftslogik
  • API-Integrationen
  • Shortcodes (wenn nicht rein Design-bezogen)
  • Admin-Funktionen

Wenn du oder deine Nutzer das Theme wechseln, sollten keine wichtigen Funktionen verloren gehen!

WordPress Child Theme erstellen

Ein Child Theme ist ein Theme, das von einem anderen Theme (dem "Parent Theme") erbt. Das ist extrem nützlich, wenn du ein bestehendes Theme anpassen möchtest, ohne den Original-Code zu verändern. So bleiben deine Änderungen auch nach Theme-Updates erhalten.

Wann solltest du ein Child Theme erstellen?

Ein Child Theme ist perfekt, wenn du:

  • Ein Premium-Theme gekauft hast und es anpassen möchtest
  • Ein populäres Theme wie Astra, GeneratePress oder Twenty Twenty-Three verwendest
  • Nur kleine Anpassungen an einem bestehenden Theme vornehmen willst
  • Das Parent Theme regelmäßig Updates erhält, die du nicht verlieren möchtest

Ein eigenes Theme von Grund auf ist besser, wenn du:

  • Vollständige Kontrolle über jeden Aspekt willst
  • Ein komplett individuelles Design planst
  • Das Theme für Kunden oder zum Verkauf entwickelst
  • Performance durch minimalen Code optimieren möchtest

Child Theme Schritt für Schritt erstellen

Schritt 1: Child Theme Ordner anlegen

Erstelle im Verzeichnis wp-content/themes/ einen neuen Ordner:

/wp-content/themes/twentytwentythree-child/

Naming Convention:

  • Verwende den Namen des Parent Themes
  • Füge -child hinzu
  • Beispiele: astra-child, generatepress-child, divi-child
Schritt 2: style.css für das Child Theme

Erstelle in deinem Child Theme Ordner eine style.css:

css

/*
Theme Name:   Twenty Twenty-Three Child
Theme URI:    https://deine-website.de/
Description:  Child Theme für Twenty Twenty-Three
Author:       Dein Name
Author URI:   https://deine-website.de
Template:     twentytwentythree
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentytwentythree-child
*/

/* ==========================================================================
   Hier kommen deine individuellen CSS-Anpassungen
   ========================================================================== */

/* Beispiel: Header-Anpassung */
.site-header {
    background-color: #f0f0f0;
    padding: 30px 0;
}

/* Beispiel: Schriftart ändern */
body {
    font-family: 'Georgia', serif;
}

/* Beispiel: Link-Farben */
a {
    color: #0066cc;
}

a:hover {
    color: #003366;
}

Wichtig: Das Feld Template: muss exakt dem Ordnernamen des Parent Themes entsprechen!

Schritt 3: functions.php für das Child Theme

Anders als die style.css wird die functions.php des Child Themes nicht automatisch geladen. Du musst das Parent-Theme-Stylesheet manuell einbinden.

Erstelle functions.php im Child Theme:

php

<?php
/**
 * Child Theme Functions
 */

// Direkten Zugriff verhindern
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Styles des Parent und Child Themes laden
 */
function twentytwentythree_child_enqueue_styles() {
    
    // Parent Theme Stylesheet
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css',
        array(),
        wp_get_theme()->parent()->get( 'Version' )
    );
    
    // Child Theme Stylesheet (wird nach dem Parent geladen)
    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
    
}
add_action( 'wp_enqueue_scripts', 'twentytwentythree_child_enqueue_styles' );

/**
 * Ab hier kommen deine eigenen Funktionen
 */

// Beispiel: Eigene Bildgröße hinzufügen
add_image_size( 'child-custom-size', 800, 600, true );

// Beispiel: Excerpt-Länge ändern
function twentytwentythree_child_excerpt_length( $length ) {
    return 25;
}
add_filter( 'excerpt_length', 'twentytwentythree_child_excerpt_length', 999 );

Wichtige Funktionen für Child Themes:

  • get_template_directory_uri(): URL zum Parent Theme
  • get_stylesheet_directory_uri(): URL zum Child Theme (oder aktiven Theme)
  • get_template_directory(): Dateipfad zum Parent Theme
  • get_stylesheet_directory(): Dateipfad zum Child Theme
Schritt 4: Child Theme aktivieren
  1. Gehe zu Design → Themes im WordPress-Backend
  2. Du solltest jetzt dein Child Theme sehen
  3. Klicke auf Aktivieren

Fertig! Dein Child Theme ist jetzt aktiv und erbt alle Templates und Funktionen vom Parent Theme.

Templates im Child Theme überschreiben

Das Geniale an Child Themes: Du kannst einzelne Template-Dateien des Parent Themes überschreiben, indem du sie einfach im Child Theme erstellst.

Beispiel: header.php anpassen

  1. Kopiere die header.php aus dem Parent Theme
  2. Füge sie in deinen Child Theme Ordner ein
  3. Passe sie nach deinen Wünschen an

WordPress wird automatisch die Version aus dem Child Theme verwenden!

Das funktioniert mit allen Template-Dateien:

  • header.php
  • footer.php
  • single.php
  • page.php
  • archive.php
  • Und alle anderen Templates

Tipp: Überschreibe nur die Dateien, die du wirklich ändern musst. So bleiben deine Updates übersichtlich.

Template-Parts überschreiben

Viele moderne Themes nutzen Template-Parts (kleine wiederverwendbare Template-Schnipsel). Auch diese kannst du überschreiben.

Beispiel-Struktur eines Parent Themes:

/twentytwentythree/
  /template-parts/
    /content/
      content-single.php
      content-page.php

Im Child Theme überschreiben:

/twentytwentythree-child/
  /template-parts/
    /content/
      content-single.php  ← Deine angepasste Version

Funktionen im Child Theme ändern

Wenn du eine Funktion aus dem Parent Theme ändern möchtest, kannst du sie im Child Theme einfach neu definieren – wenn sie "pluggable" ist (d.h. mit if ( ! function_exists() ) umschlossen).

Parent Theme functions.php:

php

if ( ! function_exists( 'parent_theme_setup' ) ) {
    function parent_theme_setup() {
        // Original-Code
    }
}

Child Theme functions.php:

php

function parent_theme_setup() {
    // Deine angepasste Version
    // Wird verwendet, da das Child Theme zuerst geladen wird
}

Child Theme Best Practices

DO's:

  • Nur Änderungen im Child Theme, nicht im Parent Theme
  • Kommentiere deine Anpassungen
  • Versioniere dein Child Theme (Git)
  • Teste nach jedem Parent Theme Update
  • Nutze get_stylesheet_directory_uri() für Child Theme Assets

DON'Ts:

  • Niemals das Parent Theme direkt bearbeiten
  • Keine unnötigen Dateien kopieren (nur was du änderst)
  • Keine wichtigen Funktionen nur im Child Theme (lieber als Plugin)

Responsive WordPress Theme erstellen

Im Jahr 2025 ist responsive Design kein "Nice-to-have" mehr, sondern absolute Pflicht. Über 60% der Website-Besuche erfolgen über mobile Geräte. Ein responsives WordPress Theme passt sich automatisch an verschiedene Bildschirmgrößen an.

Mobile-First Ansatz

Der moderne Standard ist Mobile-First Design: Du designst zuerst für kleine Bildschirme und erweiterst dann für größere Geräte.

Vorteile von Mobile-First:

  • Fokus auf das Wesentliche
  • Bessere Performance auf mobilen Geräten
  • Erzwingt klare Content-Hierarchie
  • Einfacher zu optimieren

Viewport Meta-Tag – Der Startpunkt

Das Erste, was du für ein responsives Theme brauchst, ist der Viewport Meta-Tag im <head>:

html

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

Dieser gehört in deine header.php (was du ja bereits hast, wenn du den obigen Schritten gefolgt bist).

Was macht dieser Tag?

  • width=device-width: Viewport-Breite = Gerätebreite
  • initial-scale=1: Kein initialer Zoom

Media Queries – Das Werkzeug für responsives CSS

Media Queries ermöglichen es dir, CSS-Regeln abhängig von der Bildschirmgröße zu definieren.

Mobile-First Beispiel in deiner style.css:

css

/* ==========================================================================
   Basis-Styles (Mobile First - gilt für alle Geräte)
   ========================================================================== */

body {
    font-size: 16px;
    line-height: 1.6;
    padding: 0 15px;
}

.site-header {
    padding: 20px 0;
}

.site-content {
    padding: 20px 0;
}

/* Navigation: Mobile Hamburger-Menü */
.main-navigation ul {
    display: none; /* Standardmäßig versteckt auf Mobile */
    flex-direction: column;
}

.main-navigation.toggled ul {
    display: flex;
}

.menu-toggle {
    display: block;
    background: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

/* Ein-spaltig auf Mobile */
.content-area {
    width: 100%;
}

.widget-area {
    width: 100%;
    margin-top: 40px;
}

/* ==========================================================================
   Tablets (ab 768px)
   ========================================================================== */

@media screen and (min-width: 768px) {
    
    body {
        font-size: 18px;
        padding: 0 30px;
    }
    
    .site-header {
        padding: 30px 0;
    }
    
    /* Navigation wird horizontal */
    .menu-toggle {
        display: none;
    }
    
    .main-navigation ul {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }
    
    /* Zwei-Spalten-Layout */
    .site-content {
        display: flex;
        gap: 40px;
    }
    
    .content-area {
        width: 65%;
    }
    
    .widget-area {
        width: 35%;
        margin-top: 0;
    }
    
}

/* ==========================================================================
   Desktop (ab 1024px)
   ========================================================================== */

@media screen and (min-width: 1024px) {
    
    .site {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .site-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .entry-content {
        font-size: 19px;
        line-height: 1.8;
    }
    
}

/* ==========================================================================
   Large Desktop (ab 1400px)
   ========================================================================== */

@media screen and (min-width: 1400px) {
    
    .site {
        max-width: 1400px;
    }
    
    .site-content {
        padding: 60px 0;
    }
    
}

Standard Breakpoints (Richtwerte):

  • Mobile: 320px - 767px (Basis, keine Media Query nötig)
  • Tablet: 768px - 1023px
  • Desktop: 1024px - 1439px
  • Large Desktop: 1440px+

Flexbox und CSS Grid für responsive Layouts

Moderne CSS-Techniken machen responsive Design deutlich einfacher:

Flexbox für flexible Ein-Zeilen-Layouts:

css

/* Responsive Navigation mit Flexbox */
.main-navigation ul {
    display: flex;
    flex-wrap: wrap; /* Umbrechen bei Platzmangel */
    gap: 20px;
    justify-content: center;
}

/* Flexible Content-Cards */
.post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.post-grid article {
    flex: 1 1 300px; /* Wächst und schrumpft, Minimum 300px */
}

CSS Grid für komplexe Layouts:

css

/* Responsive Grid-Layout */
.widget-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

/* Two-Column Layout mit Grid */
.site-content {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: Eine Spalte */
    gap: 40px;
}

@media screen and (min-width: 768px) {
    .site-content {
        grid-template-columns: 2fr 1fr; /* Desktop: 2:1 Verhältnis */
    }
}

Responsive Bilder

Bilder sind oft der größte Performance-Killer auf mobilen Geräten. WordPress hat dafür eingebaute Lösungen.

Responsive Images in Templates:

php

<?php
if ( has_post_thumbnail() ) :
    the_post_thumbnail( 'large', array(
        'class' => 'responsive-image',
        'loading' => 'lazy', // Lazy Loading
    ) );
endif;
?>

CSS für responsive Bilder:

css

/* Bilder nie größer als Container */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive Featured Images */
.post-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

Verschiedene Bildgrößen in functions.php definieren:

php

// In functions.php
function mein_theme_image_sizes() {
    add_image_size( 'mobile-featured', 600, 400, true );
    add_image_size( 'tablet-featured', 900, 600, true );
    add_image_size( 'desktop-featured', 1200, 800, true );
}
add_action( 'after_setup_theme', 'mein_theme_image_sizes' );

Mobile Navigation mit Hamburger-Menü

Ein klassisches Problem: Die Navigation passt nicht auf kleine Bildschirme. Die Lösung: Ein Hamburger-Menü.

JavaScript für Mobile Navigation (navigation.js):

javascript

/**
 * Mobile Navigation Toggle
 */
(function() {
    
    const siteNavigation = document.getElementById('site-navigation');
    
    if (!siteNavigation) {
        return;
    }
    
    const button = document.createElement('button');
    button.className = 'menu-toggle';
    button.setAttribute('aria-expanded', 'false');
    button.innerHTML = '<span class="screen-reader-text">Menü</span><span class="menu-icon"></span>';
    
    // Button vor Navigation einfügen
    siteNavigation.parentNode.insertBefore(button, siteNavigation);
    
    // Toggle-Funktion
    button.addEventListener('click', function() {
        const expanded = button.getAttribute('aria-expanded') === 'true';
        button.setAttribute('aria-expanded', !expanded);
        siteNavigation.classList.toggle('toggled');
    });
    
})();

CSS für Hamburger-Icon:

css

/* Hamburger-Icon */
.menu-toggle {
    display: block;
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pinter;
}

.menu-icon {
    display: block;
    width: 30px;
    height: 3px;
    background: #333;
    position: relative;
}

.menu-icon::before,
.menu-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #333;
    left: 0;
    transition: 0.3s;
}

.menu-icon::before {
    top: -8px;
}

.menu-icon::after {
    bottom: -8px;
}

/* Animation wenn Menü geöffnet */
[aria-expanded="true"] .menu-icon {
    background: transparent;
}

[aria-expanded="true"] .menu-icon::before {
    transform: rotate(45deg);
    top: 0;
}

[aria-expanded="true"] .menu-icon::after {
    transform: rotate(-45deg);
    bottom: 0;
}

/* Desktop: Button verstecken */
@media screen and (min-width: 768px) {
    .menu-toggle {
        display: none;
    }
}

WordPress Bootstrap Theme erstellen

Viele Entwickler nutzen Bootstrap, um schneller responsive Themes zu erstellen. Bootstrap ist ein CSS-Framework mit vorgefertigten Komponenten und einem Grid-System.

Bootstrap in WordPress einbinden:

php

// In functions.php
function mein_theme_bootstrap_scripts() {
    
    // Bootstrap CSS
    wp_enqueue_style(
        'bootstrap',
        'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
        array(),
        '5.3.0'
    );
    
    // Bootstrap JavaScript
    wp_enqueue_script(
        'bootstrap-bundle',
        'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js',
        array(),
        '5.3.0',
        true
    );
    
    // Dein Custom CSS (nach Bootstrap laden!)
    wp_enqueue_style(
        'mein-theme-style',
        get_stylesheet_uri(),
        array('bootstrap'),
        '1.0.0'
    );
    
}
add_action('wp_enqueue_scripts', 'mein_theme_bootstrap_scripts');

Bootstrap Grid in WordPress Templates verwenden:

php

<!-- header.php mit Bootstrap -->
<header class="site-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="site-title">
                    <a href="<?php echo esc_url(home_url('/')); ?>">
                        <?php bloginfo('name'); ?>
                    </a>
                </h1>
            </div>
            <div class="col-md-6">
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'menu-1',
                    'menu_class' => 'nav justify-content-end',
                ));
                ?>
            </div>
        </div>
    </div>
</header>

<!-- Content mit Bootstrap Grid -->
<div class="container">
    <div class="row">
        <main class="col-lg-8 col-md-12">
            <?php
            while (have_posts()) : the_post();
                ?>
                <article class="card mb-4">
                    <div class="card-body">
                        <h2 class="card-title">
                            <?php the_title(); ?>
                        </h2>
                        <div class="card-text">
                            <?php the_content(); ?>
                        </div>
                    </div>
                </article>
                <?php
            endwhile;
            ?>
        </main>
        
        <aside class="col-lg-4 col-md-12">
            <?php get_sidebar(); ?>
        </aside>
    </div>
</div>

Responsive Testing

Damit dein WordPress-Design auf jedem Gerät professionell aussieht, ist responsive Testing unverzichtbar. Du prüfst damit, wie sich deine Seite auf Smartphones, Tablets und Desktop verhält – und ob Benutzer wirklich gut damit umgehen können. Mit ein paar einfachen Tools erkennst du sofort, wo es hakt – und kannst gezielt optimieren.

Browser DevTools:

  • Chrome/Firefox: F12 → Responsive Design Mode
  • Teste verschiedene Geräte (iPhone, iPad, Android)
  • Achte auf Touch-Targets (mindestens 44×44 Pixel)

Online Tools:

  • BrowserStack: Echte Geräte testen
  • Responsinator: Schnelle Vorschau
  • Google Mobile-Friendly Test

Performance-Check:

  • Google PageSpeed Insights
  • GTmetrix
  • WebPageTest

Gutenberg-Editor Integration

Seit WordPress 5.0 (Ende 2018) ist Gutenberg der Standard-Editor. Wenn du ein WordPress Theme erstellen willst, musst du Gutenberg-Unterstützung einplanen. Gutenberg basiert auf "Blocks" – modularen Content-Elementen, die Redakteure flexibel kombinieren können.

Grundlegende Gutenberg-Unterstützung aktivieren

In deiner functions.php:

php

/**
 * Gutenberg-Features aktivieren
 */
function mein_theme_gutenberg_support() {
    
    // Wide und Full Width Blöcke
    add_theme_support('align-wide');
    
    // Responsive Embeds
    add_theme_support('responsive-embeds');
    
    // Editor-Styles
    add_theme_support('editor-styles');
    
    // Eigenes Stylesheet für den Editor
    add_editor_style('editor-style.css');
    
    // Block-Styles
    add_theme_support('wp-block-styles');
    
}
add_action('after_setup_theme', 'mein_theme_gutenberg_support');

Editor-Styles – WYSIWYG im Backend

Damit Redakteure im Backend sehen, wie ihr Content aussehen wird, brauchst du Editor-Styles.

Erstelle editor-style.css:

css

/*
 * Editor-Styles für Gutenberg
 * Sollten die Frontend-Styles widerspiegeln
 */

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

/* Editor Container-Breite */
.editor-styles-wrapper {
    max-width: 800px;
    padding: 0 20px;
}

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }

/* Absätze */
p {
    margin-bottom: 1.5em;
}

/* Links */
a {
    color: #0073aa;
    text-decoration: underline;
}

/* Zitate */
blockquote {
    border-left: 4px solid #0073aa;
    padding-left: 20px;
    font-style: italic;
    color: #666;
}

/* Code */
code {
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

pre {
    background: #f5f5f5;
    padding: 20px;
    overflow-x: auto;
}

/* Buttons */
.wp-block-button__link {
    background-color: #0073aa;
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
}

/* Wide und Full Width */
.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    max-width: 100%;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

Theme-Farbpalette definieren

Gib Redakteuren eine definierte Farbpalette vor, die zu deinem Design passt:

php

/**
 * Custom Farbpalette für Gutenberg
 */
function mein_theme_editor_color_palette() {
    
    add_theme_support('editor-color-palette', array(
        array(
            'name'  => __('Primärfarbe', 'mein-erstes-theme'),
            'slug'  => 'primary',
            'color' => '#0073aa',
        ),
        array(
            'name'  => __('Sekundärfarbe', 'mein-erstes-theme'),
            'slug'  => 'secondary',
            'color' => '#005177',
        ),
        array(
            'name'  => __('Akzentfarbe', 'mein-erstes-theme'),
            'slug'  => 'accent',
            'color' => '#ff6900',
        ),
        array(
            'name'  => __('Dunkelgrau', 'mein-erstes-theme'),
            'slug'  => 'dark-gray',
            'color' => '#333333',
        ),
        array(
            'name'  => __('Hellgrau', 'mein-erstes-theme'),
            'slug'  => 'light-gray',
            'color' => '#f5f5f5',
        ),
        array(
            'name'  => __('Weiß', 'mein-erstes-theme'),
            'slug'  => 'white',
            'color' => '#ffffff',
        ),
    ));
    
}
add_action('after_setup_theme', 'mein_theme_editor_color_palette');

Schriftgrößen definieren

php

/**
 * Custom Schriftgrößen für Gutenberg
 */
function mein_theme_editor_font_sizes() {
    
    add_theme_support('editor-font-sizes', array(
        array(
            'name' => __('Klein', 'mein-erstes-theme'),
            'size' => 14,
            'slug' => 'small'
        ),
        array(
            'name' => __('Normal', 'mein-erstes-theme'),
            'size' => 18,
            'slug' => 'normal'
        ),
        array(
            'name' => __('Mittel', 'mein-erstes-theme'),
            'size' => 24,
            'slug' => 'medium'
        ),
        array(
            'name' => __('Groß', 'mein-erstes-theme'),
            'slug' => 'large',
            'size' => 32,
        ),
        array(
            'name' => __('Sehr groß', 'mein-erstes-theme'),
            'slug' => 'huge',
            'size' => 48,
        ),
    ));
    
    // Verhindert, dass Nutzer eigene Werte eingeben können (optional)
    add_theme_support('disable-custom-font-sizes');
    
}
add_action('after_setup_theme', 'mein_theme_editor_font_sizes');

Block-Styles stylen

Gutenberg-Blöcke haben spezifische CSS-Klassen, die du stylen solltest:

css

/* ==========================================================================
   Gutenberg Block Styles
   ========================================================================== */

/* Paragraph Block */
.wp-block-paragraph {
    margin-bottom: 1.5em;
}

/* Überschriften */
.wp-block-heading {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* Quote Block */
.wp-block-quote {
    border-left: 4px solid #0073aa;
    padding-left: 20px;
    margin: 2em 0;
}

.wp-block-quote cite {
    color: #666;
    font-size: 0.9em;
}

/* Pull Quote */
.wp-block-pullquote {
    border-top: 4px solid #0073aa;
    border-bottom: 4px solid #0073aa;
    padding: 2em 0;
    text-align: center;
    font-size: 1.5em;
}

/* Code Block */
.wp-block-code {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    overflow-x: auto;
}

/* Button Block */
.wp-block-button__link {
    background-color: #0073aa;
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s;
}

.wp-block-button__link:hover {
    background-color: #005177;
    color: #fff;
}

/* Image Block */
.wp-block-image {
    margin: 2em 0;
}

.wp-block-image img {
    max-width: 100%;
    height: auto;
}

.wp-block-image figcaption {
    text-align: center;
    color: #666;
    font-size: 0.9em;
    margin-top: 0.5em;
}

/* Gallery Block */
.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Cover Block */
.wp-block-cover {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

/* Columns Block */
.wp-block-columns {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.wp-block-column {
    flex: 1;
    min-width: 0;
}

@media screen and (max-width: 768px) {
    .wp-block-columns {
        flex-direction: column;
    }
}

/* Separator Block */
.wp-block-separator {
    border: none;
    border-top: 2px solid #ddd;
    margin: 3em auto;
    max-width: 100px;
}

/* Table Block */
.wp-block-table {
    width: 100%;
    overflow-x: auto;
}

.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
}

.wp-block-table td,
.wp-block-table th {
    padding: 10px;
    border: 1px solid #ddd;
}

.wp-block-table th {
    background: #f5f5f5;
    font-weight: bold;
}

Custom Blocks erstellen (für Fortgeschrittene)

Wenn du eigene Gutenberg-Blöcke erstellen möchtest, brauchst du JavaScript (React) Kenntnisse. Hier ein einfaches Beispiel:

block.js:

const { registerBlockType } = wp.blocks;
const { RichText } = wp.blockEditor;

registerBlockType('mein-theme/custom-box', {
    title: 'Custom Box',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p'
        }
    },
    edit: ({ attributes, setAttributes }) => {
        return (
            <div className="custom-box">
                <RichText
                    tagName="p"
                    value={attributes.content}
                    onChange={(content) => setAttributes({ content })}
                    placeholder="Text eingeben..."
                />
            </div>
        );
    },
    save: ({ attributes }) => {
        return (
            <div className="custom-box">
                <RichText.Content tagName="p" value={attributes.content} />
            </div>
        );
    }
});

Block in functions.php registrieren:

php

function mein_theme_register_block() {
    wp_register_script(
        'mein-theme-block',
        get_template_directory_uri() . '/js/block.js',
        array('wp-blocks', 'wp-element', 'wp-editor'),
        '1.0.0'
    );
    
    register_block_type('mein-theme/custom-box', array(
        'editor_script' => 'mein-theme-block',
    ));
}
add_action('init', 'mein_theme_register_block');

Tools und Software für die Theme-Entwicklung

Beim WordPress Theme Erstellen kannst du auf zahlreiche hilfreiche Tools zurückgreifen, die dir die Arbeit erheblich erleichtern.

Starter-Themes – Die Abkürzung zum fertigen Theme

Statt von Null anzufangen, kannst du auf Starter-Themes aufbauen. Das sind minimale, gut strukturierte Themes, die als Basis dienen.

Underscores (_s) – Der WordPress-Standard

Underscores (auch "_s" genannt) ist das offizielle Starter-Theme von Automattic (den Machern von WordPress).

Vorteile:

  • Von WordPress-Entwicklern erstellt
  • Sauberer, kommentierter Code
  • Alle wichtigen Templates enthalten
  • Modern und best-practice-konform
  • Regelmäßig aktualisiert

So nutzt du Underscores:

  1. Besuche https://underscores.me/
  2. Gib deinen Theme-Namen ein (z.B. "Mein Custom Theme")
  3. Optional: Erweiterte Optionen (Sass, WooCommerce-Support)
  4. Klicke auf "Generate"
  5. Lade das ZIP herunter und entpacke es in /wp-content/themes/

Was du bekommst:

  • Vollständige Template-Hierarchie
  • functions.php mit allen wichtigen Features
  • Saubere CSS-Struktur (optional mit Sass)
  • Responsive Basis-Styles
  • Accessibility-Features

Perfekt für:

  • Anfänger, die Struktur lernen wollen
  • Profis, die schnell starten wollen
  • Jeder, der WordPress-Standards folgen möchte
Weitere beliebte Starter-Themes

Sage (by Roots)

WP Rig

Bones

Theme-Builder und Visual Editors

Wenn du ein WordPress Theme erstellen möchtest ohne Programmierkenntnisse, gibt es auch No-Code-Lösungen:

GeneratePress + GenerateBlocks
Kadence Theme
Blocksy

Wichtig: Diese Tools erstellen keine individuellen Theme-Dateien, die du verteilen kannst. Sie sind eher für den eigenen Gebrauch gedacht.

Development-Tools

Local Development:

Code Editoren:

  • VS Code (empfohlen): Mit Extensions wie PHP Intelephense, WordPress Snippets
  • PHPStorm: Professionelle IDE, kostenpflichtig aber mächtig
  • Sublime Text: Schnell und elegant

Version Control:

  • Git: Unverzichtbar für ernsthafte Entwicklung
  • GitHub/GitLab: Code-Hosting und Zusammenarbeit
  • .gitignore für WordPress: Schließe wp-content/uploads, node_modules etc. aus

Build-Tools (für Fortgeschrittene):

  • Webpack: Module Bundler
  • Gulp: Task Automation
  • Sass/SCSS: CSS-Präprozessor
  • npm: Package Manager

Debugging und Testing

Browser Developer Tools:

  • Chrome DevTools (F12)
  • Firefox Developer Edition
  • Safari Web Inspector

WordPress Debug Plugins:

Performance Testing:

Accessibility Testing:

Theme-Check und Validierung

Wenn du dein Theme öffentlich verteilen möchtest (z.B. auf WordPress.org), muss es bestimmte Standards erfüllen.

Theme Check Plugin:

1. Installiere das "Theme Check" Plugin
2. Gehe zu Design → Theme Check
3. Wähle dein Theme und klicke "Check it!"
4. Behebe alle Fehler und Warnungen

Wichtige Prüfungen:

  • Fehlende Template-Tags (wp_head, wp_footer)
  • Veraltete Funktionen
  • Security-Issues
  • Accessibility-Probleme
  • Coding-Standards

Online Validatoren:

  • W3C HTML Validator
  • W3C CSS Validator
  • WordPress Coding Standards (WPCS) mit PHP_CodeSniffer

WordPress Codex und Dokumentation

Offizielle Ressourcen:

  • WordPress Developer Handbook: developer.wordpress.org/themes/
  • WordPress Codex: codex.wordpress.org
  • Theme Handbook: Speziell für Theme-Entwicklung
  • Code Reference: developer.wordpress.org/reference/

Community und Support:

  • WordPress.org Forums: Fragen stellen
  • WordPress Stack Exchange: Q&A-Format
  • WordPress Slack: Echtzeit-Chat
  • WordPress Meetups: Lokale Events

Willst du dein Theme auf echtem Server testen? GoDaddy Hosting = Staging inklusive!

Starte jetzt dein WordPress Hosting & teste dein Theme live!

Häufige Fehler und Troubleshooting

Beim WordPress Theme Erstellen läuft nicht immer alles glatt. Hier sind die häufigsten Probleme und ihre Lösungen.

Problem: "Parse Error" oder "Syntax Error"

Symptome:

  • White Screen of Death (leere weiße Seite)
  • Fehlermeldung mit Dateipfad und Zeilennummer

Ursachen:

  • Vergessenes Semikolon
  • Nicht geschlossene Klammern oder Anführungszeichen
  • PHP-Syntaxfehler

Lösung:

  1. Aktiviere WP_DEBUG (siehe oben)
  2. Prüfe die angegebene Datei und Zeile
  3. Nutze einen Code-Editor mit Syntax-Highlighting
  4. Im Notfall: Benenne die fehlerhafte Datei um (z.B. functions.php.bak) und greife per FTP zu

Problem: Theme erscheint nicht in der Theme-Auswahl

Ursachen:

  • style.css fehlt oder ist falsch benannt
  • Theme-Header in style.css fehlt oder ist fehlerhaft
  • Theme-Ordner nicht im richtigen Verzeichnis

Lösung:

  1. Prüfe, ob style.css existiert und korrekt benannt ist
  2. Prüfe den Theme-Header (mindestens "Theme Name:" ist Pflicht)
  3. Stelle sicher, dass der Theme-Ordner direkt in /wp-content/themes/ liegt

Problem: Styles werden nicht geladen

Ursachen:

  • Stylesheet falsch eingebunden
  • wp_head() fehlt in header.php
  • CSS-Cache im Browser

Lösung:

  1. Prüfe, ob wp_enqueue_style() korrekt ist
  2. Stelle sicher, dass <?php wp_head(); ?> im <head> steht
  3. Leere Browser-Cache (Strg+Shift+R)
  4. Prüfe Dateipfad: Nutze get_stylesheet_uri() oder get_template_directory_uri()

Problem: JavaScript funktioniert nicht

Ursachen:

  • Script falsch eingebunden
  • wp_footer() fehlt
  • jQuery-Konflikte

Lösung:

  1. Prüfe wp_enqueue_script() Syntax
  2. Stelle sicher, dass <?php wp_footer(); ?> vor </body> steht
  3. Bei jQuery: Nutze wp_enqueue_script('jquery') – nicht manuell einbinden
  4. Prüfe Browser-Console auf JavaScript-Fehler (F12)

Ursache:

  • post-thumbnails Support nicht aktiviert

Lösung:

php

// In functions.php
add_theme_support('post-thumbnails');

Problem: Menüs werden nicht angezeigt

Ursachen:

  • Menüpositionen nicht registriert
  • Menü nicht im Backend zugewiesen

Lösung:

  1. Registriere Menüposition in functions.php:

php

register_nav_menus(array(
    'primary' => 'Hauptmenü',
));
  1. Weise im Backend ein Menü zu (Design → Menüs)
  2. Nutze wp_nav_menu() im Template

Problem: Child Theme überschreibt nicht

Ursachen:

  • Template-Name in style.css falsch
  • Datei an falschem Ort
  • Parent-Theme-Styles werden nicht geladen

Lösung:

  1. Prüfe "Template:" Feld in style.css (muss Parent-Ordnername sein)
  2. Lade Parent-Styles korrekt mit wp_enqueue_style()
  3. Nutze get_template_directory_uri() für Parent, get_stylesheet_directory_uri() für Child

Problem: "Headers already sent" Fehler

Ursache:

  • Leerzeichen oder Text vor <?php in functions.php

Lösung:

  • Entferne alle Zeichen vor dem öffnenden <?php
  • Speichere Dateien ohne BOM (UTF-8 ohne BOM)
  • Entferne schließendes ?> am Ende von PHP-Dateien (Best Practice)

Problem: Performance-Probleme

Symptome:

  • Langsame Ladezeiten
  • Hohe Server-Last

Lösungen:

  • Optimiere Bilder (TinyPNG, WebP-Format)
  • Minimiere HTTP-Requests
  • Nutze Lazy Loading für Bilder
  • Aktiviere Caching (Plugin wie WP Rocket, W3 Total Cache)
  • Nutze ein CDN
  • Prüfe mit Query Monitor auf langsame Queries

Debugging-Workflow

Systematisches Vorgehen bei Fehlern:

  1. Reproduzieren: Kann der Fehler wiederholt werden?
  2. Isolieren: Welche Datei/Funktion verursacht den Fehler?
  3. Debug-Log prüfen: Schau in wp-content/debug.log
  4. Browser-Console: Prüfe auf JavaScript-Fehler
  5. Theme wechseln: Tritt der Fehler mit Default-Theme auf?
  6. Plugins deaktivieren: Ist ein Plugin schuld?
  7. Versionskontrolle: Git nutzen, um Änderungen zurückzuverfolgen

Fazit & Nächste Schritte

Herzlichen Glückwunsch! Du hast jetzt alle grundlegenden Kenntnisse, um dein eigenes WordPress Theme zu erstellen. Von der Entwicklungsumgebung über Template-Dateien bis hin zu responsive Design und Gutenberg-Integration – du kennst nun die wichtigsten Bausteine.

Doch die WordPress Theme Entwicklung ist eine Reise, kein Ziel. Es gibt immer etwas Neues zu lernen – sei es ein neues CSS-Feature, eine WordPress-Funktion oder ein Design-Trend. Das Wichtigste ist: Fang an zu experimentieren!

Dein erstes Theme muss nicht perfekt sein. Wichtig ist, dass du die Grundlagen verstehst und Schritt für Schritt aufbaust. Nutze Starter-Themes wie Underscores als Lernmaterial, studiere den Code erfolgreicher Themes und scheue dich nicht, Fragen in der Community zu stellen.

Die WordPress-Community ist eine der hilfsbereitesten im gesamten Web-Entwicklungs-Bereich. Nutze diese Ressource!

Also: Worauf wartest du noch? Öffne deinen Code-Editor und erstelle dein erstes WordPress Theme!

Du hast jetzt alle Werkzeuge, die du brauchst. Viel Erfolg und vor allem: Viel Spaß beim WordPress Theme Erstellen!

Produktempfehlungen:

Weitere Artikel zum Thema

  • GoDaddy Deutschland Content Team

    Das GoDaddy Deutschland Content Team besteht aus erfahrenen Expert:innen, die sich leidenschaftlich mit Themen rund um Webhosting, Domainregistrierung, Website-Erstellung und Online-Marketing beschäftigen. Mit ihrem fundiertem Wissen und einem klaren Blick für die Bedürfnisse kleiner und mittelständischer Unternehmen liefern sie wertvolle Tipps, Anleitungen und Inspirationen für ein erfolgreiches Online-Business.
    Mehr Artikel von GoDaddy Deutschland Content Team

Artikel Tags