besirious icon wachstum

WordPress Child Theme erstellen

Ein WordPress Child Theme zu erstellen, ist eine der besten Möglichkeiten, Anpassungen an deiner Website vorzunehmen, ohne das ursprüngliche Theme zu verändern. Mit einem Child Theme kannst du sicherstellen, dass deine Anpassungen bei einem Update des Parent Themes nicht verloren gehen. In diesem Artikel zeige ich dir Schritt für Schritt, wie du ein WordPress Child Theme erstellst – basierend auf meinen eigenen Erfahrungen, als ich ein Child Theme für meinen WooCommerce-Shop entwickelt habe.

Falls du an allgemeinen Tipps zur Wartung deiner WordPress-Seite interessiert bist, könnte dieser Artikel ebenfalls hilfreich für dich sein.

MEHR INFOS
wordpress child theme

Was ist ein WordPress Child Theme?

Ein Child Theme ist eine Erweiterung deines Haupt-Themes (Parent Theme), das dir ermöglicht, Änderungen vorzunehmen, ohne die Originaldateien des Parent Themes zu ändern. Alle Anpassungen im Child Theme überschreiben die entsprechenden Elemente im Parent Theme, während das Grundgerüst deines Haupt-Themes weiterhin aktualisiert werden kann, ohne deine Änderungen zu verlieren.

Theme Detector

Warum ein Child Theme verwenden?

Ich habe mich für ein Child Theme entschieden, als ich meinen WooCommerce-Shop erstellt habe. Es war für mich besonders wichtig, die functions.php anzupassen, um benutzerdefinierte Funktionen hinzuzufügen. So konnte ich den URL-Slug für Produktkategorie-Seiten ändern und das Standardverhalten von WooCommerce anpassen – zum Beispiel den kostenlosen Versand automatisch als Standard auszuwählen.

Ein weiterer Vorteil eines Child Themes ist, dass du das Parent-Theme vollständig unangetastet lässt. Wenn du die Möglichkeit haben möchtest, das Parent-Theme vor der Anpassung zu überprüfen, kann dir ein WordPress Theme Detector dabei helfen, Details zum verwendeten Theme herauszufinden.

Schritt-für-Schritt-Anleitung: Wie erstellt man ein WordPress Child Theme?

Dateien, die du für das Child Theme anlegen musst:

  1. style.css (erforderlich)
  2. functions.php (optional, aber oft benötigt)
  3. screenshot.png (optional, für eine Vorschau im WordPress-Adminbereich)
  4. Zusätzliche Template-Dateien (optional, je nach Bedarf, z. B. header.php, footer.php, oder WooCommerce-spezifische Dateien)

Beispielstruktur eines einfachen Child Themes

				
					mein-child-theme/
    ├── style.css
    ├── functions.php
    └── screenshot.png

1. Erstellen eines neuen Ordners für das Child Theme

Zuerst musst du im Ordner /wp-content/themes/ einen neuen Ordner erstellen, der das Child Theme enthalten wird. Der Name dieses Ordners kann frei gewählt werden, sollte aber deutlich machen, dass es sich um das Child Theme handelt, z.B. mein-child-theme.

2. Erstellen der style.css-Datei

Im nächsten Schritt erstellst du eine style.css-Datei in deinem neuen Child Theme-Ordner. Diese Datei ist essenziell und enthält grundlegende Informationen über das Child Theme, wie den Namen und die Verknüpfung zum Parent Theme. Hier ein Beispiel, wie der Header der Datei aussehen könnte:

				
					/*
 Theme Name:   Mein Child Theme
 Theme URI:    https://deine-seite.de
 Description:  Dies ist ein Child Theme des Parent Themes "Dein Parent Theme".
 Author:       Dein Name
 Author URI:   https://deine-seite.de
 Template:     parent-theme-folder
 Version:      1.0
*/

/* Hier kannst du benutzerdefiniertes CSS hinzufügen */
  • Template: Der Ordnername des Parent Themes, den du verwenden möchtest (z.B. twentytwentyone).
  • Theme Name: Der Name des Child Themes (dieser wird im WordPress-Adminbereich angezeigt).

Hinweis: Die Datei style.css muss immer die CSS-Datei des Parent Themes importieren. Das wird im nächsten Schritt über die functions.php erledigt.

3. Erstellen der functions.php-Datei

Die functions.php im Child Theme bietet dir eine enorme Freiheit, um benutzerdefinierte Funktionen zu implementieren. Hier kannst du WooCommerce und andere Funktionen flexibel erweitern. In meinem Fall habe ich zum Beispiel eine Funktion hinzugefügt, um den kostenlosen Versand automatisch als Standard auszuwählen. Mit der functions.php kannst du PHP-Funktionen hinzufügen und sicherstellen, dass die CSS-Datei des Parent Themes korrekt geladen wird. Hier ein Beispiel für den Inhalt der functions.php:

				
					<?php
// Parent Theme CSS laden
function load_parent_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'load_parent_theme_styles' );

// Hier kannst du zusätzliche Funktionen hinzufügen
?>
  • wp_enqueue_style sorgt dafür, dass das CSS des Parent Themes in dein Child Theme geladen wird.
  • Hier kannst du auch eigene Funktionen hinzufügen (z.B. Anpassungen für WooCommerce oder andere Erweiterungen).
  • Verwende ChatGPT oder andere KI Tools um die Skripts zu generieren.

3. screenshot.png (optional)

Dies ist ein optionales Bild, das im WordPress-Backend als Vorschau deines Themes angezeigt wird. Es sollte die Abmessungen 1200 x 900 Pixel haben.

Ein Beispiel: Wenn du dein eigenes Bild für das Child Theme erstellen möchtest, kannst du einfach eine Bilddatei mit dem Namen screenshot.png in den Ordner deines Child Themes legen.

4. Zusätzliche Template-Dateien (optional)

Falls du das Verhalten bestimmter Template-Dateien des Parent Themes überschreiben möchtest (wie z.B. header.php oder footer.php), kannst du diese Dateien in den Ordner deines Child Themes kopieren und sie dort anpassen. Beispiele:

  • header.php: Falls du das Header-Design anpassen möchtest, kopiere einfach die Datei header.php aus dem Parent Theme in den Child Theme-Ordner und ändere den Code nach deinen Bedürfnissen.
  • WooCommerce: Falls du WooCommerce spezifisch anpassen möchtest, kannst du eine Kopie der WooCommerce-Templates wie single-product.php in deinem Child Theme ablegen und diese anpassen. Die Struktur wäre z.B.:
				
					/mein-child-theme/woocommerce/single-product.php

Best Practices: Entwickeln in einer sicheren Umgebung

Bevor du Änderungen an deiner Live-Website vornimmst, solltest du in einer sicheren Umgebung arbeiten. Ich empfehle dringend, ein Staging-System oder eine lokale Kopie deiner Website zu verwenden, um deine Änderungen sicher zu testen. Bei meinem WooCommerce-Shop habe ich eine Subdomain wie staging.besirious.net verwendet. Das ist eine exakte Kopie der Live-Seite, auf der ich Anpassungen testen konnte, bevor ich sie in die Live-Umgebung übernommen habe.

  • Lokale Kopie: Für Entwickler ist es praktisch, eine lokale Umgebung mit Tools wie Local by Flywheel oder XAMPP zu erstellen.
  • Staging-System beim Hostingprovider: Viele Hosting-Provider bieten mittlerweile einfache Möglichkeiten, eine Staging-Seite anzulegen. Falls du deine Live-Seite während der Entwicklung offline schalten möchtest, könntest du den WordPress Wartungsmodus aktivieren.
WordPress Website Kosten

FAQ

  • Parent Theme: Ein vollständiges Theme, das alle nötigen Template-Dateien und Funktionen enthält, damit WordPress korrekt funktioniert.
  • Child Theme: Ein Theme, das die Funktionalität eines Parent Themes erbt und es dir ermöglicht, Änderungen vorzunehmen, ohne die Dateien des Parent Themes zu bearbeiten. Änderungen im Child Theme überschreiben das Parent Theme, was das Risiko vermeidet, bei Updates Anpassungen zu verlieren.

Ein Child Theme ist ideal, wenn du Änderungen an deinem Theme vornehmen möchtest (z.B. Design- oder Funktionsanpassungen), ohne die Gefahr, dass diese Änderungen bei einem Update des Parent Themes überschrieben werden. Es ist die beste Methode, um WordPress-Themes sicher anzupassen.

Um ein Child Theme zu erstellen, musst du einen neuen Ordner in /wp-content/themes/ anlegen, der style.css und optional eine functions.php-Datei enthält. Die style.css sorgt für das Styling, während die functions.php verwendet wird, um zusätzliche Funktionen zu definieren und das Parent Theme zu laden.

Du musst keine fortgeschrittenen Programmierkenntnisse haben, um ein Child Theme zu erstellen. Grundkenntnisse in HTML, CSS und etwas PHP sind jedoch hilfreich, um Anpassungen vorzunehmen. Für einfache Änderungen reicht oft schon das Kopieren und Einfügen von vorgefertigten Code-Snippets.

Wenn das Child Theme nicht korrekt eingerichtet ist, kann es dazu führen, dass deine Seite das Design oder die Funktionalität verliert. Achte darauf, die style.css korrekt zu konfigurieren und sicherzustellen, dass das Parent Theme korrekt geladen wird. Außerdem ist es ratsam, Änderungen in einer Staging-Umgebung zu testen, bevor du sie live schaltest.

Ja, du kannst Plugins zusammen mit einem Child Theme verwenden. In der Tat arbeiten Child Themes und Plugins oft Hand in Hand, um die Funktionalität deiner WordPress-Website zu erweitern. Besonders bei komplexen Anpassungen, wie WooCommerce-Integrationen, sind Plugins eine sinnvolle Ergänzung zu einem Child Theme.

Um WooCommerce anzupassen, kannst du die WooCommerce-Template-Dateien in den Ordner /woocommerce/ deines Child Themes kopieren und dort Änderungen vornehmen. So kannst du Layouts und Funktionen für deinen Online-Shop modifizieren, ohne das Parent Theme direkt zu bearbeiten.