WordPress: Child Theme erstellen

Ein WordPress Child Theme solltet ihr immer dann verwenden, wenn ihr Änderungen im Code eurer WordPress Webseite vornehmt. Durch ein WordPress Child Theme bleiben die Änderungen gesichert, während das ursprüngliche Theme ein Update erhält. Im Beitrag lest ihr, wie ihr ein Child Theme für WordPress erstellt.

Für diese Anleitung sind keine Programmierkenntnisse notwendig. Ihr benötigt nur ein FTP-Programm und die FTP-Login Daten zu eurem Webspace. Ich nutze das kostenlose FileZilla, welches für Windows, macOS und Linux verfügbar ist.

Child Theme für WordPress anlegen

Was ist ein WordPress Child Theme?

Das Child Theme übernimmt alle Funktionen des Parent Theme. Anpassungen am Child Theme überschreiben jedoch die Einstellungen und Funktionen des Parent Theme. Zudem wird die Nutzung von Child Themes empfohlen um Änderungen am bestehenden Theme vorzunehmen.

Ohne Child Theme führen Aktualisierungen am bestehenden Theme zum Verlust aller von euch vorgenommenen Anpassungen.

Vorteile eines WordPress Child Theme

  • Ein Update des Parent Themes überschreibt individuelle Änderungen am Child Theme nicht. Änderungen bleiben erhalten.
  • Ein Child Theme beschleunigt die Entwicklungs- und Testzeit der Webseite.
  • Für Anfänger ist ein Child Theme ein zusätzlicher Schutz. Geht etwas schief, lässt sich einfach auf Parent Theme zurückgreifen.

Ein Child Theme für WordPress erstellt ihr in drei einfachen Schritten.

1. Ordner für WordPress Child Theme anlegen

Verbindet euch via FTP mit eurem Server, auf dem eure WordPress Webseite gehostet ist. Von eurem Provider erhaltet ihr die notwendigen Login-Informationen wie:

  • Name des Servers
  • FTP-Benutzer
  • FTP-Passwort

Nach dem Login via FTP navigiert ihr durch die Ordner-Struktur wie unter Windows oder macOS. WordPress Themes findet ihr unter:

/eure-webseite.de/wp-content/themes/

Hier legt ihr einen neuen Ordner an. Der Name des Ordners ist grundsätzlich egal. Es empfiehlt sich jedoch den Namen des Parent Theme Ordners zu nehmen und um ein -child zu ergänzen. In meiner WordPress Installation sieht das wie folgt aus:

WordPress Child Theme anlegen
WordPress Child Theme Ordner anlegen (Bild: Screenshot).

2. Style.css Datei erstellen

Als nächstes erstellt ihr eine style.css Datei. Dazu öffnet ihr einfach einen Texteditor und fügt folgenden Code ein.

/*
 Theme Name:   Name des Parent Theme Child
 Description:  Mein Child Theme
 Author:       Euer Name
 Author URI:   http://www.eure-webseite.de
 Template:     parenttheme
 Version:      1.0
 Text Domain:  euer-theme-child
*/

Das sieht dann am Beispiel des colormag-child wie folgt aus:

/*
 Theme Name:   colormag Child
 Theme URI:    https://www.randombrick.de
 Description:  Colormag Theme
 Author:       Benjamin Blessing
 Author URI:   https://www.randombrick.de
 Template:     colormag
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  colormag-child
*/

Wichtig: In der Zeile Template muss der Name des Parent Theme stehen. Sonst wird das zugehörige Theme nicht erkannt.

Die Datei im Texteditor speichert ihr als style.css. Danach ladet ihr die style.css in den erstellten Child Theme Ordner hoch.

3. functions.php erstellen

Anschließend legt ihr die functions.php an. Dazu öffnet ihr wieder einen Texteditor und fügt folgenden Code ein:

<?php
/**
* Stylesheet des Child Theme einbinden in Abhängigkeit vom Parent-Stylesheet
*/

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

}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );?>

In der functions.php wird festgelegt, dass erst das Stylesheet des Parent Theme geladen wird und anschließend das Stylesheet des Child Themes. Die Änderungen des Child Themes überwiegen somit die des Parent Theme.

Die Datei im Texteditor speichert ihr als functions.php. Danach ladet ihr die functions.php in den erstellten Child Theme Ordner hoch.

WordPress Child Theme aktivieren

Sobald ein neuer Ordner mit einer style.css und functions.php im themes Ordern vorhanden ist, zeigt WordPress im Dashboard unter Design –> Themes das neue Theme an.

Child Theme für WordPress aktivieren
Child Theme für WordPress aktivieren (Bild: Screenshot).

Das Child Theme könnt ihr wie jedes andere Theme aktivieren.

Wird beim Aktivieren ein Fehler angezeigt, überprüft in der style.css die Angaben. Insbesondere der Hinweis auf das Parent Theme muss korrekt sein.

Optional: Screenshot für Child Theme erstellen

Ihr möchtet zu eurem WordPress Child Theme ein Screenshot bei den Themes anzeigen? Dazu müsst ihr im Child Theme Ordner eine Datei mit dem Namen screenshot.png ablegen.

Persönliche Meinung

Änderungen an WordPress sollten immer über das Child Theme vorgenommen werden. Das schützt die Anpassungen vor Updates. Weitere Tipps zu WordPress findet ihr ebenfalls hier im Blog.

Ein absolutes Must-Do ist Adsense auf WordPress AMP Seiten einrichten. Da die Mehrzahl der Besucher teilweise über Smartphone auf Webseiten gelangen, kann das eure Werbeeinnahmen schnell verdoppeln.

Zudem empfehle ich jedem regelmäßig ein WordPress Backup erstellen zu lassen. Dafür gibt es automatisierte Tools, die einem die Arbeit abnehmen.

Auch wichtig für die Sicherheit der Besucher und den Traffic von Google. Stellt eure WordPress Webseite auf HTTPS um. Google belohnt das beim Suchmaschinen-Ranking.

Benjamin Blessing

Blogger, Consultant, Reisender. In meiner Freizeit schreibe ich auf RandomBrick.de über Themen zu Technik, Finanzen und WordPress. Von aktuellen Trends bis zu Anleitungen findet ihr hier alles im Blog.

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Du bezahlt noch für dein Girokonto?

Wechsele JETZT zu einem kostenlosen Girokonto inklusive Kreditkarte und spare bis zu 250 Euro pro Jahr.

Konten vergleichen!