WordPress Child Theme erstellen

WordPress Child Theme erstellen

Ein WordPress Child Theme erstellen ist kein Hexenwerk. Hierzu müssen bei WordPress entsprechende Ordner und Dateien angelegt werden. Ein kleines Tutorial möchte ich hiermit veröffentlichen.

Was ist WordPress Child Theme?

Ein WordPress Child Theme ist wörtlich genommen das Kind des Haupt Themes. Man sollte also im Verzeichnis /wp-content/themes ein weiteres Verzeichnis erstellen, welches den Namen des Hauptthemes hat mit dem zusatz „-child“. Wird als Haupttheme also „twentyseventeen genutzt, kann man der übersichtlichkeit wegen das Verzeichnis des „Kindes“ dann „twentyseventeen-child“ nennen.

Warum sollten Child Themes verwendet werden?

Im Child Theme werden Änderungen oder Erweiterungen an Funktionen und Design des Hauptthemes vorgenommen. Sie sollten hier nicht das Haupt Theme bearbeiten, da die Änderungen bei Updates verloren gehen und Sie diese dann erneut vornehmen müssten. Aus diesem Grund empfehlen wir Child Themes zu verwenden. Diese nutzen alle Funktionen des „Eltern“ Themes und werden durch die eigenen Änderungen ergänzt. Somit bleiben die eigenen Einstellungen auch nach dem Update des Eltern-Themes erhalten.

Sie könnten natürlich auch die eigenen Änderungen im Haupt-Theme vornehmen und dort einfach keine Updates fahren. Was dadurch aber geschieht, haben wir HIER beschrieben. Sie gefährden damit die Sicherheit Ihrer Webseite und Daten.

Wie wird das das Child-Theme erstellt?

Zuerst legen Sie im Verzeichnis /wp-content/themes ein Verzeichnis für Ihr Child Theme an. Den Namen des Ordners können Sie frei wählen. Der Übersichtlichkeit wegen empfehlen wir aber, sich auf den Namen des Haupt Themes zu beziehen.

In diesem neuen Verzeichnis erstellen Sie die Datei style.css. Die wichtigsten Zeilen in dieser Datei lauten wie folgt:

/*
Theme Name: Name_des_Child_Themes
Description: Beschreibung des Child_Themes
Author: Autor_des_Child_Themes (optional)
Author URI: URL_zur_Homepage_des_Autors (optional)
Template: Name_des_Haupt_Themes (!!wichtig!! Hiermit erfolgt die Zuweisung zum Haupttheme)
Version: Versionsnummer_des_Childthemes (sollte man mit verwenden)
Tags: Einige_Kurze_Keywords (optional)
*/

Weiterhin benötigen Sie im Verzeichnis des Child Themes eine Weitere Datei. Erstellen Sie in diesem Verzeichnis daher auch noch die Datei functions.php mit folgendem Inhalt:

Wichtig ist, dass Sie wirklich eine leere functions.php anlegen und nicht jene aus dem Haupt-Theme kopieren. In diese neue functions.php binden wir auch direkt noch die Styles aus dem Haupt-Theme ein:

<?php

/* Hier kommen die Funktionen für das Child-Theme */

function parent_child_styles() {
wp_deregister_style( 'twentyseventeen-style');
wp_register_style('twentyseventeen-style', get_template_directory_uri(). '/style.css');
wp_enqueue_style('twentyseventeen-style', get_template_directory_uri(). '/style.css');
wp_enqueue_style( 'childtheme-style', get_stylesheet_directory_uri().'/style.css', array('twentyseventeen-style') );
}
add_action( 'wp_enqueue_scripts', 'parent_child_styles' );

/* Es können weitere Funktionen folgen */

?>

Damit ist alles getan, um nun das Child Theme im Dashboard von WordPress zu aktivieren. Wenn Sie dort noch keine eigenen Styles oder Funktionen definiert haben, sollten Sie beim Umstellen im Dashboard auf Ihrer Webseite keine Änderungen feststellen. Wenn Sie nun Änderungen und Erweiterungen vornehmen, bearbeiten und erstellen Sie die Dateien nun im Child Theme. Bei entsprechenden Updates des Eltern-Themes bleiben Ihrer eigenen Styles und Funktionen erhalten und Sie haben das Eltern Theme immer auf aktuellstem Stand.

Fazit

Ein WordPress Child Theme erstellen sollte man immer wie folgt:

  1. Per FTP ein neues Verzeichnis unter /wp-content/themes anlegen (Name frei wählbar)
  2. Im neuen Verzeichnis des Child Themes legen Sie nun eine neue Datei an und nennen diese style.css
  3. In diese style.css kommen kommen die oben genannten Kopfzeilen. Achten Sie hierbei in der Zeile „Template“ zwingend darauf, dass exakt der Verzeichnisname des Eltern Themes eingetragen ist.
  4. Die Datei functions.php anlegen.
  5. Die functions.php mit oben genannten Code versehen.
  6. Das Child Theme ist nun einsatzbereit und kann im Dashboard aktiviert werden.