Wie erstellt man ein WordPress Child Theme?

Wenn man Anpassungen an deinem WordPress-Theme vornehmen möchtet, wie beispielsweise am Design oder an einer Vorlage, ist es in der Regel sinnvoll, ein Child-Theme zu verwenden. In diesem Artikel bespreche ich, was ein Child-Theme ist, wann es benötigt wird, und wie man selbst eines erstellt und einer Website hinzufügt.

Was ist ein Child Theme?

WordPress verwendet ein sogenanntes Hauptthema, auch Parent-Theme genannt, und ein Kindthema, oder Child-Theme. Möglicherweise möchtest du etwas am Hauptthema ändern, wofür du den CSS-Code dafür anpassen solltest. Es ist jedoch keine gute Idee, Änderungen an gut funktionierendem Code vorzunehmen. Solltest du Anpassungen an den CSS-Dateien des Haupt-Themes vornehmen, gehen diese bei der Aktualisierung dieses Themes verloren. Darüber hinaus wird es kompliziert, wenn sich Fehler in den Code einschleichen und nicht mehr klar ist, was der ursprüngliche, einwandfrei funktionierende Code ist, und welche Anpassungen vorgenommen wurden.

Zu diesem Zweck wurde das Child-Theme entwickelt. Dieses Thema nutzt alle Funktionen und Stile des Hauptthemas, man kann jedoch auch Änderungen vornehmen, ohne das Hauptthema zu beeinträchtigen. Wenn das Hauptthema ein Update erhält, wird das untergeordnete Thema nicht angepasst. Dadurch bleiben alle im Child-Theme vorgenommenen Anpassungen erhalten. Und wenn man Fehler macht, bleibt das Hauptthema erhalten.

Wann braucht man ein Child Theme?

Die Verwendung eines Child-Themes empfiehlt sich insbesondere dann, wenn du Änderungen am Design, oder an der Funktionalität deiner WordPress-Website vornehmen möchtest. Dies kann von geringfügigen Anpassungen wie dem Ändern von Farben und Schriftarten, bis hin zu drastischeren Anpassungen wie dem Hinzufügen benutzerdefinierter Funktionen oder dem Ändern einer Vorlage reichen.

Das Child Theme erstellen

Das Erstellen eines Child-Themes ist recht einfach und erfordert nur wenige Schritte. Du benötigst zwei neue Dateien, einen neuen Ordner, und optional noch ein Bild.

1. Erstelle einen neuen Ordner für das Child Theme
   Verbinde dich per FTP auf den Webserver. Erstelle einen neuen Ordner im wp-content/themes/ Ordner deiner WordPress-Installation. Benenne diesem Ordner mit einem Namen, der sich auf das übergeordnete Thema bezieht, gefolgt von „-child“., z.B. divi-child.
2. Erstelle die style.css Datei
   Erstelle im neu erstellten Ordner eine neue CSS-Datei, und benenne sie style.css. Füge dieser Datei dann den folgenden Code hinzu:
   

   /*
    Theme Name:   Mein erstes Child Theme
    Template:     Parent Theme
   */
   
   /* Hierunter kannst du deinen eigenen Code hinzufügen */
   

   Achte darauf, dass du „Parent Theme“ durch den Ordnernamen deines Parent Themes ersetzt wird. Wenn du z.B. Divi verwendest solltest du hier Template: Divi einfügen.

3. Erstelle die functions.php Datei
   Erstelle in diesem child theme-Ordner auch eine functions.php-Datei, und füge dann den folgenden Code hinzu:
   

   <?php
   // Exit if accessed directly
   if ( !defined( 'ABSPATH' ) ) exit;
   
   add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
   function enqueue_parent_styles() {
   	wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
   }
   
   // Hierunter kannst du deinen eigenen Code hinzufügen
   

4. Optional kannst du ein Bild hinzufügen, damit das Child-Theme in deiner Theme-Übersicht im WordPress Admin Bereich leicht zu finden ist. Dies ist jedoch nicht notwendig.Erstelle ein Bild mit einer Breite von 1200 Pixel und einer Höhe von 900 Pixel und speichere es als screenshot.png. Füge es dem Child Theme Ordner hinzu.
5. Aktiviere das Child Theme
   Geh zum WordPress-Dashboard, navigiere zu „Design“ > „Themes“ und aktiviere das soeben erstellte Child Theme.

Das Child Theme verwenden

Wenn du nun CSS- oder PHP-Code zu deinem Theme anpassen oder hinzufügen möchtest, kannst du dies in den neuen style.css- oder function.php-Dateien tun. Wenn du eine Vorlage anpassen möchtest, wie z.B. footer.php oder page.php, kopiere zunächst die relevante Datei vom Parent-Theme in das Child-Theme. Jetzt kannst du die Vorlage im Child-Theme anpassen.