Child Theme mit WordPress erstellen

Child Theme WordPress
Sei es ein neuer Text im Footer oder nur die neue Schrift für die Navigation-Bar – Bevor man wichtige Änderungen an seinem WordPress-Theme vornimmt, sollte man immer ein Child-Theme erstellen! Das Elegant Themes-Team hat bei ihrer letzten Umfrage festgestellt, dass zwar 85% ihrer Kunden den Theme-Code modifizieren, aber nur 35% ein Child Theme erstellen. Außerdem werden bei jedem Theme-Update deine Änderungen am Original gelöscht. Du findest im Folgenden eine schriftliche Anleitung und am Ende des Beitrags noch einen Screencast zu Child Themes.

Warum man Child Themes nutzen sollte

Eines sei von vornherein gesagt: Wenn man Child Themes benutzt, erspart man sich wirklich sehr viel Arbeit im Nachhinein. Denn hat man einmal eine funktionierende Website mit einigen Lesern, sollte man sich diesen Erfolg nicht durch ein zerschossenes Theme kaputt machen. Mit dem Child Theme kannst du wirklich auch jedes kleinste Detail deiner Website modifizieren ohne die ursprünglichen Einstellungen zu verlieren. Es wird ein komplett neue Verzeichnisstruktur erstellt, sodass du einfach über die WordPress-Oberfläche zu deinem alten Theme wechseln kannst.

Los gehts

Ich werde dieses Tutorial anhand des Divi Themes von Elegant Themes erklären. Die Schritte lassen sich so aber auf jedes Theme übertragen.

    1. Für dein neues Child Theme erstellst du zunächst lokal auf deinem Computer einen Ordner, z.B. mit dem Namen divi_child_theme.
    2. Erstelle eine style.css Datei in dem Child Theme-Ordner mit folgendem Inhalt:
      </code>
      /*
      Theme Name: Child Theme
      Theme URI: http://www.theme_url.de
      Description: Child Theme
      Author: Hans Otto
      Author URI: http://www.hansotto.de
      Template: Theme
      Version: 1.0.0
      */
      @import url("../Theme/style.css");
      /* =Theme customization starts here
      ------------------------------------------------------- */
      <code>
    3. Wichtig sind Template und @import: Template muss exakt dem Namen deines Parent Themes entsprechen. über @import sollte auch der genaue Dateipfad auf deinem Server zur style.css-Datei deines Parent Themes angegeben sein.
    4. Wenn alles korrekt eingetragen wurde, muss man den divi_child_theme-Ordner nur noch zippen (das geht unter Windows direkt mit dem Datei-Explorer und unter Mac mit dem Finder) und bei WordPress hochladen. Dies wird wie bei jedem anderen Theme über Design – Themes – Hinzufügen – Theme hochladen gemacht.

Child Theme WordPress

CSS bearbeiten

Mit dem Child Theme sollte deine Webseite genauso wie vorher aussehen. Nun kannst du hinter dem @import-Befehl dein Costum-CSS einfügen. Zunächst lädt WordPress die alte CSS-Datei. Alle neuen Befehle überschreiben automatisch die Alten.

Functions.php bearbeiten

Durch erstellen einer neuen functions.php-Datei im Child Theme-Ordner fügt man der bestehenden PHP-Datei im Parent Theme Funktionen hinzu. Also wird die Originaldatei nicht ersetzt,wie bei der style.css! Ähnlich verfährt man auch, wenn man beispielsweise den footer-Bereich seiner Website über die footer.php-Datei verändern möchte. Hier ist aber Vorsicht geboten: Wenn eine neue  footer.php-Datei erstellt wird, wird die alte ganz überschrieben! Also sollte man vorher immer ein Backup der alten Datei anlegen.

Alles klar soweit? Sonst schau doch mal hier vorbei:

  1. Die Anleitung bei Elegant Themes: Wie immer einfach und intuitiv erklärt. Außerdem mit angeschlossenem Kommentaren, die oft sehr nützlich sind!
  2. WordPress Codex: Eine ausführliche Anleitung direkt von WordPress
  3. One klick Child Theme: Das Plugin erzeugt automatisch ein Child Theme. Habe ich noch nicht ausprobiert, ich bevorzuge den manuellen Weg.


4 Kommentare

  1. Daniel Gruber

    HAllo,

    Muss in den php.Datein die man ins Child Theme hochlädt auch dieser Anfangscoder mit template, @ import url usw. eingfügt werden.

    /*
    Theme Name: Child Theme
    Theme URI: http://www.theme_url.de
    Description: Child Theme
    Author: Hans Otto
    Author URI: http://www.hansotto.de
    Template: Theme
    Version: 1.0.0
    */
    @import url(“../Theme/style.css”);
    /* =Theme customization starts here
    ——————————————————- */

    Antworten
    • Vincent Winterhgaer

      Hallo Daniel,
      Entschuldige die späte Rückmeldung.
      Ja, du musst den @import-Befehl unbedingt einfügen, da dieser auf die Style.css des Parent-Theme verweist!

      Beste Grüße,
      Vincent

      Antworten
  2. chris

    Hallo Vincent, braucht man die Child Theme auch wenn man die Website nur mit dem Builder und WordPress Editor erstellt, also ohne Code Zusatz ?
    Und welches Theme muss dann eigentlich aktiviert sein, das Parent oder das Child ?

    mfg chris

    Antworten
    • Vincent Winterhgaer

      Hey Chris,

      Mit dem neuen Divi Builder kann man auch viel ohne ein Child Theme machen (CSS-Anpassungen für die einzelnen Module im Builder). Falls du trotzdem ein Child Theme benutzen möchtest, muss das als Theme aktiviert sein.

      Viele Grüße

      Vincent

      Antworten

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.