findste.net

Themen-Netz

WordPress: Themes

Akademie

WordPress: Themes

Klassische Themes mit Template-Hierarchie und moderne Block Themes mit theme.json.

Klassische Themes und Template-Hierarchie

Begriffe vorab

  • Template: eine Datei, die festlegt, wie ein bestimmter Seitentyp ausgegeben wird.
  • Template-Hierarchie: die Suchreihenfolge, nach der WordPress das passende Template wählt.
  • Child Theme: ein Theme, das von einem Parent Theme erbt und nur Abweichungen enthält.

Ein klassisches Theme besteht aus PHP-Templates. Mindestens nötig sind style.css mit dem Theme-Header und index.php. Die functions.php ist die Stelle für Theme-Setup, Hooks und Enqueues.

/*
Theme Name: Mein Theme
Version: 1.0.0
Text Domain: mein-theme
*/

Template-Hierarchie

WordPress sucht für jede Anfrage das spezifischste vorhandene Template und fällt schrittweise zurück. Beispiel für den Einzelbeitrag eines Post Types book mit dem Slug dune:

  1. single-book-dune.php
  2. single-book.php
  3. single.php
  4. singular.php
  5. index.php

Weitere typische Templates: page.php, front-page.php (Startseite), home.php (Beitragsübersicht), archive.php, category.php, search.php und 404.php.

The Loop

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<?php the_excerpt(); ?>
<?php endwhile; endif; ?>

Funktionen mit the_ geben direkt aus, Funktionen mit get_ liefern den Wert zurück.

Template-Bausteine

  • get_header(), get_footer(), get_sidebar()
  • get_template_part( 'template-parts/card', 'post' ) für wiederverwendbare Teile
  • wp_head() und wp_footer() müssen vorhanden sein, damit Plugins und Kern Styles und Skripte ausgeben können.

Skripte und Styles

add_action( 'wp_enqueue_scripts', 'meinpraefix_assets' );
function meinpraefix_assets() {
	wp_enqueue_style( 'mein-theme', get_stylesheet_uri(), array(), '1.0.0' );
	wp_enqueue_script( 'mein-theme-js', get_template_directory_uri() . '/js/app.js', array(), '1.0.0', array( 'in_footer' => true, 'strategy' => 'defer' ) );
}

Child Themes

Ein Child Theme erbt vom Parent, erkennbar am Header Template: parent-ordner. Seine functions.php wird vor der des Parents geladen. Für Pfade des Child Themes nutzt du get_stylesheet_directory_uri(), für den Parent get_template_directory_uri().

Zusätzliche Abfragen in Templates immer mit wp_reset_postdata() abschließen, sonst zeigen spätere Funktionen den falschen Beitrag.

Ein Beispiel für die Suche

Ruft jemand eine Kategorieseite „Rezepte“ auf, sucht WordPress nacheinander category-rezepte.php, category-{ID}.php, category.php, archive.php und zuletzt index.php. Existiert nur index.php, wird diese genutzt. So kann man ein Theme schrittweise verfeinern, ohne alles auf einmal anzulegen.

Warum ein Child Theme

Änderungen direkt am Parent Theme gehen bei dessen Update verloren. Ein Child Theme enthält nur eigene Styles und abweichende Templates, der Rest kommt vom Parent. Es ist der übliche Weg, ein fertiges Theme sicher anzupassen.

Gute Gewohnheiten

  • Wiederverwendbare Teile mit get_template_part() auslagern.
  • Skripte und Styles nur über wp_enqueue_* einbinden, nie fest im Header.
  • Nach eigenen Abfragen wp_reset_postdata() aufrufen.

Zum Selbermachen: die Hierarchie erkunden

  1. Lege in einem Testtheme nur index.php an und rufe verschiedene Seitentypen auf.
  2. Ergänze single.php und beobachte, was sich ändert.
  3. Ergänze category-{slug}.php für eine Kategorie und prüfe, welche Datei genutzt wird.
  4. Notiere die Reihenfolge, in der WordPress sucht.

Prüfstatus: Belegt (Stand 1. Oktober 2026): Jahreszahlen, Zahlen, Namen und Quellenangaben dieser Lektion, soweit die Quellenliste sie nennt, wurden gegen Primärquellen geprüft. Nicht einzeln belegt: erklärende Darstellung nach Lehrbuchstand und Quellen, die in der Liste als „allgemeine Referenz“ markiert sind. Codebeispiele sind nur auf Syntax geprüft, nicht in WordPress ausgeführt.

Quellen

  • WordPress Theme Handbook – „The WordPress Template Hierarchy“ (developer.wordpress.org/themes/basics/template-hierarchy/) (allgemeine Referenz, nicht Zeile für Zeile geprüft)
  • WordPress Developer Resources – Funktionsreferenz zu wp_reset_postdata() (allgemeine Referenz, nicht Zeile für Zeile geprüft)

Block Themes, theme.json und Site Editor

Begriffe vorab

  • Block: ein Baustein des Editors, etwa Absatz, Bild oder Überschrift.
  • Site Editor: Oberfläche, in der man Templates und Gestaltung eines Block Themes visuell bearbeitet.
  • Preset: eine benannte Vorgabe, zum Beispiel eine Farbe oder Schriftgröße.
  • Global Styles: Gestaltungseinstellungen, die für die ganze Website gelten.

Block Themes sind der aktuelle Standard. Templates bestehen aus HTML mit Block-Markup und werden im Site Editor bearbeitet. Mindestens nötig sind style.css (Header) und templates/index.html.

Verzeichnisstruktur

  • theme.json: zentrale Konfiguration für Einstellungen und Styles
  • templates/: Seitentemplates wie index.html, single.html, page.html, 404.html
  • parts/: Template Parts wie header.html und footer.html
  • patterns/: PHP-Dateien mit Header-Kommentar, werden automatisch als Block Patterns registriert
  • styles/: Stilvariationen als JSON-Dateien
  • functions.php: optional, für Theme-Support und eigene Registrierungen

Die Template-Hierarchie gilt auch hier, nur mit .html-Dateien statt PHP.

Block-Markup

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
	<!-- wp:post-title /-->
	<!-- wp:post-content /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->

theme.json

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": { "palette": [ { "slug": "primary", "color": "#21759B", "name": "Primär" } ] },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  },
  "styles": {
    "color": { "background": "#ffffff" },
    "elements": { "link": { "color": { "text": "var(--wp--preset--color--primary)" } } }
  }
}

settings legt fest, was im Editor verfügbar ist (Paletten, Schriftgrößen, Layout). styles definiert das Standard-Aussehen. Aus Presets erzeugt WordPress CSS-Variablen nach dem Muster --wp--preset--color--primary. Version 3 von theme.json wird empfohlen, wenn die Mindestversion WordPress 6.6 ist. Ältere Versionen werden weiterhin unterstützt.

Seit WordPress 7.0 lassen sich Pseudo-Klassen wie :hover und :focus für Blöcke wie den Button direkt in theme.json definieren.

Patterns und Block Styles

Patterns sind vorgefertigte Block-Anordnungen. Block Styles (per register_block_style() oder JSON) bieten Variationen eines Blocks, zum Beispiel einen abgerundeten Button.

Halte Designentscheidungen in theme.json statt in eigenem CSS. Nutzer können sie dann im Site Editor über Global Styles anpassen.

Ein Beispiel für den Nutzen von theme.json

Legst du in theme.json eine Palette mit den Hausfarben fest, erscheinen genau diese Farben im Editor, und WordPress erzeugt daraus CSS-Variablen. Ändert jemand später die Primärfarbe in den Global Styles, passt sich jede Stelle an, die darauf verweist. Bei eigenem CSS müsste man jede Stelle einzeln anfassen.

Klassisch oder Block Theme?

Klassische Themes bestehen aus PHP-Templates und bieten viel Programmierfreiheit. Block Themes bestehen aus HTML-Templates und sind für Redakteure im Editor bearbeitbar. Für neue Projekte ist das Block Theme der aktuelle Standard; klassische Themes werden weiter unterstützt und sind bei bestehenden Projekten verbreitet.

Typische Fehler

  • Designentscheidungen doppelt in theme.json und in eigenem CSS zu pflegen.
  • Zu viele Farben und Größen freizugeben, sodass das Design uneinheitlich wird.
  • Änderungen im Site Editor nicht mit der Versionskontrolle abzugleichen – sie liegen in der Datenbank, nicht in den Dateien.

Prüfstatus: Belegt (Stand 1. Oktober 2026): Jahreszahlen, Zahlen, Namen und Quellenangaben dieser Lektion, soweit die Quellenliste sie nennt, wurden gegen Primärquellen geprüft. Nicht einzeln belegt: erklärende Darstellung nach Lehrbuchstand und Quellen, die in der Liste als „allgemeine Referenz“ markiert sind. Codebeispiele sind nur auf Syntax geprüft, nicht in WordPress ausgeführt.

Quellen

  • WordPress Theme Handbook – „Global Settings & Styles (theme.json)“ (developer.wordpress.org/themes/global-settings-and-styles/) (allgemeine Referenz, nicht Zeile für Zeile geprüft)
  • Make WordPress Core – „Pseudo-element support for blocks and their variations in theme.json“ (Core-Changelog zu WordPress 7.0) (allgemeine Referenz, nicht Zeile für Zeile geprüft)

<3 for wisdom · 2026