WordPress Child Theme erstellen für Anfänger

Keine Kommentare
WordPress Child Theme erstellen: So schnell und ganz einfach

Um zu vermeiden, dass ein Theme-Update eigene Änderungen überschreibt, lohnt es sich, ein WordPress-Child-Theme zu erstellen. Denn ein Child Theme erbt alle Styles und Funktionen seines Parent-Themes. Deine individuellen Anpassungen im Child-Theme überschreiben die Einstellungen des Original-Themes. So kannst Du nicht nur kleine Dinge ändern, sondern auch komplett eigene Designs realisieren. Wir zeigen Dir, wie es geht.

Ein WordPress Child Theme zu erstellen ist wichtig, denn dann sind Anpassungen auch nach Updates vorhanden. Ich zeige Dir, wie schnell und einfach es ist.

1 – WordPress Child Theme erstellen: Mache es komplett selbst

Zuerst einmal benötigst Du einen Ordner, in dem alle nötigen Dateien hereinkommen. Die Benennung des Ordners ist einfach. Navigiere mit Deinem FTP-Programm zum Theme Ordner von WordPress und suche Dir Dein Theme heraus.

Nenne den Ordner ebenso und hänge einfach ein »-child« hinten dran. Beispiel: Wenn Du das Twenty-Fifteen Theme nutzt, dann heißt der Ordner des Original-Theme twentyfifteen. Nenne Deinen Ordner dann twentyfifteen-child.

Bitte beachte:

Für die folgenden Arbeiten benötigst Du einen HTML-Editor. Ich empfehle Dir Brackets, Du bekommst ihn kostenlos für Windows und Mac.

HTML-Editor Brackets

Brackets herunterladen

WordPress Child Theme erstellen: diese Dateien brauchst Du

Ein style.css erstellen

Die beiden vorgeschriebenen Dateien sind eine functions.php und ein style.css. Erstelle zuerst die style.css Datei. Erstelle eine leere Text-Datei mit dem Namen style.css und füge das folgende hinein:


/*
 Theme Name: Twenty Fifteen Child
 Theme URI: http://deine-website.de
 Description: Twenty Fifteen Child Theme
 Author: John Doe
 Template: twentyfifteen
 Version: 1.0.0
 Text Domain: twenty-fifteen-child
*/

/* Ab hier kommen Deine eigenen Formatierungen hinein */

Erklärung zum Style.css:

  • Theme Name – Der Name Deines Child Themes
  • Theme URI – Deine Website-Adresse
  • Description – Beschreibe Dein Theme
  • Author – Natürlich Du
  • Template – Der Name des Parent-Theme Ordners. Sehr wichtig, muss absolut korrekt geschrieben sein.
  • Version – Die Version Deines Child Themes
  • Text Domain – Für etwaige Übersetzungen

Die functions.php erstellen

Nun muss noch die functions.php erstellt werden. Erstelle eine neue Text-Datei und nenne sie functions.php. Dort hinein kopierst Du den folgenden Code, bitte exakt so übernehmen:

<?php
/* =====================================================
    Dein neues Theme - CHILD-THEME VON Twenty Fifteen
===================================================== */

/**
 * Parent und Child-Theme Styles laden
 * @author Andreas Hecht
 */
function example_enqueue_styles() {
	
	// enqueue parent styles
	wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');
	
	// enqueue child styles
	wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
	
}
add_action('wp_enqueue_scripts', 'example_enqueue_styles');

// Ab hier Deine eigenen Funktionen und Snippets

Bitte beachte: Sorge beim Kopieren dafür, dass vor dem öffnenden <?php sich keinerlei Leerzeichen oder Zeilen befinden, ansonsten wird es einen schwerwiegenden Fehler geben.

WordPress Child Theme erstellen: Dieser Unterschied ist wichtig!

Manchmal möchte man Dateien laden und nutzt den Tag get_template_directory_uri(). Doch damit erreichst Du nur die Template-Dateien des Parent-Themes. Willst Du die Child Theme Dateien erreichen, nutzt Du stattdessen get_stylesheet_directory().

Beispiel:

<?php
require_once( get_stylesheet_directory() . '/my_included_file.php' ); 
?>

Dein WordPress Child Theme aktivieren

Nun kannst Du Dein Child Theme unter »Design => Themes« aktivieren. Du wirst noch keinerlei Änderungen bemerken, denn die musst Du noch selbst erstellen. Ein wenig eigenes CSS, ein paar neue Funktionen für die functions.php, vielleicht einige neue Theme-Dateien.

Die Möglichkeiten sind grenzenlos, Du kannst sogar komplett eigenständige Themes mit einem Child Theme entwickeln.

Wichtige Information:

In Deinem Theme-Ordner muss sich neben dem Child Theme auch immer das Parent-Theme befinden. Aktiviert wird jedoch das Child Theme.

Funktionen des Parent-Themes überschreiben

Beim WordPress Child Theme erstellen müssen manchmal Funktionen des Parent-Themes überschrieben werden. Hier bieten sich gleich mehrere Möglichkeiten an. Welche Du einsetzen musst, hängt von der Qualität des Codes des Parent-Themes ab. Ist es nach den WordPress Coding Standards programmiert, so ist es ein leichtes, die Funktion zu überschreiben.

Eine Parent-Funktion würde dann so aussehen:

<?php
 
if ( ! function_exists ( 'my_function' ) ) {
 function my_function() {
 // Der Inhalt der Funktion.
 }
}

Funktion überschreiben im Child-Theme:

<?php
// Dies überschreibt die Parent-Funktion
 function my_function() {
 // Der Inhalt der neuen Funktion.
 }

Wenn das nicht klappt:

Wenn das nicht funktioniert, wird es etwas komplizierter. Ich gehe dann folgendermaßen vor: Ich suche mir die Template-Datei, in der die Funktion im Theme aufgerufen wird und kopiere sie in den Child-Theme Ordner hinein. Danach nehme ich die Child-Funktion von eben und setze ein Präfix davor. In diesem Fall ein ah_.

Bedenke: Nutze für Funktionen immer Unterstriche, niemals Bindestriche!

<?php
// Dies ist eine neue Funktion mit Präfix
 function ah_my_function() {
 // Der Inhalt der der neuen Funktion.
 }

Nun passe ich die aufgerufene Funktion in der Template-Datei aus dem Child Theme Ordner an und schon funktioniert alles wie gewünscht.

WordPress Child Theme erstellen: Das gilt grundsätzlich

Du kannst jede Template-Datei Deines Parent-Themes in den Child Theme Ordner kopieren und anpassen. Die Datei wird dann die gleiche Datei des Parent-Themes überschreiben. Zudem kannst Du auch eigene Dateien erstellen und nutzen, die im Parent-Theme nicht vorhanden sind.

Zuerst wird WordPress immer in den Child Theme Ordner schauen, ob dort Template-Dateien vorhanden sind. Sind sie es nicht, schaut WordPress in den Parent-Ordner hinein und nutzt dann die Original-Templates. Wenn Du eigene CSS- und JavaScript-Dateien hinzufügen möchtest, lies den Artikel dazu.

Falls Du – bevor Du ein Child-Theme erstellst – ein neues Theme nutzen möchte, schaue Dir meine Checkliste für einen Theme-Wechsel an.

2 – WordPress Child Theme erstellen mit Plugin

WordPress Child Theme erstellen: Das Generate Child Theme Plugin

WordPress Child Theme erstellen: Das Generate Child Theme Plugin

Mit dem Plugin Generate Child Theme kannst Du ganz einfach ein Child-Theme für jedes auf Deiner Website installierte WordPress-Theme erstellen. Das WordPress Child Theme Generator-Plugin Generate Child Theme ist kostenlos und sehr einfach zu bedienen.

Das Plugin hilft Dir,  ein WordPress Child Theme in wenigen Minuten zu erstellen. Und das aus jedem auf der Website installierten Theme. Du musst Dich nicht mit dem Code auskennen, sondern nur wenige Felder ausfüllen, wie z. B. die Auswahl des übergeordneten Themes, den Namen des untergeordneten Themes, die Beschreibung des Themes, den Autor und die Version, um das gewünschte WordPress Child Theme zu erstellen.

Download von WordPress

Generate Child Theme Plugin

3 – WordPress Child Theme erstellen mit Wordpress Child Theme Generator

WordPress Child Theme erstellen mit Wordpress Child Theme Generator

WordPress Child Theme erstellen mit dem Child Theme Generator

 

Mit diesem Wordpress Child Theme Generator kannst Du ganz easy ein sehr einfaches Child Theme erstellen.
Mit diesem Starterpaket – das bei den meisten Nutzern sofort funktionieren sollte – kannst Du Dein Parent-Theme ganz einfach erweitern.

So einfach geht es:

  • Schritt 1: Klicke auf den blauen Button (Create a WordPress Child Theme now)
  • Schritt 2: Fülle die Felder aus
  • Schritt 3: Klicke auf den Button (Create a Child Theme now)
  • Schritt 4: Lade das fertige Child Theme herunter
  • Schritt 5: Lade die Datei über »Design => Themes => Themes hochladen« hoch
  • Schritt 6: Aktiviere Dein neues Child-Theme

Fazit:

Nun weißt Du ziemlich viele und wichtige Dinge, um Dir ein eigenes WordPress Child Theme erstellen zu können. Ich rate Dir grundsätzlich, kein Theme ohne Child-Theme zu nutzen. Es ist unbezahlbar, wenn Dein Parent-Theme ohne Probleme auf dem neuesten Stand gehalten werden kann.

Weiterführende Informationen:

Dir hat dieser Artikel gefallen? Dann teile ihn bitte.

Kategorie: WordPress

Keine Information mehr verpassen

Für den Newsletter anmelden, um jeden Monat tolle Inhalte und wichtige Infos zu bekommen.

Wir senden keinen Spam! Erfahre mehr in unserer Datenschutzerklärung.

Andreas Hecht

Andreas Hecht

Andreas ist der Gründer und CEO der SEO Agentur Hamburg und Experte für Suchmaschinenoptimierung und WordPress Entwicklung.

Du bist auf der Suche nach einer seriösen SEO Agentur?

Dir hat unser Artikel gefallen und Du möchtest unsere Hilfe in Anspruch nehmen? Dann melde dich bei unverbindlich bei uns. Wir freuen uns auf Deine Anfrage!

Jetzt weitere interessante Beiträge lesen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.