WordPress Child-Theme erstellen

In diesem Beitrag zeige ich dir, wie man rasch ein Child Theme erstellen kann. Vor allem erkläre ich, warum wir uns all die Mühe machen sollten und wie du künftig von einem Child Theme bei deiner Arbeit profitierst. 

Ein WordPress Child Theme ist ein echtes Wundermittel für Webentwickler. Zwar lässt sich WordPress auch ohne Child Theme grafisch und inhaltlich anpassen, indem man Anpassungen am Stylesheet oder der functions.php vornimmt. Ärgerlich ist nur, dass alle diese Anpassungen verloren gehen, wenn man ein Update des Themes einspielt.

Um genau dies zu verhindern, baut man das sogenannte Child-Theme.

Was ist ein WordPress Child Theme?

Ein Child Theme ergänzt die Design-Einstellungen und Funktionen eines anderen WordPress Themes (Parent Theme). Die Idee ist, eigene Styles, Templates und Funktionen in einem separaten Theme zusammenzufassen und dann diesen Code dem Haupttheme hinzuzufügen. Praktisch ist, dass ein Child Theme alle Eigenschaften des übergeordneten Parent-Themes erbt, andersherum aber sämtliche Individuellen Anpassungen im Child-Theme das Original Theme überschreiben. So lassen sich nicht nur kleine Änderungen, sondern ganze Templates beliebig ändern.

In kurz: WordPress lädt zunächst das Parent Theme / Elterntheme und prüft anschießend, ob es Sonderwünsche (im Child Theme) gibt.

Gerade bei einfachen Themes sind oft Änderungen im Code notwendig. Aber auch bei umfangreiche Themes wie dem Divi Theme gibt es Anpassungen, die leider nur durch einen Eingriff in die Dateien umgesetzt werden können. Meist sind dies Änderungen an den style.css und functions.php – gleichwohl das Style CSS auch direkt in den Theme Optionen eingetragen werden könnten. 

Natürlich könnte man auch direkt die Dateien des Themes ändern, hätte aber dann das Problem, dass mit dem jedem Update des Themes alle Änderungen überschrieben werden. Und genau dieses Problem wird  durch die Nutzung eines Child Themes vermieden.

Und was ist ein Parent Theme?

Das Parent Theme bzw. Elterntheme ist das eigentliche Haupttheme. Dieses ist in der Regel das normale WordPress Theme und es beinhaltet sämtlichen Code.

Warum sollte ich ein Child Theme verwenden?

Um es auf den Punkt zu bringen: Nur durch ein Child Theme bleiben all deine Anpassungen im Code bei deinem nächsten Theme Update erhalten. Ohne ein Child Theme würden sämtliche Änderungen, die Du direkt am Theme vorgenommen hast, durch das Update überschrieben werden.

Praktisch ist auch, dass man mehrere Child Themes zu einem Eltern-Theme erstellen kann, so dass man bequem zwischen verschiedenen Versionen wechseln kann.

Leider bietet WordPress keine automatische Erstellungen von Child Themes. Folgende Wege führen zu deinem eigenen Child Theme:

Download: Der einfachste Weg ist die Nutzung eines fertigen Child-Theme vom Hersteller. Wir beiten beispielsweise auf Designers Inn immer Childthemes zu den Themes an, sodass jeder Kunde sofort mit einem Childtheme startet.  

Plugins: Es gibt einige Plugins, die automatisch Child Themes erstellen. Mit diesen Plugins lassen sich automatisch passende Child Themes zu eigentlich allen Standard-Themes erstellen. Ein kostenlosese Plugin ist z. B. der Child Theme Configurator

Aber aufgepasst: Eigentlich braucht man kein Plugin. Mit der folgenden Anleitung sollte eigentlich jeder in ein paar Minuten ein eigenes Child Theme erstellen können. Aber auch wer sich für ein Plugin entscheidet, sollte sich die folgende Anleitung durchlesen, um den Aufbau eines Child Themes besser zu verstehen und vor allem zu wissen, welche Dateien der Installation hinzugefügt werden und wo die Änderungen später gespeichert werden.

Do it yourself: Etwas schwieriger – aber nicht kompliziert – ist die eigenständige Erstellung der notwendigen Ordner und der Dateien. Und genau das schauen wir uns jetzt an …

WordPress Child-Theme erstellen

Wie legt man nun ein Child-Theme korrekt an? Die meisten Anpassungen finden im Stylesheet (in der Datei style.css) oder der functions.php statt. Das macht die Sache einfach. 

Schritt 1: Child-Theme-Ordner anlegen

Logge dich per FTP in/auf deinem Server ein und erstelle im Verzeichnis wp-content/themes einen neuen Ordner. Den neuen Ordner kannst du beliebig benennen, z.B. CHILDTHEME. Wichtig ist nur, dass dieser Ordner auf derselben Ebene liegt, wie der Ordner deines Hauptthemes.

Schritt 2: Childtheme-CSS

Erstelle nun eine Datei style.css. Dies kannst du mit jedem Texteditor erledigen. Achte beim Speichern nur darauf, dass die Endung wirklich “css” lautet. Füge folgenden Text (mit deinen Daten) in die Datei ein. Wichtig ist vor allem, dass unter “Template:” der exakte Name des Ordners von deinem Haupttheme steht!

/*
Theme Name: Childtheme
Description: Mein neues Childtheme
Author: Dein Name
Author URI: http://www.deine-website.de
Template: Name_des_Haupttheme-Ordners
Version: 1.0
Tags:
*/
/*Füge deinen Code unter dieser Zeile ein. Nutze ggf. !important, um Styles aus dem Haupttheme zu überschreiben.*/

Lade nun die style.css in den Ordner deines Childthemes.

Schritt 3: Chldtheme functions.php erstellen

Okay, nun müssen wir noch eine Datei namens functions.php erstellen. Mit dieser verknüpfen wir unsere Datei CSS mit unserem Haupttheme. Auch dies kannst du mit jedem Texteditor erledigen.

In die Datei kommt folgender Text:

<!--?php
//add child theme
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
?-->

Schritt 4: Childtheme nutzen

Sobald du dich neu in dein Backend einloggst, ist dein neues Childtheme auch schon verfügbar. Klasse. Dein neues Theme hat jetzt noch keine Vorschaugrafik und sieht entsprechend etwas nach einer Baustelle aus. Du kannst die Ansicht im Backend auch etwas aufhübschen, indem du ein Vorschaubild (PNG) mit dem Dateinamen screenshot.png in dein Verzeichnis des Child Themes legst. Das Bild sollte die Maße 1200 px x 900 px haben. Ab sofort wird dein neues Child Theme mit diesem Bild in deinem Admin-Bereich angezeigt. 

Wie aktiviert man das veränderte Child-Theme in WordPress?

Sobald dein Child-Theme im Verzeichnis wp-content/themes abgelegt ist, wird dieses wie jedes andere installierte Theme im Admin-Bereich von WordPress angezeigt.

Jetzt musst du dein Child Theme nur noch als aktives Theme festlegen. Beachte, dass dein Elterntheme unbedingt installiert bleiben muss, denn hier ist ja 99% des Codes enthalten. Du erinnerst dich? Wir wollen mit dem Child Theme nur die Änderungen vornehmen, die von Hause aus nicht über das Elterntheme erledigt werden können.   

Sobald dein Child Theme aktiviert ist, solltest du zunächst noch gar keinen Änderung sehen. Das ist auch richtig so, denn noch haben wir ja keine Änderung in unserem Child Theme eingetragen.

Wie passe ich das Child Theme an?

Ab sofort kannst du alle Anpassungen direkt in deinem Child Theme eintragen. WordPress erkennt automatisch, welche Dateien im Theme-Ordner vorhanden sind und welche Anpassungen hier vorgenommen wurden. Ist es in deinem Haupt-Themes beispielsweise nicht möglich, die Textfarbe oder Zeilenabstände zu ändern, kannst du die Farbe für den Text oder die Abstände bequem per CSS verringern.

Jede Menge Anleitungen rund um CSS findest du u.a. auf der Website Self HTML.

Tipp 1: Du kannst natürlich neben der Style CSS und der function.php auch weitere Dateien ändern, beispielsweise die footer.php oder header.php. Dazu musst die diese Dateien in deinen Child Theme-Ordner kopieren und kannst dann deine Änderungen vornehmen.

Tipp 2: Sollten nach der Aktivierung Fehler auf der Website auftauchen oder gar die ganze Website nicht mehr korrekt laden, kannst du jeder Zeit leicht zum Parent-Theme wechseln. Aktiviere einfach das Haupttheme – und schon ist wieder alles beim alten. Sollte deine ganze Website nicht laden, lösche einfach den Childtheme-Ordner. In diesem Fall lädt WordPress das aktuelle WP-Standardtheme (solltest du dieses nicht installiert haben, kannst du den Ordner von WordPress.org herunterladen und per FTP auf deinen Server laden).

Na denn, frohes Anpassen!

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!
Divi Header Jumping / Moving On Page Load

Divi Header Jumping / Moving On Page Load

Wenn du eine benutzerdefinierte Einstellungen für die Navigation nutzt, sprich im Theme Customizer eine eigene Höhe für deine Navigation angelegt hast, kommt es zu kleinen Sprüngen im Kopfbereich der Website. Dies betrifft den ersten Abschnitt der Seite, Module mit...

WordPress Updates installieren

WordPress Updates installieren

Für viele ist es ein Horrorszenario: "Wir müssen ein WordPress Update installieren". Wie soll man das machen? Geht alles reibungslos? Wo gibt es Probleme? Und das Wichtigste. Wie kann man diese beheben? Wie man WordPress aktualisieren oder Theme- und Plugin-Updates...

Divi Sticky Elemente Tutorial

Divi Sticky Elemente Tutorial

Mit dem aktuellen Divi kann man Sticky Elemente einfügen – und das ist eine prima Angelegenheit, denn wir können jetzt beim Scrollen einzelne Module, Zeilen oder auch Sektionen am Kopf der Seite oder auch am Fuß der Seite festkleben. Und je nachdem wie weit wir...

WordPress Backup erstellen mit WPvivid

WordPress Backup erstellen mit WPvivid

Ein weiteres Tutorial zum Thema WordPress Sicherheit. Heute geht es um die Frage “Wie kann ich ein vernünftiges WordPress Backup erstellen?” Wir schauen uns dazu das WordPress Backup Plugin WPvivid einmal im Detail an.

|

Platz für deinen Kommentar!

8 Kommentare

  1. Patrick

    Sorry für die dumme Frage, aber wie kann WordPress ein Update vom eigenen erstellten Theme machen? Oder verstehe ich hier etwas komplett falsch, verstehe ehrlich gesagt noch immer nicht was genau der Sinn eines Child Themes ist

  2. Marco

    WordPress macht keine Updates für die von dir erstellten Themes. WordPress hat generell ja nichts mit den Themes am Hut ;-) Der Grund für Childthemes: Wenn ein Theme geupdated wird, gehen all deine Änderungen/Anpassungen verloren. Um dies zu verhindern, schreibt man individuelle Anpassungen in ein Childtheme. So bleiben die Änderungen bei einem Updates des (Haupt/Eltern)Themes erhalten.

  3. Paul

    Ich habe eine Frage wenn ich das child theme aktivier möchte steht da Beschädigte Themes

    Die folgenden Themes sind installiert, aber nicht vollständig.
    Name Beschreibung
    Childtheme Das übergeordnete Theme fehlt. Bitte installiere das übergeordnete Theme „/wp-content/themes/suffice“, da du Child-Themes sonst nicht nutzen kannst.
    aber das Theme befindet sich in dem Ordner…was kann ich machen?

  4. Marco Linke

    Hi, du musst im Childtheme das Haupttheme korrekt benennen. Der Ordner muss genauso heißen, wie du dies unter “Template” angibst.

  5. Arne

    <!–?php das ist aber nicht richtig so

  6. Marco Linke

    Ich habe den Kommentar mal rausgenommen :-) Danke für den Hinweis …

  7. Webdesign Köln

    Hi Marco,
    schicke Website und toller Artikel. Würde nur auch die Möglichkeit ansprechen, das es diverse Plugins gibt die für einen ein Child Theme erstellen. Ist vermutlich für die meisten Anwender die einfachste und sicherste Variante.

    Auch solltest du die Textfarbe bei deinem “Kommentar abschicken”Button auf weiß stellen, der Text wird erst sichtbar wenn man den Button hovert.

    Liebe Grüße aus Köln,
    Kai

  8. Marco Linke

    Hi Kai, danke für das Feedback. Und ja, die Farbe hab ich bei der letzten Anpassung falsch eingestellt :-) Kennst du ein gutes Plugin für Childthemes?

Einen Kommentar abschicken

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

Neue Themes

Mehr verkaufen

Geschenkt

Handbuch WordPress,
Workshop SEO & Marketing

Download