„Dein Weg zum Online Business ist WordPress. Dein Navi ist WPC.“

WordPress Child Theme erstellen 2017
WPC - Dein WordPress Blog

WordPress Child Theme erstellen 2020

Zusätzliches CSS Feature im WordPress Customizer oder Custom CSS Einstellung bei Elementor Pro - Wozu braucht man überhaupt noch ein WordPress Child Theme? Dieser Beitrag zeigt, welche Anwendungsfälle es im Jahr 2020 immer noch gibt.

Video Tutorial: WordPress Child Theme erstellen

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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 2020 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 (die CSS Anweisungen können aber auch in das „Zusätzliches CSS“ im Customizer oder für alle Elementor User in das „Custom CSS“ eingetragen werden)
  • Funktionen hinzuzufügen, die man nicht mit Plugins realisieren kann oder möchte (hier kann man notfalls auch auf die Plugins Code Snippets und Post Snippets ausweichen)
  • 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 2019 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 oder bei Elementor in das Custom CSS Feld 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.

[stay id=“2388″]

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

5/5 - (3 votes)
Vielen Dank fürs Teilen dieser Seite

10 Antworten

  1. 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

    1. 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

      1. Ich verwende das Theme Hever, das sich von Varia ableitet. Varia enthält die Datei header.php (Hever leider nicht), in die ich einen zusätzlichen Meta-Tag einfügen will, damit Thumbnails für WhatsApp angezeigt werden (sonst funktioniert nur Facebook). Nachdem ich eingefügt habe, funktioniert das auch.

        Leider wird meine Website jetzt nicht mehr korrekt angezeigt. Auf den ersten Blick sieht sie so aus, als würde ich jetzt nur noch Varia als Eltern-Theme verwenden und nicht mehr Hever.

        In style.css konnte ich allerdings nicht hever, sondern nur varia auswählen:
        Template: varia
        Sonst Fehlermeldung: Das „hever“ Theme ist kein gültiges Eltern-Theme.

        Mir ist auch unklar, inwiefern ich header.php verändern muss, da die Datei nun Teil meines Child Themes ist. Vielleicht liegt da auch das Problem.

        Wie kann ich das gewünschte Ergebnis erzielen?
        a) Header modifizieren?
        b) Thumbnail für WhatsApp anderweitig aktivieren
        c) Child Theme von Hever ableiten
        d) Child Theme als modifizierte Kopie von Hever erstellen
        e) …

        Zu d)
        Ich hoste über WordPress und habe dort über SFTP keinen Zugriff auf Hever-Dateien. Und die in Hever angegebene Theme URI führt leider ins Leere:
        Theme URI: https://github.com/Automattic/themes/hever

        1. Hallo Stefan,
          ich befürchte ich kann dir mit den Themes nicht weiterhelfen, da ich weder Hever noch Varia kenne. Aber für deinen Anwendungsfall brauchst du evtl. gar kein Child Theme bzw. eine header.php Datei in deinem Child Theme. Du könntest einfach das Plugin Header, Footer and Post Injections verwenden.
          Schöne Grüße, Danijel

  2. 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?

    1. 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. 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“?

    1. 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

Schreibe einen Kommentar

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

Related Posts

Ähnliche Beiträge