So erstellen Sie ein Child-Theme in WordPress: Eine einfache Anleitung 

Als WordPress-Website- Betreiber möchten Sie sicher gerne mit dem Website-Design und den Funktionen von WordPress-Themes experimentieren. Doch wie gelingt das am besten, ohne das Original-Theme zu verändern? Ein Child-Theme in WordPress ist eine hervorragende Möglichkeit, Ihr Theme anzupassen und zu testen, ohne sich Gedanken darüber machen zu müssen, ob Sie Ihr Original-Theme beschädigen.

Die Verwendung eines WordPress-Child-Themes ist eine clevere Möglichkeit, den Code Ihres Themes sicher anzupassen, ohne Ihre Arbeit zu riskieren. Wenn Sie Änderungen am CSS, HTMLoder PHP, ist ein Child-Theme die beste Wahl. Denn ohne ein solches Theme könnten Aktualisierungen Ihres Haupt-Themes Ihre Änderungen zunichtemachen.

Damit es ganz einfach geht, haben wir eine anfängerfreundliche Anleitung erstellt, die erklärt, wie ein Child-Theme funktioniert, wie man es einrichtet und wie man die gewünschten Änderungen vornimmt. Legen Sie gleich los und passen Sie es ganz nach Ihren Wünschen an!

Child-Themes in WordPress verstehen

Ein Child-Themeist, wie der Name schon sagt, eine Art „Erweiterung“ Ihres Haupt- oder Parent-Themesund übernimmt dessen Funktionen und Stile. Wenn Sie Ihr WordPress-Theme anpassen möchten, kann das direkte Bearbeiten der Theme-Dateien riskant sein, da jede Änderung das Kern-Theme verändern kann. Hier kommen Child-Themes ins Spiel: Sie bieten eine sicherere Möglichkeit, Änderungen vorzunehmen, ohne die Originaldateien zu verändern.

Das Child-Theme erbt automatisch den Hauptstil aus der style.css-Datei des Parent-Themes, welche das allgemeine Erscheinungsbild des Themes festlegt. Mit einem Child-Theme können Sie diesen Stil einfach anpassen oder erweitern, indem Sie eigene Dateien hinzufügen oder die vorhandenen bearbeiten. So haben Sie die Flexibilität, das Theme individuell zu gestalten, ohne die Originaldateien zu verändern.

Child-Themes werden in einem eigenen Ordner gespeichert, getrennt vom Parent-Theme, und nutzen dessen Funktionen, sofern Sie keine Änderungen vornehmen. Wenn Sie ein Child-Theme in WordPress aktivieren, wird es mit dem Parent-Theme verknüpft, und WordPress prüft zuerst die Dateien des Child-Themes. Falls eine Datei nicht geändert wurde, verwendet WordPress die Version des Parent-Themes.

Beachten Sie jedoch, dass ein Child-Theme nicht allein funktionieren kann. Es benötigt das zugehörige Parent-Theme, um ordnungsgemäß zu funktionieren.

Lesen Sie mehr zum Thema: WordPress-Plugin- und Theme-Entwicklung auslagern

Vorteile der Verwendung eines Child-Themes in WordPress

vorzunehmen, WordPress- ohne Ihre bisherige Arbeit zu riskieren. Würden Sie die Dateien des Parent-Themes direkt bearbeiten, würden Ihre Anpassungen bei jedem Update des Themes verloren gehen. Das kann Sie vor die frustrierende Wahl stellen: Entweder Sie verzichten auf alle zukünftigen Updates, was zu Kompatibilitäts- und Sicherheitsproblemen führen kann, oder Sie aktualisieren und verlieren dabei Zeit und Mühe, die Sie in die Anpassung Ihres WordPress-Themes.

Mit einem Child-Theme entfällt diese Entscheidung. Alle Ihre Änderungen werden sicher in einem separaten Ordner gespeichert, sodass sie auch nach Updates des Parent-Themes erhalten bleiben. Außerdem lassen sich Ihre Anpassungen so problemlos von einer Website auf eine andere übertragen, was Ihnen Zeit spart, wenn Sie mehrere Websites betreuen oder auf eine neue migrieren.

Ein weiterer großer Vorteil von Child-Themes ist, dass sie eine hervorragende Möglichkeit bieten, die Entwicklung eigener Themes in einer risikoarmen Umgebung zu erlernen. Sie können mit Änderungen und neuen Funktionen experimentieren, und falls etwas nicht wie geplant verläuft, können Sie das Child-Theme einfach deaktivieren. Ihre Website kehrt dann sofort zum ursprünglichen Aussehen und den Funktionen des Parent-Themes zurück – es entsteht also kein Schaden.

Erfahren Sie mehr darüber: Wie lassen sich Header in WordPress nahtlos bearbeiten und anpassen?

Was Sie vor dem Erstellen eines Child-Themes in WordPress tun sollten

Wir haben schon oft erlebt, dass WordPress-Nutzer voller Tatendrang ihre Websites anpassen wollten, dann aber an ihre Grenzen stießen, als unerwartete Fehler auftraten. Das ist völlig verständlich: Die Arbeit mit einem Child-Theme kann spannend sein, bis die technischen Herausforderungen beginnen.

Deshalb ist es wichtig, sich vor dem eigentlichen Einstieg etwas vorzubereiten, genau wie vor einer Prüfung. Hier sind ein paar Tipps, die Sie beachten sollten, bevor Sie mit der Erstellung Ihres Child-Themes beginnen:

Die Grundlagen des Programmierens verstehen

Die Arbeit mit einem Child-Theme bedeutet, dass Sie mit Code arbeiten werden. Grundlegende Kenntnisse in HTML, CSS und PHP sind daher hilfreich (und JavaScript , wenn Sie fortgeschrittenere Kenntnisse anstreben). Falls Sie noch keine Programmiererfahrung haben, bietet das WordPress-Theme-Handbuch einen guten Einstieg und schnelle Anleitungen.

Lerne: Wie du Figma in Code umwandelst: React, HTML, Vue, JS, CSS

Wählen Sie das richtige Elternthema

Wählen Sie ein Basisthema, das Ihren Wünschen in Aussehen und Funktionalität bereits nahekommt. Idealerweise finden Sie eines, das nur wenige Anpassungen benötigt, um die Personalisierung zu vereinfachen. Wenn Sie das Theme komplett wechseln, werfen Sie einen Blick auf unsere Checkliste mit Tipps vor dem WordPress-Theme-Wechsel – so vermeiden Sie unnötigen Ärger!

Verwenden Sie einen lokalen Teststandort oder eine Testumgebung

Es empfiehlt sich, zunächst auf einer lokalen Testumgebung oder einer Staging-Umgebung , anstatt direkt auf der Live-Website zu arbeiten. So vermeiden Sie, dass Fehler das Erscheinungsbild oder die Funktionalität Ihrer Live-Website beeinträchtigen.

Erstellen Sie eine Sicherungskopie Ihrer Website

Bevor Sie Änderungen vornehmen, erstellen Sie ein Backup Ihrer Website. Wenn Sie dies zum ersten Mal tun, kann ein Plugin wie Duplicator den Backup-Prozess vereinfachen und stressfrei gestalten. So können Sie Ihre Website schnell wiederherstellen, falls etwas schiefgeht.

Sobald Sie diese Grundlagen beherrschen, können Sie unserer Schritt-für-Schritt-Anleitung folgen und das Thema für Ihr Kind selbstbewusst gestalten!

Lernen Sie: Die besten Lösungen zum Sichern mehrerer WordPress-Websites

So erstellen Sie manuell ein Child-Theme in WordPress: 5 einfache Schritte

Das Erstellen eines Child-Themes in WordPress ist einfacher als es klingt, und es ist eine großartige Möglichkeit, die Funktionsweise von Child-Themes zu verstehen, ohne Ihr Haupt-Theme zu gefährden.

Wir zeigen Ihnen Schritt für Schritt, wie Sie ein Child-Theme auf Basis des Standard-Themes Twenty Fifteen von WordPress erstellen und einige individuelle Anpassungen vornehmen, um den Prozess in der Praxis zu sehen.

Schritt 1: Erstellen Sie einen Ordner für ein untergeordnetes Theme

Erstellen Sie zunächst einen neuen Ordner auf Ihrem Computer, in dem alle Dateien für Ihr Child-Theme gespeichert werden. Diesen Ordner laden Sie später auf Ihre Website hoch.

Sie können den Ordner nach Ihrem übergeordneten Theme benennen und „-child“ anhängen. Wenn Ihr übergeordnetes Theme beispielsweise „Twenty Twenty-Two“ heißt, würde der Ordner Ihres untergeordneten Themes „twentytwentytwo-child“ heißen. So ist er leicht als untergeordnetes Theme des übergeordneten Themes zu erkennen.

Schritt 2: Einrichten eines Stylesheets für Ihr Child-Theme

Erstellen Sie als Nächstes eine style.css-Datei im Ordner Ihres neuen Child-Themes. Diese Datei enthält alle benutzerdefinierten Stile für Ihr Child-Theme.

Um das Stylesheet korrekt einzurichten, fügen Sie die folgenden Header-Kommentare ganz oben in Ihre style.css-Datei ein. Dadurch wird WordPress mitgeteilt, dass Ihr neues Theme ein Kind-Theme des Eltern-Themes ist:

Theme-Name: Twenty Twenty-Two Child-Theme URI: https://wordpress.org/themes/twentytwentytwo/ Autor: WordPress-Team Autor-URI: https://wordpress.org/ Template: twentytwentytwo Beschreibung: Child-Theme für Twenty Twenty-Two Version: 1.0 */

Nach dem Speichern gehen Sie zu Ihrem WordPress-Dashboard und dann zu Design → Themes. Ihr Child-Theme sollte nun dort angezeigt werden.

Schritt 3: Verknüpfung der Stylesheets für übergeordnetes und untergeordnetes Theme

Um sicherzustellen, dass die Stile Ihres Eltern-Themes angewendet werden, müssen wir dessen Stylesheet mit dem Child-Theme verknüpfen. Dies geschieht durch Erstellen einer functions.php-Datei im Ordner Ihres Child-Themes und Hinzufügen des folgenden Codes:

<?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() {wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}

Dieser Code lädt das Stylesheet des übergeordneten Themes, sodass Ihr untergeordnetes Theme dessen gesamtes Styling erbt.

Lernen Sie: Wie repariert und optimiert man eine WordPress-Datenbank?

Schritt 4: Bearbeiten Sie das Stylesheet (style.css) des Child-Themes

Sie können nun Ihre benutzerdefinierten Stile direkt in der style.css-Datei des Child-Themes hinzufügen. Um beispielsweise die Farbe der Links auf Ihrer Website zu ändern, könnten Sie Folgendes hinzufügen:

a {color: #D54E21;text-decoration: none;}

Diese Regel überschreibt die Linkformatierung des übergeordneten Themes, ohne den Rest des Designs zu beeinträchtigen.

Wichtig zu wissen: Sollten Sie Ihre Website mit Code, ohne Code oder mit einem Website-Baukasten erstellen?

Schritt 5: Eine Vorlagendatei bearbeiten

Mit einem Child-Theme können Sie auch einzelne Templates anpassen. Angenommen, Sie möchten die Darstellung von Beiträgen ändern, indem Sie die Datei single.php bearbeiten.

• Kopieren Sie die Datei single.php aus dem übergeordneten Theme und fügen Sie sie in den Ordner Ihres untergeordneten Themes ein.
• Öffnen Sie die Datei in einem Texteditor und nehmen Sie Ihre Änderungen vor.

Wenn Sie beispielsweise den Kommentarbereich von einzelnen Beitragsseiten entfernen möchten, suchen Sie diesen Codeabschnitt:

if ( comments_open() || get_comments_number() ) :comments_template();endif;

Löschen Sie die Datei oder kommentieren Sie sie aus, um die Kommentare auszublenden. WordPress verwendet dann die geänderte single.php-Datei aus dem Ordner des Child-Themes, sodass Aktualisierungen des Parent-Themes Ihre Anpassungen nicht überschreiben.

Lerne: Wie erstelle ich eine benutzerdefinierte Seitenvorlage in WordPress?

So erstellen Sie ein Child-Theme mit einem Plugin (keine Programmierkenntnisse erforderlich)

Wenn Sie sich nicht mit Programmierung auskennen, aber trotzdem ein Child-Theme erstellen möchten, haben Sie Glück! Es gibt zwar mehrere Plugins, mit denen Sie in WordPress ein Child-Theme erstellen können, wir werden jedoch das Plugin „ Child Theme Configurator“ um den Prozess zu erklären.

Dieses Plugin macht das Einrichten und Anpassen eines Child-Themes für klassische (nicht-blockbasierte) WordPress-Themes kinderleicht. Hier finden Sie eine einfache Schritt-für-Schritt-Anleitung für den Einstieg.

Schritt 1: Plugin installieren und aktivieren

Gehen Sie zunächst in Ihr WordPress-Dashboard, suchen Sie im Bereich „Plugins“ nach „Child Theme Configurator“ und installieren Sie es. Nach der Aktivierung finden Sie die Einstellungen unter „Werkzeuge“ → „Child Themes“.

Schritt 2: Das Child-Theme einrichten

Im Child-Theme-Konfigurator wechseln Sie zum „Eltern/Kind“ . Dort finden Sie eine Option zur Auswahl einer Aktion. Wählen Sie „Neues Child-Theme erstellen“, um zu beginnen.

Schritt 3: Wählen Sie Ihr übergeordnetes Design

Wählen Sie als Nächstes im Dropdown-Menü das übergeordnete Theme aus, auf dem Sie aufbauen möchten. In diesem Beispiel verwenden wir das Theme „Hestia“. Klicken Sie nach der Auswahl auf die Schaltfläche „Analysieren“, um sicherzustellen, dass das Theme mit der Erstellung eines untergeordneten Themes kompatibel ist.

Schritt 4: Benennen Sie Ihren Child-Theme-Ordner

Anschließend werden Sie aufgefordert, den Ordner zu benennen, in dem das Child-Theme gespeichert werden soll. Hier können Sie Ihrer Kreativität freien Lauf lassen oder es einfach halten und beispielsweise „Hestia-Child“ wählen, um die Übersicht zu behalten.

Schritt 5: Entscheiden Sie, wo benutzerdefinierte Stile gespeichert werden sollen

Hier steht eine wichtige Entscheidung an: Sie können neue benutzerdefinierte Stile entweder im primären Stylesheet (style.css) Ihres Child-Themes oder in einer separaten Stylesheet-Datei speichern.

• Primäres Stylesheet: Dies ist die Hauptdatei, in der die Stile standardmäßig gespeichert werden. Änderungen hier überschreiben die ursprünglichen Designstile.

• Separates Stylesheet: Diese Option speichert Ihre benutzerdefinierten Stile in einer neuen Datei, sodass die Stile des ursprünglichen Themes unberührt bleiben.

Fürs Erste verwenden wir das primäre Stylesheet, aber Sie können gerne die separate Option ausprobieren, wenn Sie das Erscheinungsbild des übergeordneten Themes vollständig beibehalten möchten.

Erfahren Sie mehr: Die besten Webdesign-Software-Tools für beeindruckende und benutzerfreundliche Websites

Schritt 6: Festlegen der Stylesheet-Verarbeitung des übergeordneten Designs

Scrollen Sie nach unten und wählen Sie aus, wie das Stylesheet des übergeordneten Themes geladen werden soll. Wir behalten die Standardoption „WordPress-Style-Queue verwenden“ bei, da das Plugin dies automatisch übernimmt.

Schritt 7: Details des Child-Themes anpassen

Wenn Sie Schritt 7 erreichen, klicken Sie auf „Klicken Sie hier, um die Attribute des Child-Themes zu bearbeiten“. Hier können Sie Details wie den Namen, die Beschreibung und die Version des Child-Themes hinzufügen.

Schritt 8: Menüs und Widgets kopieren

Normalerweise werden beim Erstellen eines Child-Themes Ihre Menüs und Widgets zurückgesetzt. Um dies zu vermeiden, aktivieren Sie in Schritt 8 das Kontrollkästchen, um diese vom Parent-Theme in das Child-Theme zu kopieren.

Erstelle dein Kinderthema

Klicken Sie abschließend auf „Neues Child-Theme erstellen“. Das Plugin erstellt automatisch einen Ordner für Ihr Child-Theme, der die für zukünftige Anpassungen benötigten style.css- und functions.php-Dateien enthält.

Vorschau und Aktivierung

Klicken Sie vor der Aktivierung auf den Vorschau-Link oben auf dem Bildschirm, um sicherzustellen, dass alles korrekt angezeigt wird. Wenn die Vorschau Ihres Child-Themes einwandfrei funktioniert und keine Elemente beschädigt werden, klicken Sie auf „Aktivieren & Veröffentlichen“, um es live zu schalten!

Und fertig! Ihr Child-Theme ist jetzt aktiv. Es sieht nun genauso aus und funktioniert genauso wie Ihr Parent-Theme. Sie können jetzt bedenkenlos Anpassungen am Child-Theme vornehmen, ohne das Original zu beeinträchtigen. Viel Spaß beim Gestalten!

Erfahren Sie mehr über: Die besten WordPress-Studio-Themes für kreative Unternehmen

Was tun, wenn das WordPress-Child-Theme nicht funktioniert?

Werden Ihre Änderungen im Child-Theme nicht angezeigt? Keine Sorge, hier finden Sie einige häufige Probleme und Lösungen, damit alles wie erwartet funktioniert.

Überprüfen Sie Ihre functions.php-Datei

Stellen Sie zunächst sicher, dass Sie das Stylesheet des Child-Themes in Ihrer functions.php-Datei eingebunden haben. Andernfalls wird das Child-Theme nicht korrekt geladen, und Ihre Website zeigt weiterhin das Parent-Theme an, wodurch der Eindruck entsteht, Ihre Änderungen würden nicht sichtbar sein.

Lesenswert: Laravel vs. WordPress: Die größten Rivalen von PHP im Vergleich

Vergewissern Sie sich, dass Ihre Stylesheet-Datei den Namen style.css trägt

Bitte überprüfen Sie, ob Ihre Stylesheet-Datei style.css heißt und nicht stylesheet.css oder anders. WordPress erwartet, dass die Haupt-Stylesheet-Datei des Child-Themes style.css heißt. Bei einem anderen Namen erkennt die functions.php-Datei die Datei nicht, und Ihre benutzerdefinierten Stile werden nicht angewendet.

Überprüfen Sie den Vorlagennamen in style.css

In Ihrer style.css-Datei muss das Feld „Template“ exakt mit dem Namen des Ordners Ihres übergeordneten Themes übereinstimmen. Dadurch weiß WordPress, welches Theme als übergeordnetes Theme verwendet werden soll. Ist der Name falsch, weiß WordPress nicht, auf welchem ​​Theme das untergeordnete Theme basieren soll.

Cache leeren

Manchmal kann der Cache verhindern, dass Aktualisierungen angezeigt werden. Leeren Sie daher Ihren Cache, insbesondere wenn Sie ein Caching-Plugin verwenden. Es kann auch hilfreich sein, den Browser-Cache zu leeren oder Ihre Website im Inkognito-Modus zu öffnen, um zu prüfen, ob Ihre Änderungen sichtbar sind. Wenn Sie aktiv an Ihrem Child-Theme arbeiten, sollten Sie alle Caching-Plugins deaktivieren, bis Sie fertig sind.

Verwenden Sie !important in Ihrem CSS-Code

Falls die Stile des übergeordneten Themes Ihre benutzerdefinierten CSS-Anweisungen weiterhin überschreiben, fügen Sie den Stilen, die Sie priorisieren möchten, das Attribut `!important` hinzu. Dadurch wird sichergestellt, dass die Stile des untergeordneten Themes Vorrang vor denen des übergeordneten Themes haben. Zum Beispiel:

p {background-color: gray !important;}

Dieser Trick kann für bestimmte Elemente, IDs und CSS-Klassen hilfreich sein, um sicherzustellen, dass Ihre Änderungen angewendet werden.

Wenden Sie sich an den Theme-Support oder besuchen Sie die Foren

Wenn Sie all diese Schritte ausprobiert haben und Ihr Child-Theme immer noch nicht funktioniert, wenden Sie sich am besten an den Support des Theme-Entwicklers oder besuchen Sie das Forum des Themes auf WordPress.org. Manchmal verfügen Themes über spezielle Konfigurationen oder benutzerdefinierten Code, der die Funktionsweise von Child-Themes beeinflussen kann. Der Entwickler hat möglicherweise konkrete Tipps für Sie.

Abschluss

Das war's! Sie sollten nun ein gutes Verständnis davon haben, was ein WordPress-Child-Theme ist und wie es mit einem Parent-Theme zusammenarbeitet. Die Installation eines Themes ist nur der Anfang beim Erstellen einer WordPress-Website.

Der integrierte Gutenberg-Editor oder der Theme-Builder Ihres Themes helfen Ihnen zwar bei kleineren Designanpassungen, doch die Erstellung eines Child-Themes eröffnet Ihnen noch viel mehr Möglichkeiten. Mit einem Child-Theme können Sie nicht nur das Design anpassen, sondern auch die Funktionalität individualisieren, ohne die Kerndateien zu verändern. So haben Sie die volle Freiheit, Ihre Website einzigartig zu gestalten.

Häufig gestellte Fragen zur Erstellung eines Child-Themes in WordPress