WordPress Child Theme erstellen 2020

Seit der WordPress Version 4.7 (Vaughan) können benutzerdefinierte Styles ganz bequem im WordPress Customizer unter „Zusätzliches CSS“ eingetragen werden. Ändert dieses Feature etwas an der Art und Weise wie ein WordPress Child Theme im Jahr 2020 erstellt wird?

Sehen wir uns zunächst einmal die verschiedenen Anwendungsfälle für ein WordPress Child Theme an und wie man ein solches Child Theme erstellen kann.

Was ist ein WordPress Child Theme?

Ein Child Theme ist ein Theme, welches die Funktionen und Design-Einstellungen eines anderen WordPress Themes (Parent Theme) nutzt und mit eigenen Styles, Templates und Funktionen ergänzt bzw. angepasst wird.

Wozu brauche ich ein Child Theme?

Ein Child Theme benötige ich, wenn ich Änderungen an einem bestehenden WordPress Theme (Parent Theme) vornehmen und diese auch nach den kommenden Updates behalten möchte.

Diese Änderungen können sein:

• CSS Styles anzupassen (die CSS Anweisungen können aber auch in das „Zusätzliches CSS“ im Customizer oder für alle Elementor User in das „Custom CSS“ eingetragen werden)
• Funktionen hinzuzufügen, die man nicht mit Plugins realisieren kann oder möchte (hier kann man notfalls auch auf die Plugins Code Snippets und Post Snippets ausweichen)
• Page Templates und seit WordPress 4.7 auch Post Type Templates hinzuzufügen oder zu ändern
• Den Demo Inhalt einer Demo Website mit einem Klick zu importieren (siehe auch den Beitrag Demo Website erstellen mit One Click Demo Import)

Solltest du diese Änderungen direkt im Parent Theme vornehmen, würden sie beim nächsten Update verloren gehen.

WordPress Child Theme erstellen in 3 Schritten:

Auch in 2019 ist die folgende Vorgehensweise aktuell, wenn man ein Child Theme in WordPress anlegen möchte:

Schritt 1: Neuen Child Theme Ordner im Verzeichnis „themes“ erstellen

Erstelle einen neuen Ordner im Verzeichnis wp-content > themes. Den Zugang zu diesem Verzeichnis erhältst du mit einem FTP Programm wie Filezilla.

Die FTP Zugangsdaten erhältst du von deinem Hosting Anbieter. Hier am Beispiel von Alfahosting (Affiliate Link):

In das Feld „Server“ kannst du entweder den „Hostname“ oder deinen Domain Namen eingeben (ohne http://). „Benutzername“ und „Passwort“ kannst du einfach übernehmen. Einen „Port“ brauchst du bei Alfahosting nicht angeben.

Der Name des Ordners, den du im Verzeichnis wp-content > themes erstellst, kann dem Namen deines Child Themes entsprechen, muss er aber nicht. Wichtig ist, dass du nur Kleinbuchstaben verwendest und bei mehreren Wörtern diese mit einem Bindestrich trennst. In diesem Ordner erstellst du die folgenden zwei Dateien: style.css und functions.php.

Schritt 2: Datei style.css erstellen

Erstelle eine Datei namens style.css in einem Texteditor wie Notepad oder Textedit, füge den folgenden Code ein und ersetze ihn mit deinen Daten. Die wichtigste Angabe hier ist „Template“. Hier fügst du den Ordnernamen deines Parent Themes ein.

/*
 Theme Name:    My Child Theme
 Theme URI:     https://webgeckos.com/geckos-beauty-demo/
 Description:   Mit dem WordPress Theme Geckos Beauty lässt sich einfach eine Friseur, Spa oder Beauty Salon Website erstellen.
 Author:        Danijel Rose
 Author URI:    https://webgeckos.com
 Template:      oceanwp
 Version:       1.0.0
 License:       GNU General Public License v2 or later
 License URI:   http://www.gnu.org/licenses/gpl-2.0.html
*/

Wie der Name style.css bereits vermuten lässt, kommen in diese Datei all deine Designanpassungen hinein.

Schritt 3: Datei functions.php erstellen

Kopiere nun den folgenden Code, füge ihn in eine zweite Datei ein und nenne diese Datei functions.php.

<?php
// Action Hook, um die eigenen Styles zu integrieren
add_action( 'wp_enqueue_scripts', 'childtheme_styles' );

function childtheme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ));
}

Der Name der Datei ist auch in diesem Fall selbsterklärend. Hier kommen alle zusätzlichen Funktionen hinein, die du für dein Child Theme benötigst.

Schritt 4: Screenshot.png erstellen (optional)

Ich persönlich würde an deiner Stelle diesen Schritt weglassen, falls niemand sonst dein Child Theme benutzen wird außer du selbst. Für den Fall, dass du ein WordPress Multisite Projekt betreibst, wo deine User einen eigenen Blog mit Hilfe deines Child Themes anlegen können oder wenn du sogar dein Child Theme zum Verkauf anbieten möchtest, dann empfiehlt es sich auf jeden Fall ein Bild namens screenshot.png in deinen Child Theme Ordner zu kopieren.

Es kann sich dabei um ein beliebiges Bild handeln wie z. B. ein Logo oder um einen wirklichen Screenshot deines Themes. Dafür müsstest du aber zuerst eine Demo Website erstellen (hier nochmals der Hinweis auf den Beitrag Demo Website erstellen mit One Click Demo Import). Von der Demo Website kannst du anschließend einen Screenshot aufnehmen (für alle Mac User: Shift-command-4). Achte darauf, dass die Abmessungen des Bildes 1200 x 900 Pixel betragen und der Name der Datei exakt screenshot.png lautet.

Das wars! Nun musst du nur noch unter Design > Themes dein Child Theme aktivieren.

Was hat sich nun ab WordPress 4.7 an der Art und Weise geändert, wie ein Child Theme erstellt wird?

Die Möglichkeit, eigene Styles direkt in den WordPress Customizer oder bei Elementor in das Custom CSS Feld einzutragen sorgt dafür, dass zumindest kleinere Child Themes, die nur ein paar Zeilen eigenen CSS-Code in der style.css-Datei enthalten, nicht mehr erstellt werden müssen. Da jedoch die meisten Premium WordPress Themes, wie auch immer mehr kostenlose Themes dieses Feature bereits vorher schon integriert hatten, kann es gut möglich sein, dass sich an der Vorgehensweise nicht viel ändert.

[stay id=“2388″]

Bei allen anderen oben genannten Anwendungsfällen kommt man ohnehin nicht daran vorbei, ein WordPress Child Theme zu erstellen.