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.

Artikel Empfehlung: WordPress Theme anpassen Teil 4: Child Theme erstellen mit Plugin

ZUM ARTIKEL

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

Vielen Dank fürs Teilen dieser Seite

8 Kommentare zu „WordPress Child Theme erstellen 2020“

  1. V

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

      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

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

      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

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

      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

  4. Pingback: Wordpress schneller machen - Ladezeit optimieren für mehr PageSpeed (2/2)

  5. Pingback: Facebook Pixel lieber OHNE WordPress Plugin einsetzen | WP Consultant

Kommentar verfassen

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

Table of Contents

QUIZ: Teste dein WordPress Wissen!

0%

Wann erschien die erste Version von WordPress?

Correct! Wrong!

Die erste Version von WordPress erschien am 27.03.2003. Damit ist WordPress älter als Facebook und Twitter.

Welches der genannten Optionen ist kein WordPress Page-Builder?

Correct! Wrong!

Gravity Forms ist eins der beliebtesten Premium Formular Plugins.

In welcher Datei befinden sich die Sicherheitsschlüssel?

Correct! Wrong!

In der wp-config.php Datei.

Wie werden WordPress Themes wie Genesis und Beans noch genannt?

Correct! Wrong!

Ein Theme Framework ist ein vorprogrammiertes Set an Funktionen und Features, um die (Child) Theme Entwicklung zu beschleunigen.

Um den Adminbereich aufzurufen, muss die eigene Domain wie folgt erweitert werden:

Correct! Wrong!

Um beispielsweise von der Domain https://wpconsultant.de den Adminbereich aufzurufen, muss die Domain wie folgt ergänzt werden: https://wpconsultant.de/wp-admin. Möglich ist auch die URL-Endung https://deine-domain.de/wp-login.php

Welche Dateien braucht ein WordPress Theme mindestens, um zu funktionieren?

Correct! Wrong!

Damit ein WordPress Theme richtig funktioniert, benötigt es mindestens 2 Dateien: index.php und style.css. Die index.php Datei ist das Standard Template für das Theme und im Header der style.css Datei werden die notwendigen Informationen über das Theme eingetragen wie z. B. Name, Autor etc.

Was ist kein typischer Anwendungsfall für eine WordPress Multisite?

Correct! Wrong!

Um eine Landing Page zu erstellen, benötigt man nicht die Multisite Installation. Dafür reicht entweder ein wenig HTML und CSS oder eins der vielen Landing Page Plugins. Mein Tipp: Mit dem kostenlosen Plugin Elementor kannst du professionelle Landing Pages schnell erstellen. Hier erfährst du mehr über WordPress Multisite - Anwendung & Installation.

Welche Sprache spricht die WordPress Software nicht?

Correct! Wrong!

Die WordPress Software basiert auf den Sprachen PHP und MySQL. 10% der Software besteht mittlerweile aus Javascript (Tendenz steigend).

Was ist kein typischer Anwendungsfall für ein Child-Theme?

Correct! Wrong!

Eine Kopie der gesamten Website erstellt man z. B. mit dem Plugin Duplicator. Die verschiedenen Anwendungsfälle eines Child Themes und die richtige Erstellung erfährst du in dem Artikel WordPress Child Theme erstellen 2020.

Was ist ein WordPress Loop?

Correct! Wrong!

Eine Funktion, die Daten aus der Datenbank holt und sie verändert, bevor sie im Browser angezeigt werden, nennt man in WordPress einen Filter bzw. einen Filter-Hook. Eine Aktion, die an einer bestimmten Stelle im Programmablauf ausgeführt wird nennt man Action oder Action-Hook. Ein Loop ist ein PHP Code, der vordefinierte Beiträge (oder Custom Post Types) aus der Datenbank holt, um sie auf speziellen Template Dateien innerhalb eines Themes anzuzeigen.

In welchen Ordner (Verzeichnis) werden Medien wie z. B. Bilder hochgeladen?

Correct! Wrong!

In der Regel besteht der uploads-Ordner aus den einzelnen Jahres-Ordnern, die wiederum aus mehreren Monats-Ordnern bestehen.

Welches Feature ist keine Empfehlung für das WordPress Hosting (gemäß wordpress.org)?

Correct! Wrong!

Auf wordpress.org unter Requirements findest du die Empfehlung für das WordPress Hosting. Hier auf WPC findest du auch meine Hosting Empfehlung für 2020.

Welche Einstellungen gehören nicht in die wp-config.php Datei?

Correct! Wrong!

Die Integration von Javascript- und CSS-Dateien in das jeweilige Theme erfolgt in der functions.php Datei und zwar mittels wp_enqueue_scripts bzw. wp_enqueue_style.

Welche Rolle gehört nicht zu den 6 Standard User-Rollen?

Correct! Wrong!

Die 6 User Rollen in WordPress sind: Super Admin, Administrator, Editor, Author, Contributor und Subscriber.

Was kann man unter dem Menüpunkt "Einstellungen" im Adminbereich nicht tun?

Correct! Wrong!

Website Daten exportieren erfolgt unter dem Menüpunkt "Werkzeuge".

WordPress Quiz
Kein Grund zur Sorge!

Schau doch öfters mal hier auf WPC vorbei und melde dich am besten gleich für unseren Newsletter an! Du kannst auch den WPC YouTube Kanal abonnieren mit vielen kostenlosen WordPress und Elementor Tutorials. Und falls es ein bisschen mehr sein darf, gibt es da noch den WordPress Kurs von WPC ;-)
Gar nicht so schlecht!

Du weißt schon einiges über WordPress! Um dein Wissen noch weiter auszubauen, empfehle ich dir die Beiträge hier auf WPC, meinen YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinen WordPress Kurs von WPC :-)
Wow! Das kann sich sehen lassen!

Herzlichen Glückwunsch! Du bist auf dem besten Weg, ein WordPress Experte zu werden. Bleib am Ball, am besten mit den Beiträgen hier auf WPC, meinem YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinem WordPress Kurs von WPC :-)
Hast du dich gerade ein wenig gelangweilt? :-)

Aber keine Sorge, bald erscheint hier auf WPC ein Quiz für Fortgeschrittene WordPress User. Am besten du meldest dich gleich für den Newsletter an, damit du es nicht verpasst! ;-) In der Zwischenzeit kannst du ja mal dein Datenschutz-Wissen mit dem DSGVO Quiz testen.

KURS: WordPress schneller lernen!

Related Posts

Ähnliche Beiträge

WordPress Kurs von WPC mit Elementor!

Bereits über 1.300 Teilnehmer! Mit vielen hilfreichen WordPress & Elementor Tutorials! (Werbung – Button inkl. Gutschein)