Denis Sandmann

Tutorial: WordPress Child-Theme erstellen

Du bist also soweit. WordPress installiert. Theme installiert. Inhalt eingefügt. Ein paar CSS Änderungen gemacht. Doch nach dem letzten Update sind all deine CSS Anpassungen futsch.

Damit das nicht passiert erstellt man sogenannte Child-Themes. Ein Child-Theme ist wie der Name schon sagt eine Art Nachwuchs Theme. Es übernimmt die Einstellungen des Eltern-Themes aber bringt auch neue Änderungen mit sich. Nach einem Update des Eltern-Themes bleiben die Änderungen im Child-Theme erhalten, denn das Child-Theme überschreibt das Eltern-Theme. Das ist die richtige Art und Weise an WordPress Themes eigene Veränderungen vorzunehmen.

Das Problem ist, dass nicht jedes Theme direkt mit einem Child-Theme daherkommt. Allerdings ist es nicht sehr schwer ein Child-Theme selbst zu erstellen.

Die Ordner und Dateistruktur anlegen

Das erste was man für ein Child-Theme braucht, ist natürlich das Eltern-Theme. Als Beispiel nehme ich mal das vom WordPress Team entwickelte Twenty Sixteen. Um das Ganze zu vereinfachen gibt hier mein Child-Theme zum Download.

Möchte man jetzt ein Child-Theme erstellen, muss man erstmal die genaue Ordnerbezeichnung des Eltern-Themes kennen. Daher entpacke ich das Twenty Sixteen Theme mal auf meinem Computer.

Der genaue Ordner heißt also twentysixteen.

- Werbeanzeige von Google -

Wordpress-Child-Theme-Tutorial (1) Wordpress-Child-Theme-Tutorial (2)

Als nächstes erstellt man seinen eigenen Ordner in dieser Struktur:

themename-child

In diesem Fall also twentysixteen-child.

Wordpress-Child-Theme-Tutorial (3)

Eigentlich ist nur eine Datei notwendig um ein Child-Theme zu erstellen. Aber man kann auch mehrere Dateien erstellen und sich somit mehr Möglichkeiten für Anpassungen schaffen. Die style.css Datei bietet die Grundlage für spätere CSS Anpassungen.

Mit einem Rechtsklick erstelle ich eine neue Textdatei die ich style.css nenne. Ich empfehle einen Editor wie Notepad++ zu installieren, denn damit ist es etwas einfacher Code zu bearbeiten.

Alternativ lässt die Datei auch mit dem Texteditor von Windows erstellen. Wichtig ist, dass man dann die Datei wirklich als style.css abspeichert. .CSS ist die Dateiendung und sagt später dem Server um welche Art von Datei es sich handelt.

In die Datei style.css schreibt man folgenden Inhalt:


/*
Theme Name: twentysixteen Child Theme
Description: A bare-bones child theme for use with twentysixteen Theme from WordPress. To use this Child Theme, you must have twentysixteen parent theme installed.
Author: Dein Name
Author URI: Deine Website
Template: twentysixteen
Version: 1.0.0
*/

Jenachdem was für ein Theme man als Eltern-Theme benutzt verändern sich hier natürlich die Werte. All diese Informationen werden auch später in der WordPress Administrationsoberfläche angezeigt.

Theme Name:
Hier steht der Name des Themes, am besten man schreibt: Themename Child-Theme

Description:
Hier kommt eine kurze Beschreibung des Themes rein.

Author:
Wer ist der Autor des Themes? Hier sollte dein Name stehen.

Author URI:
Die Website des Autors.

Template:
Dieser Punkt ist sehr wichtig. Hier sollte genau die Bezeichnung des Eltern-Theme Ordners stehen. In diesem Fall twentysixteen.

Version:
Die Version des Child-Themes.

Der Stern und das Slash-Zeichen dienen dazu das diese Informationen als Kommentar im Code gelten und nicht als eigentlich Code. Sonst würde vielleicht ein Fehler angezeigt werden.

Wenn man nun alle Punkte angepasst hat, speichert man die Datei unter dem Namen style.css im Child-Theme Ordner.

Der letzte Schritt wäre, den Child-Theme Order in eine .ZIP Datei zu komprimieren, damit man das Theme hochladen kann. Dazu klickt man mit der rechten Maustaste auf den Child-Theme Ordner und wählt: Senden an -> ZIP komprimierter Ordner.

Wordpress-Child-Theme-Tutorial (4)

Diese .ZIP Datei die dann entsteht, kann man dann in der WordPress Administrationsoberfläche hochladen.

Weitere Änderungen: header.php, footer.php und functions.php

Wer nicht nur CSS Anpassungen vornehmen will, sondern auch mit PHP Code des Themes ein paar Dinge bearbeiten will, der sollte auch eine header.php Datei, eine footer.php und eine functions.php Datei anlegen.

Die header.php und die footer.php Dateien können einfach als Kopien aus dem Eltern-Theme erstellt werden. Die functions.php darf leer sein.

Wenn man diese Dateien nun auch noch dem Child-Theme hinzufügt, dann hat man die Möglichkeit auch den Kopfzeilen und Fußzeilenbereich, sowie einige Funtkionen des Theme zu erweitern oder zu bearbeiten.

Ein Vorschaubild des Child-Themes

Wer es richtig professionell machen möchte, legt seinem Child-Theme noch ein Vorschaubild bei. Am besten mit einer Größe von 500 x 375 Pixeln als .PNG mit dem Namen screenshot.png.

child-theme-screenshot

Fügt man dieses Bild ebenfalls dem Child-Theme hinzu, kann man später in der WordPress Designauswahl auch das Vorschaubild zum Child-Theme sehen.

Hat meine Anleitung mit deinem Theme funktioniert? Was für Änderungen hast du an deinem WordPress Theme vorgenommen? Ich freue mich über deinen Kommentar.

Schreibe einen Kommentar