Anpassungen sicher & flexibel bei WordPress vornehmen
Das Child Theme ist eine nützliche Ergänzung für dein Haupttheme bei WordPress. Dabei ist das WordPress Child Theme eine Kopie des Original-Themes, bei dem gesonderte Funktionen oder Dateien hinzugefügt werden können, ohne das Haupttheme zu beeinflussen.
Alle Details rund um das Child Theme und wie du es verwendest, kannst du jetzt hier nachlesen.
Inhaltsverzeichnis
1. Was ist ein WordPress Child Theme?
Das Child Theme ist eine Kopie deines aktuelle installierten WordPress Themes. Durch das Erstellen eines Child Themes – also einer Kopie – kannst du dein Theme so spezifisch anpassen, ohne dass die Änderungen mit dem nächsten Update verloren gehen.
Beispiel:
Wenn du das Design deiner Seite anpassen möchtest, kannst du im Child-Theme eigene CSS- oder PHP-Dateien bearbeiten. Änderst du stattdessen direkt die Dateien deines aktiven Themes, gehen diese Anpassungen beim nächsten Update verloren, weil die Originaldateien überschrieben werden.
Mit dem Child-Theme sicherst du deine Änderungen dauerhaft und stellst sicher, dass sie auch nach Theme-Aktualisierungen bestehen bleiben.
Bei der Aktivierung des Child-Themes wirst du feststellen, dass du damit hauptsächlich CSS- und PHP-Dateien bearbeiten kannst. Dabei kannst du präzise auswählen, welche Funktionen du über das Child-Theme genau vornehmen möchtest.
Dein aktuelles Live-Theme wird in diesem Zusammenhang auch als Parent-Theme bezeichnet.
Wichtig zu wissen ist allerdings, dass das Child Theme deinem Parent Theme immer vorgelagert wird und die Anpassungen im Child Theme immer vor dem „normalen“ Theme berücksichtigt werden. Daher ist das Child Theme auch nicht von Updates betroffen.
Mehr Informationen rund um das Child Theme kannst du auch direkt bei WordPress nachlesen:
👼🏻 Das Child Theme bei WordPress – alles was du wissen musst in der Kurzform.
Die Grundstruktur des Child Themes
Das Child Theme erbt quasi die Funktionalität und das Design des ursprünglichen Themes – also in dem Zusammenhang das Parent Themes. Es wird verwendet, um Anpassungen vorzunehmen, ohne das Original-Theme direkt zu verändern. So bleiben Änderungen beim Update des Parent Themes erhalten.
Ein Child Theme hat im Prinzip denselben Aufbau wie ein Parent Theme, allerdings mit dem Ziel, das Parent Theme zu erweitern oder zu überschreiben, ohne es direkt zu verändern. Hier sind einige wichtige Punkte dazu:
Die folgenden Dateien findest du standardmäßig in deinem Parent als auch in deinem Child Theme:
Ordnerstruktur – Ein Child Theme kann genauso wie das Original Parent Theme verschiedene Dateien und Ordner enthalten, wie z. B.
header.php,footer.php,functions.php,style.css. Der Hauptunterschied liegt darin, dass beim Child Theme neue Dateien hinzugefügt oder bestehende Daten langfristig überschrieben werden.
Templates und Template-Tags – Du kannst die gleichen Template-Dateien wie im Parent Theme verwenden. Wenn du ein Template im Child Theme erstellst, wird es die Vorlage des Parent Themes überschreiben, wenn sie den gleichen Dateinamen trägt.
Stylesheets – Das Child Theme lädt das Stylesheet des Parent Themes und kann zusätzlich eigene Styles enthalten. Die CSS-Regeln des Child Themes überschreiben dann die des Parent Themes, wenn sie spezifischer sind.
Es gibt allerdings auch 🚫 Unterschiede , die aber meist erst nach dem Beginn der Umarbeitung im Child Theme eintreten:
- Das Child Theme besitzt zwei n otwendige Dateien:
-
style.css(mit den Basisinformationen und einem Import des Parent Stylesheets) functions.php(zum Laden des Parent Stylesheets und für weitere Funktionen)
-
Das Child Theme enthält keine vollständige Kopie des Parent Themes. Stattdessen wird nur der Inhalt benötigt, den du anpassen oder erweitern möchtest. Dazu zählen zum Beispiel neue Funktionen, neue Templates oder bestehende Inhalte, die du mit weiteren Optionen erweitern möchtest. Es reicht aus, diese im Child Theme zu hinterlegen.
Der Aufbau des Child Themes im Vergleich zum Parent Theme
Wir nehmen einmal an, dass die Code Struktur deines Original Parent Themes so aussieht:
/parent-theme/
├── functions.php
├── style.css
├── header.php
├── footer.php
├── page.php Diese Struktur muss dein Child Theme nicht genau übernehmen:
/child-theme/
├── functions.php
├── style.css
├── screenshot.png (optional)
└── header.php (optional, wenn du den Header ändern möchtest) Der Aufbau des Child Themes ist also fast identisch mit dem des Parent Themes, aber das Child Theme enthält nur die Dateien und Anpassungen, die du benötigst. Du überschreibst nur, was du ändern möchtest, und alles andere bleibt vom Parent Theme erhalten. Das sorgt dafür, dass deine Anpassungen auch nach einem Update des Parent Themes erhalten bleiben.
Das Child Theme und das Parent Theme arbeiten demnach gemeinsam und parallel, um das fertige Endergebnis auf deiner Webseite so zu erreichen, wie du es dir vorstellst.
Wie funktioniert das Child Theme?
Das Parent Theme und das Child Theme arbeiten im Grunde parallel zueinander.
Das Child Theme ist eine Kopie und damit sozusagen eine Erweiterung des Parent Themes, wodurch dieses nahezu dieselben Funktionen, Design und Code besitzen.
Das Child Theme lohnt sich insbesondere für einige bestimmte Anpassungen, die gerne mit Updates überschrieben werden. Zu den wichtigsten Funktionen gehören deshalb:
Wenn ein Child Theme aktiviert wird, lädt WordPress zunächst das Parent Theme und anschließend das Child Theme. Das bedeutet, dass alle Funktionen, Stile und Templates des Parent Themes verfügbar sind. Aber nur, sofern sie im Child Theme nicht überschrieben werden. Denn das Child Theme kann bestimmte Dateien des Parent Themes überschreiben, wie zum Beispiel style.css oder Template-Dateien wiesingle.php oder page.php. Wenn eine solche Datei im WordPress Child Theme verwendet wird, wird diese auf der Live Webseite anstelle der vorherigen Datei des Parent Themes verwendet.
In den allermeisten Fällen ersetzt das Child Theme das Parent Theme aber nicht vollständig. Es gilt eher als Ergänzung und wird individuell modifiziert. So kannst du Anpassungen vornehmen, ohne das ursprüngliche Theme tatsächlich zu verändern.
Mit der Aktivierung des Child Themes erkennt WordPress automatisch die Verwendung und nutzt dieses entsprechend. Konkret bedeutet das, wenn das WordPress Child Theme bestimmte Dateien nicht enthält, greift WordPress auf das Parent Theme zurück. Verwendet das Child Theme neue Dateien, werden diese von WordPress verwendet.
Welche Anpassungen kann ich über das Child Theme vornehmen?
CSS-Änderungen
Das Aussehen deiner Webseite kannst du im CSS (Cascading Style Sheets) verändern. Diese Anpassungen bleiben auch nach einem Theme-Update bestehen.
CSS steht für Cascading Style Sheets (kaskadierende Formatvorlagen). Es ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und Layout von Webseiten zu gestalten, die mit HTML oder XML erstellt wurden. CSS trennt die Inhaltsebene (HTML) von der Darstellungsebene (Layout, Farben, Schriftarten etc.), was für eine saubere Struktur und Wartbarkeit sorgt.
PHP-Funktionsänderungen
Auch die Funktionen in den PHP-Dateien des Themes kannst du über das Child Theme ändern oder hinzufügen. Änderungen an Dateien wie functions.php oder anderen Template-Dateien können sonst bei einem Update überschrieben werden.
Die functions.php -Datei ist eine zentrale Datei in einem WordPress-Theme. Sie wird verwendet, um zusätzliche Funktionen und Anpassungen hinzuzufügen, die das Verhalten des Themes beeinflussen. Die Datei dient als eine Art „Schaltzentrale“ für die Erweiterung und Anpassung der WordPress-Seite, ohne dass du den Kern von WordPress selbst bearbeiten musst.
Template-Anpassungen
Insbesondere deine Arbeiten an den Template-Dateien, wie zum Beispiel header.php , footer.php oder single.php solltest du am besten über das Child-Theme anpassen. So kannst du eigene Versionen dieser Dateien im Child Theme erstellen, die auch dauerhaft in deinem WordPress hinterlegt sind.
Hinzufügen neuer Funktionen
Nicht immer hat dein WordPress Theme alle Funktionen, die du benötigst. Oft kannst du einige deiner Funktionen über den WordPress Theme Customizer überarbeiten. Möchtest du über diese Möglichkeiten hinaus Einstellungen im CSS-Code oder in den PHP-Dateien verändern, lohnt es sich, diese Einstellungen über das Child Theme zu bearbeiten.
Grob zusammengefasst kannst du mit deinem Child Theme ...
Designs anpassen:
Farben und Fonts ändern
Abstand oder Layout individualisieren
Templates umbauen:
Header oder Footer abändern
Beitragslayouts verändern (z.B. Featured Image oberhalb oder unterhalb des Titels)
Funktionen hinzufügen:
Eigene Shortcodes
Zusätzliche Widgets
Custom Post Type
WooCommerce individualisieren:
Templates in
woocommerce/überschreibenButtons umbenennen oder entfernen
Vor- und Nachteile des WordPress Child Themes
✅ Vorteile eines WordPress Child Themes
Sicherheit bei Updates
Das Parent Theme kann aktualisiert werden, ohne individuelle Anpassungen zu verlieren. Dabei bleiben die Änderungen am Child Theme allerdings bestehen, selbst wenn das Parent Theme ein Update erhält.
Einfache Anpassungen
Über das Child Theme hast du die Möglichkeit, Design und Funktionalität des Parent Themes anzupassen, ohne den Code direkt verändern zu müssen. Das macht Anpassungen einfacher und vor allem auch übersichtlicher.
Weniger Risiken bei Änderungen
Mit der Verwendung des Child Themes sinkt natürlich das Risiko bei Veränderungen nachhaltige Fehler zu machen. Denn Fehler im Child Theme sind unter anderem auch leichter zu identifizieren, zu beheben und betreffen nicht das Parent Theme.
Lernen und Experimentieren
Für Entwickler ist das WordPress Child Theme eine tolle Option und ein praktisches Werkzeug, um sich an einem Theme auszuprobieren, zu experimentieren und um zu verstehen, wie WordPress Themes funktionieren. Gerade für Entwickler, die noch lernen, bietet das Child Theme viel Potenzial, ohne Konsequenzen neue Funktionen zu testen.
Kompatibilität mit Plugins
Da das Child Theme eine direkte Kopie des Parent Themes ist, bleibt auch die Kompatibilität mit den bereits verwendeten Plugins bestehen.
❌ Nachteile eines Child Themes für WordPress
Abhängigkeit vom Parent Theme
Das Child Theme ist natürlich als Kopie vom Parent Theme abhängig. Sollte das Parent Theme nicht mehr aktualisiert werden oder mit den WordPress Core Updates nicht mehr kompatibel sein, gilt dies natürlich auch für das Child Theme.
Lernkurve
Vor- und Nachteil des Child Themes ist die Komplexität der Bearbeitung. Für Anfänger kann die Erstellung und Verwaltung eines WordPress Child Themes eine Herausforderung darstellen, aber auch sehr nützlich zum Lernen sein. Trotzdem benötigst du zum Verständnis, wie Child und Parent Themes interagieren, ein gewisses Maß an WordPress-Kenntnissen.
Zusätzlicher Wartungsaufwand
Obwohl ein Child Theme die Wartung durch die Trennung von Anpassungen vereinfacht, bedeutet das gleichzeitig auch die Bearbeitung, Verwaltung und Aktualisierung von zwei Themes.
Performance
In einigen Fällen kann die Verwendung eines Child Themes die Ladezeiten deiner Webseite etwas verschlechtern, da WordPress sowohl das Parent Theme als auch das Child Theme mit seinen Anpassungen im Hintergrund laden muss.
Begrenzungen durch das Parent Theme
Nicht vorhandene Funktionen im Parent Theme müssen im Child Theme manuell hinzugefügt werden. Gibt es im Parent Theme also auch Updates in der Functions.php musst du diese leider ebenfalls von Hand ins WordPress Child Theme übertragen, da diese im Update nicht übernommen werden.
Übertragbarkeit
Ein Child Theme ist auf das jeweilige Parent Theme konfiguriert, da dieses ja eine Kopie darstellt. Es ist demnach nicht ganz so leicht, Anpassungen im WordPress Child Theme auf ein anderes Parent Theme zu übertragen. Hier hast du lediglich die Möglichkeit, vorhandene Code-Abschnitte wiederzuverwenden.
- PageSpeed Score
- Core Web Vitals
- Parameter mit Erläuterung
Nach dem Absenden erhältst du das Ergebnis direkt per E-Mail.
Mit dem Absenden dieses Formulars stimmst du unseren Datenschutzbestimmungen zu.
Möchtest du das Layout oder die Struktur deiner Seiten ändern, kannst du Template-Dateien aus dem Parent Theme in dein Child Theme kopieren und dort anpassen. Gehe dazu wie folgt vor:
2. Das WordPress Child Theme erstellen & einrichten
Ein Child Theme kannst du auf zwei Wegen erstellen: manuell oder über ein Plugin. Da die manuelle Erstellung eines Child-Themes aber etwas komplexer ist, erklären wir hier die Erstellung anhand eines WordPress Plugins.
👉 Die genaue Anleitung für eine manuelle Child Theme Erstellung findest du hier bei WordPress.
WordPress Child Theme mit einem Plugin erstellen
Begib dich zunächst einmal in dein WordPress Dashboard in den Bereich Plugin und klicke ganz oben auf Neues Plugin hinzufügen . Darüber gelangst du ins WordPress Plugin Verzeichnis. Suche hier nach dem Plugin Child Theme Configurator – dieses gehört zu den empfohlenen WordPress Child Theme Plugins.
Anschließend kannst du das Plugin wie gewohnt installieren und aktivieren.
Child Theme Configurator
Das beliebte Child Theme Configurator Plugin ist von der Firma Lilaea Media und hat bei WordPress über 300.000 aktive Installationen. Das Plugin lässt sich einfach anwenden und zielt rein auf die Erstellung eines WordPress Child Themes ab.
Vorteile
- einfache Erstellung eines Child Themes
- Fehler-Analyse deiner Einstellungen
- Anpassung der Schriftarten
- Kopiere Widgets, Menüs und Einstellungen in dein Child Theme
- Verändere Farben, Hintergründe, Schriften uvm. ohne andere Elemente zu beeinflussen
Preis: kostenlos bei WordPress
Das Child Theme bei WordPress einrichten und verwenden
Nachdem du das Plugin installiert hast, findest du das Plugin in deinem WordPress Dashboard unter Werkzeuge/ Tools. Hierüber gelangst du nun zu den Einstellungen, über die du das Child Theme erstellen kannst. So gehst du vor:
- Klicke auf Neues Child Theme erstellen , wenn der Punkt noch nicht ausgewählt ist
- Entscheide dich anschließend für ein Parent Theme , welches du kopieren möchtest
- Klicke anschließend auf Untersuchen
- Als nächstes scrollst du etwas nach unten, um den neuen Ordner deines Child Themes zu benennen
- Wähle nun aus, wo die neuen Stile gespeichert werden sollen: direkt im Child Theme oder in einer separaten Formatvorlage
- Im letzten Schritt musst du dich für ein Formatvorlagen Handling entscheiden.
- Anschließend klickst du auf Neues Child Theme konfigurieren.
- Zuletzt kannst du das Child Theme unter Designs aktivieren
Überprüfe, ob das WordPress Child Theme richtig geladen hat. In deinem WordPress Dashboard solltest du das Child Theme im Bereich deiner Themes finden. Dieses heißt dort dann beispielsweise Hello Elementor Child – je nachdem, auf welchem Parent Theme dein Child Theme basiert.
Das Child-Theme per Code anlegen
Das Child Theme lässt sich neben dem Plugin auch über Code anlegen. Das ist natürlich etwas komplexer und empfiehlt sich nur, wenn du dich ausreichend mit Coding bei WordPress auskennst.
Ein Child Theme anzulegen, ist eigentlich ganz einfach. Grundsätzlich benötigt die functions.php nur ein paar Zeilen Code und eine style.css.
Schritt 1: Erstelle das Child Theme-Verzeichnis
Im ersten Schritt zu deinem neuen Child Theme musst du ein passendes Verzeichnis bei WordPress anlegen. Das geht so:
Gehe auf deinen Webserver oder in dein lokale Entwicklungsumfeld und navigiere zum Ordner
wp-content/themes.Erstelle hier ein neues Verzeichnis für dein Child Theme. Der Name sollte in der Regel wie folgt aussehen:
parent-theme-name-child.Beispiel: Wenn das Parent Theme „Twenty Twenty-One“ heißt, kannst du den Ordner zum Beispiel
twentytwentyone-childnennen.
Schritt 2: Erstelle die style.css für das Child Theme
Als Nächstes wird das style.css erstellt:
Gehe in dein neu angelegtes Child Theme-Verzeichnis und erstelle eine Datei namens
style.css.Die Datei
style.cssenthält die Basisinformationen deines Child Themes und die von dir hinzugefügten Styles.
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://example.com/twenty-twenty-one-child
Description: Child Theme für das Twenty Twenty-One Theme
Author: Dein Name
Author URI: https://example.com
Template: twentytwentyone
Version: 1.0.0
Text Domain: twenty-twenty-one-child
*/
/* Füge hier deine benutzerdefinierten CSS-Regeln hinzu */
body {
background-color: #f0f0f0; /* Beispiel: Hintergrundfarbe ändern */
} Beachte bei der Erstellung die folgenden wichtigen Punkte:
Template:Gibt den Ordnernamen des Parent Themes an (achte darauf, dass der Name exakt übereinstimmt).Version:Ist die Version deines Child Themes.Text Domain:Ein eindeutiger Bezeichner für die Übersetzungen deines Themes (meistens der Ordnername in Kleinbuchstaben).
Schritt 3: Erstelle die functions.php für das Child Theme
Die functions.php functions.php ist für die Funktionen in deinem Child Theme zuständig. Hier gilt es jetzt die functions.php zu erstellen:
Gehe ins Child Theme-Verzeichnis erstelle eine Datei namens
functions.php. Diese Datei ermöglicht es dir, zusätzliche Funktionen hinzuzufügen und das Parent Theme zu erweitern.Diese Datei lädt das CSS des Parent Themes und das CSS deines Child Themes.
// Eltern-Stylesheet einbinden
function mein_child_theme_styles() {
// Parent Theme Styles
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
// Child Theme Styles
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'mein_child_theme_styles'); Achte bei der Umsetzung darauf, dass …
Die Funktion
wp_enqueue_style()dafür sorgt, dass das CSS des Parent Themes (und anschließend das CSS deines Child Themes) korrekt geladen wird.Die
wp_enqueue_style()-Funktion für das Parent-Stylesheet zuerst aufgerufen wird.
Dein Child Theme ist nun mit den wichtigsten Dateien ausgestattet und ist jetzt bereit, deine Anpassungen umzusetzen. In den nächsten Kapiteln geben wir dir daher Tipps, Tricks und praktische Code-Beispiele, die dir bei der Umsetzung deiner Wünsche helfen können.
3. Tipps für die richtige Anwendung des WordPress Child Themes
1. Änderungen nicht im Parent Theme umsetzen
Welche Inhalte werden bei einem Update überschrieben und welche nicht – so richtig klar ist das den meisten Nutzern einfach nicht. Deswegen ist es empfehlenswert, alle Änderungen an deinem Theme einfach direkt über das Child Theme umzusetzen. So kannst du sicher sein, dass deine Änderungen nicht überschrieben werden und das ist langfristig effizienter und ressourcenschonender.
2. Hinterlege eine saubere Struktur für deine wichtigen Dateien
Beim Coding sauber zu arbeiten ist super wichtig, da sonst Fehler und Probleme relativ schnell auftreten können. Nichts ist schlimmer als ein undurchsichtiger Code – das verlagert das Chaos auch auf deine Webseite. Daher sind saubere Strukturen für deine Dateien essentiell.
/*
Theme Name: Mein Child Theme
Template: astra
Version: 1.0
*/ 3. Verwende den wp_enqueue_scripts Hook
Verwende den wp_enqueue_scripts -Hook in der functions.php-Datei deines Child Themes richtig, um sicherzustellen, dass deine Inhalte so geladen werden, wie du es möchtest.
Achte hierbei darauf, das Parent Theme CSS zuerst zu laden und erst in zweiter Instanz das Child Theme. So kannst du sicherstellen, dass die Styles des Parent Themes überschrieben werden können.
Ein entsprechender Code dazu könnte wie folgt aussehen:
Der wp_enqueue_scripts Hook ist in WordPress dafür zuständig, Skripte (JavaScript-Dateien) und Stylesheets (CSS-Dateien) in eine Seite oder ein Template zu laden. Er wird genutzt, um diese Dateien korrekt zu registrieren und in die Webseite einzufügen, ohne Konflikte zu verursachen. Darüber kannst du sicherstellen, dass Skripte und Styles nur dann geladen werden, wenn sie wirklich benötigt werden.
function mein_child_theme_styles() {
// Lade das Stylesheet des Parent Themes
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
// Lade das Stylesheet des Child Themes
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'mein_child_theme_styles'); 4. Verzichte auf zu viel CSS in der style.css
Dein CSS-Code sollte übersichtlich sein und nur gezielt gefüllt oder mit spezifischen Anpassungen erweitert werden. Komplexere Anpassungen im Layout oder bei den Styles sollten in separaten Dateien ausgelagert werden.
Den CSS-Code zu überladen kann aus mehreren Gründen problematisch sein.
- Ein aufgeblähter CSS-Code ist schwieriger zu pflegen. Änderungen werden immer schwerer, da du gegebenenfalls nach den richtigen Stellen suchen musst.
- Zu viele CSS Regeln führen zu einer unnötig großen Datei und somit zu längeren Ladezeiten, da das abrufen und herunterladen der Dateien viel mehr Zeit benötigt. Langfristig schützt du so also die Performance deiner Webseite.
- Eine zu große style.css-Datei besitzt eine hohe Komplexität, was sich insgesamt auf alle Änderungen, Fehlerbehebungen und Kompatibilitäten auswirkt.
5. Vermeide unnötige Übertragungen von Template-Dateien
Du kannst das Child Theme mit den Dateien füttern, die du umschreiben bzw. anpassen möchtest. Und genau darauf solltest du auch achten: Kopiere nur die Template-Dateien aus dem Parent Theme in dein Child Theme, die du wirklich benötigst bzw. verändern möchtest. Dazu gehören beispielsweise oft header.php , footer.php oder single.php.
Kopierst du die gesamte Struktur deines Parent Themes, wird das Child Theme unnötig überladen, schwer zu überarbeiten und im Grunde lädst du alle Dateien doppelt. Weniger ist hier wieder einmal mehr-
6. Nutze modulare Anpassungen über get_template_part()
Wenn du den Child Theme sogar noch schlauer einsetzen und nur die notwendigsten Informationen übertragen willst, kannst du den Hook get_template_part() verwenden.
Anstatt nämlich große Template Dateien zu kopieren, kannst du über get_template_part() auch nur einzelne Module oder Teile aus einem Template, wie zum Beispiel content.php , sidebar.php anpassen.
get_template_part('template-parts/content', 'page'); Dieser Code 👆🏻 lädt nur den Bereich content-page.php im Parent Theme hoch-
7. Achte auf die Template Hierarchy
WordPress verwendet eine Template Hierarchie, um die richtigen Dateien in der richtigen Reihenfolge zu laden. Bei der Anpassung von Templates solltest du daher zuerst die Hierarchie überprüfen, um auch wirklich die richtigen Dateien zu überschreiben.
8. Teste alle deine Anpassungen in einer Staging Umgebung
Was allgemein für jede Anpassung auf der Webseite gilt, gilt auch für das Child Theme. Teste deine Anpassungen vorher unbedingt auf einer Staging Umgebung und mache ein Backup. So kannst du Probleme vermeiden und Fehler ordentlich aufbereiten – ganz ohne Druck.
4. Best Practices & praktische Anwendungsbeispiele für WordPress Child Theme
Nun, da du ein Child Theme installiert hast, kannst du dich an die Bearbeitung machen und Funktionen oder Änderungen einarbeiten. Tatsächlich ist es so, dass du das Child Theme hauptsächlich über Codes anpassen solltest. Dazu stehen dir folgende Grundlagen zur Verfügung:
style.css im child: hat es den header inkl.
Template: parent-theme-verzeichnisname?functions.php : lädt es parent- und child-styles korrekt per
wp_enqueue_scripts(kein@import)?verzeichnisstruktur :
template-parts/,assets/(css/js/img),languages/etc. vorhanden?
Beachte bitte immer deine Arbeit mit Codes vorher getestet werden sollte. Denn schon kleine Fehler können deine Webseite lahm legen. Deshalb solltest du vor der Veröffentlichung neuer Codes ein Backup machen und dich gegebenenfalls mit einem Entwickler oder einem WordPress Experten in Verbindung setzen.
🔧 CSS richtig im Child Theme einbinden
Damit die Styles des Parent Themes geladen werden, ergänze die folgende Funktionalität in der functions.php :
add_action('wp_enqueue_scripts', 'mein_child_theme_styles');
function mein_child_theme_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
?> 🔧 Eigenes JavaScript einbinden
Die functions.php kannst du auch um dein JavaScript ergänzen. Füge dazu diesen Code ein:
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/meinscript.js', array('jquery'), '1.0', true); Lege anschließend den folgenden JavaScript js/meinscript.js im Child Theme an.
🔧 Funktionen gezielt erweitern oder entfernen
In der functions.php kannst du natürlich auch alle möglichen Funktionen einfügen, wie auch entfernen. Beispielsweise eine Script, aus dem Parent Theme, dass du nicht mehr benötigst.
Beispiel:
Script aus dem Parent Theme im Child Theme ausschließen.
function mein_child_dequeue_scripts() {
wp_dequeue_script('parent-script-handle');
}
add_action('wp_enqueue_scripts', 'mein_child_dequeue_scripts', 20); 🔧 Template-Dateien anpassen
- Kopiere die Template-Datei (z. B.
header.phpodersingle.php) aus dem Parent Theme in dein Child Theme. Bearbeite die kopierte Datei nach deinen Wünschen.
Beispiel :
Original im Parent Theme:
/wp-content/themes/twenty-twenty-one/header.phpKopie im Child Theme:
/wp-content/themes/twenty-twenty-one-child/header.php
Nun kannst du den Header nach Belieben anpassen, ohne das Parent Theme zu verändern.
🔧 Visuelle Anpassungen über CSS vornehmen
Du kannst nun das style.css -Dokument deines Child Themes verwenden, um visuelle Anpassungen vorzunehmen, ohne das Parent Theme zu verändern.
Beispiel 1 – Hintergrundfarbe ändern :
body {
background-color: #f4f4f4; /* Hintergrundfarbe ändern */
} Beispiel 2 – Header-Textfarbe ändern :
header h1 {
color: #0047FF; /* Header-Textfarbe ändern */
} 🔧 Benutzerdefinierte Menüs einfügen
Ein gerne verwendetes Snippet ist die Integration eines benutzerdefinierten Menüs. Das folgende Beispiel über die register_nav_menu() ermöglicht es dir, benutzerdefinierte Menüs zu registrieren. Du kannst das Menü schließlich im WordPress Customizer oder in einem Template verwenden.
function mein_custom_menu() {
register_nav_menu('mein-menu', 'Mein Benutzerdefiniertes Menü');
}
add_action('after_setup_theme', 'mein_custom_menu'); 🔧 Benutzerdefinierte Wiegets hinzufügen
Ebenso beliebt sind benutzerdefinierte Widgets oder Widget-Bereiche, in denen du gezielte eigene Inhalte, wie zum Beispiel Texte, Bilder oder Shortcodes einfügen kannst.
Der Coderegister_sidebar() macht es einfach, neue Widget-Bereiche zu erstellen, die du später unter Design > Widgets hinzufügen kannst.
function mein_custom_widgets() {
register_sidebar(array(
'name' => 'Mein Sidebar Widget',
'id' => 'mein-sidebar',
'before_widget' => '<div class="widget">',
'after_widget' => ' </div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'mein_custom_widgets'); 🔧 Beitragsbilder (Post Thumbnails) aktivieren
WordPress unterstützt standardmäßig leider keine Beitragsbilder, wenn sie nicht extra aktiviert werden. Mit dem folgenden Code kannst du deine Beitragsbilder schnell und effizient aktivieren.
function mein_theme_support() {
add_theme_support('post-thumbnails'); // Aktiviert Beitragsbilder für Posts
}
add_action('after_setup_theme', 'mein_theme_support'); 🔧 Benutzerdefinierte Post-Typen (Custom Post Types)
Über dein Child Theme kannst du auch wunderbar benutzerdefinierte Post-Types registrieren. Egal ob du Portfolio-Elemente hinzufügen möchtest oder einfach über die Basis von „Beiträge“ und „Seiten“ hinausgehen möchtest. Bei Online-Shops werden beispielsweise gerne „Produkt“-Post-Types angewendet.
Mit diesem Snippet ermöglichst du eine viel individuellere Gestaltung deiner Webseite, die zu deinem Business passt. Nutze dafür:
function mein_custom_post_type() {
register_post_type('portfolio', array(
'labels' => array(
'name' => 'Portfolios',
'singular_name' => 'Portfolio'
),
'public' => true,
'has_archive' => true,
'supports' => array('title', 'editor', 'thumbnail'),
));
}
add_action('init', 'mein_custom_post_type'); 🔧 Benutzerdefinierte Footer-Nachricht hinzufügen
Viele Vorlagen oder vorgefertigte Footer sind bei WordPress einfach nicht schön bzw. individuell genug. Über dein Child Theme kannst du dir benutzerdefinierte Nachrichten im Footer hinterlegen, was ganz einfach über einen wp_footer -Hook eingebaut werden kann.
Um benutzerdefinierte Inhalte in den Footer zu befördern nutze den folgenden Code:
function mein_footer_text() {
echo '<p>© 2025 Mein Unternehmen. Alle Rechte vorbehalten. </p>';
}
add_action('wp_footer', 'mein_footer_text'); 🔧 Testen und Fehlerbehebungen
Staging-Umgebung verwenden : Bevor du Änderungen live auf deiner Seite durchführst, solltest du sie in einer Staging-Umgebung testen.
Debugging aktivieren : Aktiviere das WordPress-Debugging, um etwaige Fehler oder Probleme schneller zu identifizieren:
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true); 5. So einfach legst du ein WordPress Child Theme an
Das WordPress Child Theme ist eine tolle Möglichkeit, Design und Funktionen deines WordPress Themes zu verbessern, anzupassen oder einfach nur zu verändern. Das Child Theme schützt deine individuellen Anpassungen vor Überschreibungen bei den nächsten Updates.
Über das Child Theme bleibt die Struktur des Parent Themes gleich, wird aber mit deinen neuen Aspekten sozusagen an den richtigen Stellen überschrieben.
Die Verwendung eines Child Themes bedeutet für dich als Webseitenbetreiber also eigentlich maximale Freiheit – insbesondere im Hinblick auf die Individualisierung deiner Inhalte, egal ob Menü, Footer, Farben, Schriften, Layouts und und und …
All in all ist das Child Theme eine einfache Funktion, um langfristige Projekte ideal umzusetzen.
Wie verwendest du dein Child Theme und welche Ideen hast du damit schon umgesetzt, um deine Webseite rundum perfekt auf dich anzupassen? 🙂
Liebe Johanna,
Child-Theme klingt nach einem guten Tool. Super erläutert- danke dir. 🙂
Liebe Grüße
Nick
Liebe Johanna,
herzlichen Dank für die super Erklärung!
Viele Grüße
Timo