Webdesign lernen WordPress

Custom WordPress Theme erstellen.

Schritt für Schritt zum eigenen WordPress Theme: das minimalistische Grundgerüst mit allen wichtigen Dateien, Codeschnipseln und Tipps für den Start.

Von Eduard Wischnewski, Webdesigner · aktualisiert am

Custom WordPress Theme erstellen – Schritt für Schritt Tutorial

In diesem Tutorial erfährst du, wie du ein minimalistisches eigenes WordPress Theme erstellst. Du bekommst das Grundgerüst mit den wichtigsten Dateien, Codeschnipseln & guten Tipps zum Start. Wenn du lieber ein bestehendes Theme anpassen möchtest, findest du hier auch mein WordPress Child Theme Tutorial.

1. Ordnerstruktur anlegen

Lege im WordPress-Theme-Verzeichnis wp-content/themes/ einen neuen Ordner an, z.B. mein-theme. Dieser enthält mindestens folgende Dateien:

text
wp-content/themes/mein-theme/
├── style.css
├── index.php
├── header.php
├── footer.php
└── functions.php

2. style.css – Metadaten & Grundstyle

Diese Datei muss unbedingt den Theme-Header enthalten, damit WordPress das Theme erkennt:

css
/*
Theme Name: Mein Theme
Theme URI:  https://deine-seite.de/mein-theme
Author:     Dein Name
Author URI: https://deine-seite.de
Description: Ein einfaches, flexibles WordPress Theme für den Einstieg.
Version:    1.0
License:    GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mein-theme
Tags:       custom-theme, responsive, clean
*/
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

3. index.php – Haupttemplate mit Loop

Die Hauptdatei zeigt Beiträge (Posts) dynamisch:

php
<?php get_header(); ?>
<main>
  <?php
  if (have_posts()) :
    while (have_posts()) : the_post(); ?>
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <div><?php the_content(); ?></div>
      </article>
    <?php endwhile;
  else : ?>
    <p>Keine Beiträge gefunden.</p>
  <?php endif; ?>
</main>
<?php get_footer(); ?>

4. header.php – Kopfbereich

Kopfbereich mit Aufruf zum Einbinden von Styles & Scripts über wp_head():

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(); ?>
<header>
  <h1><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
  <nav>
    <?php
    wp_nav_menu(array(
      'theme_location' => 'primary',
      'container' => false,
      'menu_class' => 'menu',
    ));
    ?>
  </nav>
</header>

Tipp: Den <title> musst du nicht selbst schreiben. Mit add_theme_support('title-tag') in der functions.php (siehe Schritt 6) setzt WordPress ihn automatisch – das veraltete wp_title() brauchst du dann nicht mehr.

Fußzeile mit WordPress Hooks:

php
<footer>
  <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. Alle Rechte vorbehalten.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

6. functions.php – Theme-Support und Menü

Theme-Support und Menü registrieren:

php
<?php
// Grund-Funktionen aktivieren
function mein_theme_setup() {
  add_theme_support('title-tag');
  add_theme_support('post-thumbnails');
  register_nav_menus(array(
    'primary' => __('Hauptmenü', 'mein-theme'),
  ));
}
add_action('after_setup_theme', 'mein_theme_setup');
// Styles einbinden
function mein_theme_scripts() {
  wp_enqueue_style('mein-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'mein_theme_scripts');

Schritt-für-Schritt Erklärung

  • style.css: Definiert Theme-Metadaten und grundlegende Styles.
  • index.php: WordPress Loop zum Anzeigen von Beiträgen.
  • header.php: Enthält <head>-Inhalte und den Seitenkopf mit Navigation.
  • footer.php: Fügt Fußzeile und WordPress-Funktionen am Ende ein.
  • functions.php: Registriert Menüs, aktiviert Funktionen und bindet Styles ein.

Fazit

Mit diesem Grundgerüst hast du ein funktionales WordPress Theme, das du beliebig erweitern kannst – z.B. mit weiteren Templates wie single.php, page.php, Widget-Areas uvm.

Gerade für individuelle Designs und Projekte ist ein eigenes Theme oft die beste Wahl!

Um dein Theme zu testen:

  1. Erstelle den Ordner mein-theme in wp-content/themes/ deiner WordPress-Installation.
  2. Lege die gezeigten Dateien dort ab.
  3. Aktiviere das Theme im WordPress Backend unter Design > Themes.
  4. Deine Seite zeigt nun Beiträge mit deinem eigenen Theme an.

Weiterlernen

Möchtest du lieber ein bestehendes Theme anpassen, ist ein WordPress Child Theme der sichere Weg. Für das Layout deines Themes nutzt du CSS Grid und responsives Webdesign, für eine schnelle Seite Caching und Minification. Formulare sicherst du mit dem Contact Form 7 Spam-Schutz ab.

Du möchtest ein individuelles Theme, ohne selbst zu programmieren? Ich entwickle eigene WordPress-Themes und Plugins nach deinen Vorgaben.

FAQ: Custom Theme

Was du beim eigenen WordPress Theme beachten solltest

Welche Mindestdateien und Ordner braucht ein funktionales Theme?

Mindestens ein Theme-Ordner unter wp-content/themes/mein-theme mit diesen Dateien: style.css (mit Theme-Header/Metadaten), index.php (Haupttemplate/Loop), header.php (DOCTYPE, head, wp_head(), Beginn body), footer.php (wp_footer(), schließendes HTML) und functions.php (Theme-Setup, Enqueue). Zusätzlich empfehlenswert: screenshot.png (Vorschau im Backend), /languages (Übersetzungen), /template-parts für modulare Teile. Beim Anlegen lokal arbeiten, Versionierung (Git) verwenden und erst auf Staging/Live deployen.

Warum ist der Theme-Header in style.css so wichtig und welche Metadaten gehören rein?

WordPress liest den Kommentarblock am Anfang von style.css als Theme-Meta: Theme Name, Author, Version, Text Domain, Description etc. Ohne diesen Header wird das Theme nicht in Design > Themes angezeigt. Die Text Domain ist wichtig für Übersetzungen; Version hilft bei Wartung. Ergänze außerdem eine screenshot.png für eine schnelle Vorschau im Backend.

Wie binde ich Styles und Skripte korrekt ein (wp_enqueue)?

Nie CSS/JS direkt in Templates hart codieren. Verwende functions.php mit wp_enqueue_style() / wp_enqueue_script() und hänge den Callback an wp_enqueue_scripts. So werden Abhängigkeiten, Versionen und Ladeort (Footer oder Head) korrekt verwaltet. Prüfe bei externen Libraries, ob WordPress bereits eine Version mitliefert, und vermeide doppeltes Laden. Nutze Versionierung für Cache-Busting (z. B. filemtime).

Wie nutze ich die Template-Hierarchie sinnvoll und welche zusätzlichen Templates brauche ich?

WordPress liefert eine Template-Hierarchie (single.php, page.php, archive.php, search.php, 404.php). Ergänze diese Dateien, um unterschiedliche Inhaltstypen individuell darzustellen. Verwende Template Parts (get_template_part()) für wiederkehrende Blöcke wie Karten-Layouts – dadurch bleibt der Code modular und wartbar. Für eigene Post-Typen legst du single-{posttype}.php an, für Taxonomien taxonomy-{taxonomy}.php.

Welche Theme-Features und Registrierungen gehören in functions.php?

In functions.php registrierst du Theme-Unterstützung (add_theme_support für title-tag, post-thumbnails, custom-logo, html5, editor-styles), Menüs (register_nav_menus), Sidebars (register_sidebar), Bildgrößen (add_image_size) und bindest Assets ein. Hänge Setup-Funktionen an after_setup_theme und das Laden von Assets an wp_enqueue_scripts. Halte die Datei übersichtlich – wiederverwendbare Funktionen lagerst du besser in Plugins aus.

Wie mache ich das Theme performant und mobil-optimiert?

Performance ist zentral: Mobile-First-CSS, kritisches CSS inline, JavaScript mit defer laden und nur bei Bedarf einbinden. Reduziere HTTP-Requests, minifiziere CSS und JS, nutze moderne Bildformate (WebP/AVIF) mit srcset und sizes sowie Lazy Loading. Teste die Core Web Vitals mit Lighthouse. Serverseitig helfen Caching, CDN und GZIP/Brotli.

Wie stelle ich Barrierefreiheit (Accessibility) sicher?

Barrierefreiheit beginnt bei semantischem HTML (header, main, nav, footer). Sorge für aussagekräftige Linktexte, Alt-Texte für Bilder, sichtbare Fokuszustände und Tastaturnavigation; ARIA-Attribute nur dort, wo nötig. Verwende ausreichende Farbkontraste (WCAG 2.1 AA), berücksichtige prefers-reduced-motion und teste mit Screenreadern (NVDA/VoiceOver) sowie Tools wie axe oder Lighthouse.

Wie gehe ich mit Bildern, Icons und Logos um?

Nutze responsive Bilder (srcset, sizes) und registriere sinnvolle Bildgrößen mit add_image_size. Komprimiere Bilder und liefere WebP/AVIF. Für Logos und Icons sind SVGs ideal (skalierbar, per CSS steuerbar) – achte dabei auf Sicherheit (SVG bereinigen). Verwende Lazy Loading für Bilder unterhalb des sichtbaren Bereichs, aber nicht für das wichtigste Bild oben (LCP).

Wie mache ich ein Theme übersetzungsfähig und mehrsprachig?

Verwende __(), _e(), esc_html__() etc. mit einer festen Text Domain in allen Strings. Lade Übersetzungen mit load_theme_textdomain() im Theme-Setup. Erstelle .pot-Dateien (z. B. mit Poedit) und liefere /languages/*.po/.mo mit. Für mehrsprachige Seiten eignen sich Plugins wie WPML oder Polylang.

Wie teste, debugge und veröffentliche ich ein Theme sicher?

Entwickle lokal oder auf einer Staging-Umgebung. Aktiviere WP_DEBUG während der Entwicklung und prüfe PHP- und Browser-Konsole auf Fehler. Versioniere mit Git und teste in mehreren Browsern sowie mit Lighthouse. Vor dem Aktivieren auf der Live-Seite ein Backup anlegen. Für spätere Anpassungen ohne Update-Verlust eignet sich ein Child Theme.

Passt dazu Weitere Tutorials

Weiter lernen.

WordPress Child Theme erstellen Child Theme anlegen, aktivieren und sicher anpassen – ohne Änderungen im Haupttheme zu verlieren. Zum Tutorial → Theme umschalten Zwischen Hell- und Dunkel-Theme umschalten – Beispiel-Code für Button, Styles und Skript. Zum Tutorial → Caching & Minification Grundlagen, Tools und Plugins für eine schnellere Webseite – besser für Nutzer und SEO. Zum Tutorial →

Keine Zeit, es selbst umzusetzen? Ich baue Ihre Webseite schnell und sauber.

Jetzt kontaktieren