In wenigen Schritten ein WordPress Child Theme erstellen

Du hast dein regelmäßiges Backup eingerichtet und möchtest jetzt voll durchstarten mit dem ändern und anpassen deiner Seite? Aufgepasst! Damit die Änderungen dauerhaft erhalten bleiben und nicht beim nächsten Theme Update überschrieben werden brauchst du ein sogenanntes Child Theme. Wir zeigen dir wie es geht!

Was ist ein Child Theme?

 

Seit der WordPress Version 3.0 ist es möglich sogenannte Child Themes zu verwenden. Darunter kannst du dir ein Theme vorstellen dass die Funktionen des Eltern-Theme also deinem aktuell aktivierten Theme übernimmt aber dennoch eigenständig ist. Dein bestehendes Theme bekommt also einen verknüpften „Aufsatz“ indem all deine Änderungen und Anpassungen gespeichert werden. Der große Vorteil dabei ist dass du weiterhin ohne Probleme Theme Updates installieren kannst und deine Änderungen dabei im Child Theme erhalten bleiben. Weiters kannst du so einfach verschiedene Anpassungen ausprobieren ohne im Haupt-Quellcode deines Themes zu arbeiten was Schäden am Haupttheme verhindert.

 

Wie erstelle ich ein Child Theme?

 

Ein Child Theme kann auf verschiedene Arten erstellt werden. Einige aktuelle Themes auf Themeforest bieten fertige Child Themes an. Diese können ganz einfach von der Herstellerseite heruntergeladen und installiert werden. Du erhältst ein .ZIP File mit dem Child Theme das du ganz bequem in deinem WordPress Backend unter Themes hochladen und aktivieren kannst. Das Haupt Theme erkennt sofort dass es sich um ein Child Theme handelt und es kann los gehen! Falls du dich für ein freies WordPress Theme entschieden hast muss das Child Theme selber erstellt werden was aber kein großes Problem ist.

 

Dein WordPress Child Theme mit nur einem Klick anlegen:

 

Wie für so ziemlich alles bei WordPress gibt es auch hierfür ein ganz einfaches Plugin! Wir empfehlen den WordPress Child Theme Configurator. Zur Installation einfach „child theme configurator“ in die WordPress Plugin Suche eingeben, das Plugin herunterladen und Aktivieren – das Plugin erscheint anschließend unter Werkzeuge / Child Themes.

 

Im ersten Punkt wählst du dann „Create a new Child Theme“  um im zweiten das gewünschte Parent Theme auszuwählen und durch einen klick auf „Analyze“ im dritten prüfen zu können ob es für dein Parent Theme möglich ist per Klick ein Child Theme zu erstellen. Im Idealfall erscheinen zwei grüne Haken und die Punkte 4-9 (falls nicht ist es immer noch möglich ein Child Theme händisch zu erstellen, mehr dazu unten):

Folgende Einstellungen können getätigt werden:

4 – Hier kannst du einen Namen für euer Child-Theme Projekt vergeben
5 – Hier wählst du aus wie euer neues CSS File angelegt werden soll. Primary Stylesheet (style.css) bewirkt ein eigenständiges CSS File was wir gerne hätten
6 – Um ein leeres CSS zu erhalten und die bisherigen Styles unbeschadet zu lassen wählst du hier „Do not add any parent stylesheet handling“
7 – Hier kannst du eurem Child Theme einen Namen, Versionsnummer usw. geben
8 – Beim ersten erstellen können unter Punkt 8 die angepassten Menüs, Widgets und Einstellungen kopiert werden. Dieser Punkt sollte ausgewählt werden um sicher zu stellen dass etwaige Theme-Updates später keine Auswirkungen auf deine Seite haben
9 – Durch einen klick auf „Configure Child Theme“ wird dein Worpdpress Child Theme erstellt.

Anschließend solltest du das Theme in der Vorschau (klick auf den Link) prüfen um sicher zu gehen dass das Child Theme auch funktioniert:

Wird deine Seite in der Vorschau einwandfrei angezeigt kann das Child Theme aktiviert werden. Dazu wählst du im WordPress Backend „Design – Themes“ aus. Dort sollte jetzt dein Child Theme mit dem von dir definierten Namen stehen:

 

Einfach Aktivieren und fertig ist das WordPress Child Theme und du bist auf der sicheren Seite beim ändern deiner Seite!

 

Wie du dein WordPress Child Theme händisch erstellst:

 

Natürlich gibt es auch die Möglichkeit dein WordPress Child Theme händisch zu erstellen. Dazu benötigst du eine FTP Verbindung zu deinem Server und ein paar Minuten Zeit. Ich erkläre dir Schritt für Schritt wie es funktioniert:

1. Verbinde dich mit einem FTP Programm (wir empfehlen FileZilla) auf deinen Server
2. Navigiere in den Theme Ordner deiner Worpdress Installation und erstelle darin einen neuen Ordner. Der Pfad lautet dein-seitenname/wp-content/themes. Vergib eine sinnvolle Ordnerbezeichnung ohne Leerzeichen. Üblicherweise solltest du die Bezeichnung des Ordners vom Parent-Theme verwenden und mit „-child“ ergänzen – „deinthemename-child“.
3. Jetzt öffnest du einen Editor deiner Wahl (z.B Brackets), erstellst ein neues File und fügst folgenden Code ein:

/*
 Theme Name:   Dein Theme Name Child
 Theme URI:    https://support-camp.iochild_theme
 Description:  Dein Theme Name Child-Theme
 Author:       Pierre Wehinger
 Author URI:   https://support-camp.io
 Template:     Dein Theme Name
 Version:      1.0.0
 Tags:         responsive-layout, dark
 Text Domain:  Dein-Theme-Name-child
*/

@import url("../deinthemename/style.css");

/* Theme Anpassungen beginnen hier */
.h1
{
    font-size: 20px;
}
/* Theme Anpassungen enden hier */

Theme Name, URL usw. können frei angepasst werden. Wichtig ist die korrekte Eingabe deines Theme Namen im @import Bereich! Du musst also „deinthemename“ durch deinen Pfad ersetzen.
Als Beispiel passen wir hier gleich die Schriftgröße mit unserem neuen CSS File an. Alle H1 Elemente werden somit auf 20px gesetzt.
4. Bevor du dein neues Child-Theme aktivierst kannst du noch einen Screnshot deiner Seite erstellen und ihn in der Größe 880×660 Pixel speichern. Das Bild dient später als Vorschaubild im WordPress Backend. Speicher diese Grafik als screenshot.png unter wp-content/themes/deinthemename-child ab.
5. Nun kann dein WordPress Child Theme aktiviert werden! Dazu wählst du im WordPress Backend die Punkte Design – Themes aus und klickst auf aktivieren. Alle Stylesheet-Änderungen in deinthemename-child/style.css überschreiben die betroffenen Stylesheets deines Parent-Themes.

 

Was sonst noch möglich ist…

 

Natürlich lässt sich mit dem WordPress Child Theme mehr machen als nur die style.css Datei zu bearbeiten. Es ist möglich jede Datei deines WordPress Themes 1:1 in dein neues Child Theme zu kopieren und anzupassen. Du willst zum Beispiel eine spezielle Änderung in deinem Header realisieren? Einfach die header.php Datei von deinem Eltern Theme in dein Child Theme kopieren und bearbeiten! Das funktioniert mit allen Theme Files.

 

Mit einem Child Theme kannst du also ganz einfach deine individuellen Anpassungen speichern ohne Angst zu haben das sie nach einem Theme-Update verschwinden. Auch wir als Entwickler sehen eine Menge Vorteile in der Verwendung von Child-Themes jedoch sollte man sich auch immer klar sein das es auch für den Einsatz eines Child-Themes ein grundlegendes Verständnis von WordPress und Programmierarbeiten benötigt.

 

Wir sind euch gerne behilflich beim erstellen und benutzen von WordPress Child Themes – Bei Fragen freuen wir uns über deine Mail oder deinen Kommentar!