Post navigation

WordPress Child-Theme erstellen: schnell und ganz einfach

WordPress · · Keine Kommentare

Wenn Du an Deinem Theme etwas ändern möchtest, solltest Du ein WordPress Child-Theme anlegen. Erstens geht es ganz einfach und schnell, zweitens sind alle Deine Änderungen auch nach einem Theme-Update noch vorhanden. Ich zeige Dir, wie leicht es geht.

Zuerst einmal brauchst 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.

WordPress Child-Theme erstellen: die nötigen Dateien

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.

Der wichtige kleine Unterschied – das musst Du wissen

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_uri().

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 Theme mit einem Child-Themes Entwickeln.

Funktionen des Parent-Themes überschreiben

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.

Grundsätzlich gilt:

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.

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 dazu, kein Theme ohne Child-Theme zu nutzen. Es ist einfach unbezahlbar, wenn Dein Parent-Theme ohne Probleme auf dem neuesten Stand gehalten werden kann.

Weiterführende Informationen:

Abonniere meinen Newsletter

Melde Dich für meinen Newsletter "WordPress & Bloggen" an und verpasse keinen Artikel. Als Dankeschön bekommst Du Gratis meine nützliche Checkliste:
»12 Dinge, die Du vor einem Theme-Wechsel beachten solltest«.

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er ist ebenfalls Autor von drei richtig guten WordPress E-Books.

Schreibe einen Kommentar

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