Eigenes Child-Theme für WordPress erstellen

Arne –  Wordpress

Dieses mal möchte ich Euch erklären, wie Ihr Euer eigenes WordPress Child-Theme erstellen und installieren könnt.

Was ist ein Child Theme und wofür brauche ich das?

Ein Child-Theme ist ein Ableger eines vorhandenen Themes (Parent-Theme). Der Vorteil eines Child-Themes ist, dass Ihr ruhigen Gewissens daran rumbasteln könnt ohne gleich das ganze Theme kaputt zu machen, falls mal etwas schief läuft. Zusätzlich hab Ihr den Vorteil, dass bei einem Updates des Parent-Themes Eure Anpassungen nicht überschrieben werden.

Was benötige ich an Software?

Da sich ein Child-Theme nicht direkt im WordPress-Backend erstellen lässt, benötigt Ihr ein FTP-Programm wie z.B. FileZilla und einen Editor, um eine CSS-Datei zu erstellen. empfehlen kann ich Euch dafür Notepad++.

Jetzt geht´s los

Verbindet Euch mit dem FTP-Programm zuerst auf Euer Webhosting und legt ein neues Verzeichnis für Euer Child-Theme im Ordner /wp-content/themes an. Das Verzeichnis könnt Ihr benennen wie Ihr wollt, vermeidet dabei aber Leer-/ Sonderzeichen und Umlaute.

ctwp-verz-erst
In FileZilla per Rechtsklick und Verzeichnis erstellen, den Ordner für Euer Child-Theme anlegen.

ctwp-verz-erst2

style.css erstellen

Als Nächstes öffnet Ihr den Editor legt eine Datei mit dem Namen style.css und den im Screenshot gezeigten Zeilen an. Als Parent-Theme habe ich in meinem Beispiel das TwentyFourteen ausgewählt.

stylecss

  • Theme Name: Der Name Eures Child Themes (erscheint auch so im WordPress Backend)
  • Author: Euer Name
  • Author URI: Eure Web-Adresse
  • Description: Beschreibung Eures Themes
  • Template: Hier gebt Ihr den genauen Namen des Parent-Theme Verzeichnis an.
  • Version: Die Versionsnummer
  • Tags: Keywords zum Theme (können angegeben  werden, muss aber nicht!)
  • import url: Der Pfad zur style.css des Parent-Themes, dass Ihr euch ausgesucht habt. Dadurch werden die CSS Angaben durch Euer eigenes Design ersetzt.

Die Datei (style.css) legt Ihr dann im Verzeichnis Eures Themes unter /wp-content/themes ab.

style-upload
Jetzt die erstellte style.css in den Child-Theme-Ordner hochladen.

style-upload-fertig

Nachdem Ihr diese Schritte erledigt habt, findet Ihr Euer Child-Theme in der Themeverwaltung von WordPress und könnt es aktivieren.

wp-admin-ctWenn Ihr wollt, dass Euer Theme etwas ansprechender im WordPress Backend angezeigt wird, könnt Ihr noch eine Bilddatei erstellen und diese ebenfalls in das Verzeichnis Eures Child-Themes hochladen. Achtet darauf, dass die Bild mindestens eine Größe von 250px x 250px hat. Damit die Datei in WordPress angezeigt wird, muss der Name der Bilddatei screenshot.png sein. Ein Beispiel seht Ihr im unteren Screenshot.

child-theme-aktiv

Anpassen des Child Themes

In der style.css Eures Child-Themes könnt Ihr jetzt alle gewünschten Design-Anpassungen vornehmen die Ihr wollt. Im oberen Screenshot seht Ihr ein Beispiel mit geänderter Farbe von Header, Sidebar, Footer und Navigation. Den dazugehörigen CSS-Code für das Child-Theme findet Ihr im unteren Screenshot.

Als CSS-Code sind nur die Angaben enthalten, die vom Child-Theme überschrieben werden sollen, alle weiteren CSS Bestandteile werden automatisch aus dem Parent-Theme übernommen werden.

website-mit-css-angepasst
Das Child-Theme nach einigen Änderungen an dem CSS Code. Quelle: Screenshot
Beispiel: CSS-Code um Farbe von Header, Navigation, Sidebar und Footer zu ändern.
Beispiel: CSS-Code um Farbe von Header, Navigation, Sidebar und Footer zu ändern.

Viele Möglichkeiten zur Anpassung

Hier findet Ihr noch eine Liste der Dateien, die Ihr in Eurem Child-Theme anpassen könnt, indem Ihr die jeweilige Datei im Verzeichnis Eures Child-Themes anlegt:

  • archive.php
  • content.php
  • footer.php
  • functions.php
  • header.php
  • index.php
  • page.php
  • sidebar.php
  • single.php

Um z.B. die header.php anzupassen kopiert Ihr diese in das Verzeichnis Eures Child-Themes. Dadurch kann die Original-Datei mit Updates auf dem neuesten Stand gehalten werden. Die Daten werden aber aus Eurem Child-Theme gezogen und Eure eigenen, dort hinterlegten Funktionen werden genutzt.

Eigene Funktionen

Da Euer Child-Theme alle Funktionen des Parent-Themes automatisch übernimmt, braucht Ihr keinen PHP-Code aus der Original functions.php kopieren.

Wenn Ihr im Parent-Theme vorhandene Funktionen ändern wollt, legt Ihr eine functions.php im Verzeichnis des Child-Themes an und kopiert lediglich den PHP-Code, den Ihr ändern wollt, in Eure eigene functions.php. Diese könnt Ihr natürlich auch um neue Funktionen erweitern.

WICHTIG: Kopiert Ihr Funktionen aus der Original functions.php, müsst Ihr diese Funktionen umbenennen, da es ansonsten zu einem PHP-Fehler kommt.

Wer jetzt noch mehr erfahren will, kann im Codex von WordPress weiterführende Erklärungen finden:

https://codex.wordpress.org/Child_Themes
https://codex.wordpress.org/Theme_Development
https://codex.wordpress.org/Blog_Design_and_Layout

Falls Ihr noch Tipps zur Child-Theme Erstellung habt postet diese gerne in den Kommentaren.

Ähnliche Beiträge: