WordPress Child Theme erstellen 2018

WordPress Child Theme erstellen 2018
5 (100%) 2 votes

Video Tutorial: WordPress Child Theme erstellen

Mit diesem 2-Minuten Video Tutorial oder der Schritt-für-Schritt Anleitung unten erfährst du, wie du ein WordPress Child Theme schnell und einfach erstellen kannst.

Seit der WordPress Version 4.7 (Vaughan) können benutzerdefinierte Styles ganz bequem im WordPress Customizer unter „Zusätzliches CSS“ eingetragen werden. Ändert dieses Feature etwas an der Art und Weise wie ein WordPress Child Theme im Jahr 2018 erstellt wird?
WordPress Child Theme oder zusätzliches CSS im Customizer

WordPress Child Theme oder zusätzliches CSS im Customizer

Sehen wir uns zunächst einmal die verschiedenen Anwendungsfälle für ein WordPress Child Theme an und wie man ein solches Child Theme erstellen kann.

Was ist ein WordPress Child Theme?

Ein Child Theme ist ein Theme, welches die Funktionen und Design-Einstellungen eines anderen WordPress Themes (Parent Theme) nutzt und mit eigenen Styles, Templates und Funktionen ergänzt bzw. angepasst wird.

Wozu brauche ich ein Child Theme?

Ein Child Theme benötige ich, wenn ich Änderungen an einem bestehenden WordPress Theme (Parent Theme) vornehmen und diese auch nach den kommenden Updates behalten möchte.

Diese Änderungen können sein:

  • CSS Styles anzupassen
  • Funktionen hinzuzufügen, die man nicht mit Plugins realisieren kann oder möchte
  • Page Templates und seit WordPress 4.7 auch Post Type Templates hinzuzufügen oder zu ändern
  • Den Demo Inhalt einer Demo Website mit einem Klick zu importieren (siehe auch den Beitrag Demo Website erstellen mit One Click Demo Import)

Solltest du diese Änderungen direkt im Parent Theme vornehmen, würden sie beim nächsten Update verloren gehen.

WordPress Child Theme erstellen in 3 Schritten:

Auch in 2018 ist die folgende Vorgehensweise aktuell, wenn man ein Child Theme in WordPress anlegen möchte:

Schritt 1: Neuen Child Theme Ordner im Verzeichnis „themes“ erstellen

Erstelle einen neuen Ordner im Verzeichnis wp-content > themes. Den Zugang zu diesem Verzeichnis erhältst du mit einem FTP Programm wie Filezilla.

FileZilla - FTP Programm - mit dem Server verbinden

FileZilla – FTP Programm – mit dem Server verbinden

Die FTP Zugangsdaten erhältst du von deinem Hosting Anbieter. Hier am Beispiel von Alfahosting (Affiliate Link):

FTP Zugangsdaten bei Alfahosting

FTP Zugangsdaten bei Alfahosting

In das Feld „Server“ kannst du entweder den „Hostname“ oder deinen Domain Namen eingeben (ohne http://). „Benutzername“ und „Passwort“ kannst du einfach übernehmen. Einen „Port“ brauchst du bei Alfahosting nicht angeben.

Der Name des Ordners, den du im Verzeichnis wp-content > themes erstellst, kann dem Namen deines Child Themes entsprechen, muss er aber nicht. Wichtig ist, dass du nur Kleinbuchstaben verwendest und bei mehreren Wörtern diese mit einem Bindestrich trennst. In diesem Ordner erstellst du die folgenden zwei Dateien: style.css und functions.php.

Schritt 2: Datei style.css erstellen

Erstelle eine Datei namens style.css in einem Texteditor wie Notepad oder Textedit, füge den folgenden Code ein und ersetze ihn mit deinen Daten. Die wichtigste Angabe hier ist „Template“. Hier fügst du den Ordnernamen deines Parent Themes ein.

/*
 Theme Name:    My Child Theme
 Theme URI:     https://webgeckos.com/geckos-beauty-demo/
 Description:   Mit dem WordPress Theme Geckos Beauty lässt sich einfach eine Friseur, Spa oder Beauty Salon Website erstellen.
 Author:        Danijel Rose
 Author URI:    https://webgeckos.com
 Template:      oceanwp
 Version:       1.0.0
 License:       GNU General Public License v2 or later
 License URI:   http://www.gnu.org/licenses/gpl-2.0.html
*/

Wie der Name style.css bereits vermuten lässt, kommen in diese Datei all deine Designanpassungen hinein.

Schritt 3: Datei functions.php erstellen

Kopiere nun den folgenden Code, füge ihn in eine zweite Datei ein und nenne diese Datei functions.php.

<?php
// Action Hook, um die eigenen Styles zu integrieren
add_action( 'wp_enqueue_scripts', 'childtheme_styles' );

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

Der Name der Datei ist auch in diesem Fall selbsterklärend. Hier kommen alle zusätzlichen Funktionen hinein, die du für dein Child Theme benötigst.

Schritt 4: Screenshot.png erstellen (optional)

Ich persönlich würde an deiner Stelle diesen Schritt weglassen, falls niemand sonst dein Child Theme benutzen wird außer du selbst. Für den Fall, dass du ein WordPress Multisite Projekt betreibst, wo deine User einen eigenen Blog mit Hilfe deines Child Themes anlegen können oder wenn du sogar dein Child Theme zum Verkauf anbieten möchtest, dann empfiehlt es sich auf jeden Fall ein Bild namens screenshot.png in deinen Child Theme Ordner zu kopieren.

Es kann sich dabei um ein beliebiges Bild handeln wie z. B. ein Logo oder um einen wirklichen Screenshot deines Themes. Dafür müsstest du aber zuerst eine Demo Website erstellen (hier nochmals der Hinweis auf den Beitrag Demo Website erstellen mit One Click Demo Import). Von der Demo Website kannst du anschließend einen Screenshot aufnehmen (für alle Mac User: Shift-command-4). Achte darauf, dass die Abmessungen des Bildes 1200 x 900 Pixel betragen und der Name der Datei exakt screenshot.png lautet.

Das wars! Nun musst du nur noch unter Design > Themes dein Child Theme aktivieren.

Was hat sich nun ab WordPress 4.7 an der Art und Weise geändert, wie ein Child Theme erstellt wird?

Die Möglichkeit eigene Styles direkt in den WordPress Customizer einzutragen sorgt dafür, dass zumindest kleinere Child Themes, die nur ein paar Zeilen eigenen CSS-Code in der style.css-Datei enthalten, nicht mehr erstellt werden müssen. Da jedoch die meisten Premium WordPress Themes, wie auch immer mehr kostenlose Themes dieses Feature bereits vorher schon integriert hatten, kann es gut möglich sein, dass sich an der Vorgehensweise nicht viel ändert.

Bei allen anderen oben genannten Anwendungsfällen kommt man ohnehin nicht daran vorbei, ein WordPress Child Theme zu erstellen.

WordPress Child Theme erstellen 2018
5 (100%) 2 votes
d

Danijel

Hi, mein Name ist Danijel Rose, ich bin der Gründer von WebGeckos, WordPress Trainer und Berater aus Bad Tölz, südlich von München. Über meine WordPress Erfahrungen blogge ich hier auf WPC. Mit WordPress erstelle ich vor allem gerne hochwertige Firmenwebsites, Mitgliederseiten und WordPress Multisites.

Das könnte Dich auch interessieren...

6 Antworten

  1. V
    Volker sagt:

    wahrscheinlich ist die frage echt blöd, aber es nutzt ja nix: wie erstelle ich ein child, wenn das eltern-theme im namen einen bindestrich enthält, zum beispiel „nicetheme-pro“?

    • D
      Danijel sagt:

      Hallo Volker,
      es gibt doch keine blöden Fragen 🙂
      Der Ordnername des Child Themes kann an den Ordnernamen des Eltern Themes angelehnt sein, muss er aber nicht. Der Ordnername des Child Themes kann auch komplett anders heißen. Ein Beispiel: Wenn das Eltern Theme „nicetheme-pro“ heißt, kann der Ordnername des Child Themes trotzdem „mein-childtheme“ heißen. Man sollte aber darauf achten, dass in der style.css-Datei unter „Template“ dann auch „nicetheme-pro“ steht.
      Schöne Grüße, Danijel

  2. A
    Andreas sagt:

    Hallo, ich habe auch noch folgende Frage tun child themes!
    Wenn ich auch Inhalte aus anderen php Dateien ändern möchte muss ich diese dann 1:1 in das Child kopieren oder auch nur die Änderungen wie bei der function.php?
    Wie ist da grundsätzlich die Vorgehensweise bei dieser Funktion?

    • D
      Danijel sagt:

      Hallo Andreas,
      auf diese Frage gibt es leider nur eine „es kommt darauf an“-Antwort. Es kommt nämlich darauf an, welche Änderung man durchführen möchte und in welcher Datei sich der ursprüngliche Code befindet, welcher geändert werden soll. Wenn es sich um eine Template Datei handelt, kann man das Template einfach kopieren, in den Child Theme Ordner einsetzen und die Änderungen in der Template-Kopie durchführen. Es führen auch mehrere Wege nach Rom. Wenn es sich nämlich um eine Änderung handelt, für die ein Hook vorgesehen wurde, kann man die Änderung durchführen, indem man den Action oder Filter Hook in die functions.php Datei des Child Themes einträgt.
      Das klingt jetzt vielleicht etwas verwirrend, deswegen möchte ich dir gerne unsere neue Artikelserie empfehlen „WordPress Theme anpassen wie ein Profi“. Dort werde ich versuchen, diese Fragen detaillierter zu beantworten auch anhand von Beispielen. Evtl. werde ich auch die Artikelreihe um einen weiteren Beitrag über WordPress Hooks ergänzen.
      Schöne Grüße, Danijel

  3. A
    Andreas sagt:

    Guten Morgen, ok schaue ich mir mal an! Ist es denn grundsätzlich so,dass Teile aus der function.php die nur im Child stehen dazu geladen werden? Und wenn ich zb eine andere php Datei habe diese komplett in mein Child kopiere und dieser Inhalt dann den Inhalt aus der Parent überschreibt?
    Wenn ja was wäre wenn durch ein Update Änderungen dieser PHP im Parent passieren?
    Fragen über Fragen!
    Danke aber schonmal für die schnelle Antwort!
    LG

    • D
      Danijel sagt:

      Hi Andreas,
      ja das ist richtig, die Funktionen in der functions.php Datei deines Child Themes werden zusätzlich zu den Funktionen deines Parent Themes geladen. Hier siehst du die Aufrufreihenfolge in WordPress.
      Wenn du z. B. die header.php Datei in das Child Theme kopierst und dort Änderungen vornimmst, überschreibst du damit die header.php deines Parent Themes. Wenn sich die header.php Datei deines Parent Theme ändert, musst du auch die header.php Datei deines Child Themes anpassen. Aus diesem Grund ist es immer hilfreich die Änderungen mit einem Kommentar zu versehen.
      LG, Danijel

Schreibe einen Kommentar

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