WordPress Child Theme erstellen und anpassen

Child Themes erstellen und anpassen.

Hat man sich für ein Theme entschieden ist man meistens erst einmal zufrieden. Allerdings möchte man mit der Zeit doch die eine oder andere Anpassung am Design vornehmen. Damit das Haupt Theme weiterhin durch Updates aktualisiert werden kann, erstellt man sogenannte Child Themes. Diese Themes erben alle Einstellungen vom Haupt Theme, welche man dann nach Belieben überschreiben kann. Dieser Artikel erklärt, wie man ein Child Theme anlegt und es entsprechend modifiziert.

Wofür benötigt man Child Themes?

Der Autor der dein Theme geschrieben hat bringt häufiger eine neue Version und damit ein Update raus. In diesem Update sind dann zum Beispiel Anpassungen und Fehlerbehebungen drin. Wenn man jetzt sein Theme angepasst hast und das Update einfach so installiert (Info am Rando: Das Update eines Themes wird genauso installiert, als würde man das Theme neu installieren. Also herunterladen und auf dem Webserver überschreiben), dann wären alle eigenen Änderungen weg. Auch die Sprachdatei, wenn man sein Theme selbst übersetzt hat.

Je nachdem welche Anpassung man vornehmen möchte, ist es notwendig den Quellcode des Themes anzupassen. Die eine oder andere Modifizierung kann man meistens über die Administrationsoberfläche direkt per Mausklick beim aktiven Theme anpassen.

Darunter gehören unter anderem die folgenden Anpassungen:

  • Das Headerbild austauschen
  • Das Menü anpassen. Die Reihenfolge und die Sichtbarkeit der einzelnen Menüpunkte lässt sich direkt anpassen
  • Farbschema des Themes anpassen

Für folgende Anpassungen ist meistens eine Child Theme notwendig:

  • Den Content Bereich breiter oder schmaler machen
  • Eine Seite, wie zum Beispiel das Impressum im Footer verlinken
  • Größe der Überschriften und die Linkfarbe anpassen

Ein Child Theme anlegen

Als erstes wird ein eigenes Verzeichnis für das Child Theme erstellt. Im WordPress Verzeichnis unter „wp-content“ – „themes“.
Den Ordner nennt man wie das original Theme mit einem „-child“ hinten dran.
Zum Beispiel twentyfifteen-child. Wichtig ist, dass hier keine Leerzeichen verwendet werden sollten.

Das original Theme und unser Child Ordner dazu.

Das original Theme und unser Child Ordner dazu.

In diesem Verzeichnis werden zwei leere Dateien angelegt: style.css und functions.php

Die zwei wichtigsten Dateien unseres Child Themes.

Die zwei wichtigsten Dateien unseres Child Themes.

Als nächstes bekommt unsere style.css unsere eigene Bezeichnung. Die style.css öffnen und folgendes einfügen:

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

Mit diesen Zeilen erkennt WordPress das Theme und zeigt es dadurch erst in der Administrationsoberfläche an.

Bei diesen Zeilen ist es wichtig die Zeile
Template: twentyfifteen
zu überprüfen. Hier muss der Name (Ordnername wie das Theme auf dem FTP Server liegt) des Haupt Themes stehen. Die anderen Werte kann man bis auf „Text Domain“ beliebig anpassen, aber für den Moment reicht es auch so.

Wechseln wird jetzt in den Administrationsbereich in die Themeübersicht sehen wir unten möglicherweise die folgende Fehlermeldung:

Fehlermeldung, wenn WordPress unser Child Theme nicht erkennt.

Fehlermeldung, wenn WordPress unser Child Theme nicht erkennt.

Der Grund hierfür ist, dass die style.css noch nicht mit den oberen Zeilen abgespeichert und auf den Webserver hochgeladen war.

Hat alles funktioniert, sehen wir unser Theme im Backend:

Unser Child Theme noch ohne schönem Vorschaubild.

Unser Child Theme noch ohne schönem Vorschaubild.

Unser Child Theme hat noch kein schönes Vorschaubild. Dafür nimmt man einfach die Datei „screenshot.png“ aus dem Haupt Theme Ordner, passt sie an (Größe 800×600 beibehalten) und lädt sie zu der style.css und functions.php hinzu.

Bevor wir das Child Theme aktivieren können, müssen wir folgende Zeilen in die functions.php eintragen:

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

?>

Diese Zeilen sind aus folgendem Grund wichtig: Unser Child Theme erbt immer alle Styles von dem Haupt Theme (deswegen muss dieses auch immer auf dem Server liegen bleiben). Wir wollen mit dem Child Theme ja nur bestimmte CSS Anpassungen vornehmen. Zum Beispiel nur die Art, in welcher Farbe Links dargestellt werden.

Unser Child Theme muss also auf jeden Fall die style.css Datei des originalen Themes laden – und zwar bevor es seine eigene lädt. Das wird mit diesen Zeilen erledigt. Früher hatte man eine Zeile beginnend mit @import url… aber laut WordPress: Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice.

Jetzt können wir das Theme über die Administrationsfläche aktivieren.

Ein Child Theme anpassen

In unserer neuen style.css können wir jetzt unsere eigenen Style Definitionen reinpacken. Wir möchten jetzt zum Beispiel das unsere Überschriften mit dem h1 Tag etwas kleiner werden sollen.

Aktuelle Größe unserers h1 Tags.

Aktuelle Größe unseres h1 Tags.

Folgendes schreiben wir in die style.css unter unsere Theme Definition: .

page-title {
font-size: 8.8rem;
}

Und so sieht es nach dem Speichern auf dem Server aus:

Unsere Überschriften mit h1 werden jetzt größer angzeigt.

Unsere Überschriften mit h1 werden jetzt größer angezeigt.

Jetzt sind wir soweit, dass wir mit unserer style.css die original style.css überschreiben können. Das können wir mit dem Child Theme nun mit jeder Datei machen. Die Dateien in unserem Theme Ordner überschreiben immer die Dateien vom Haupt Theme Ordner.

WordPress lädt als erstes das Haupt Stylesheet und dann das vom Child Theme.

Achtung: Ausnahme ist hier die functions.php Diese wird zusätzlich – aber vor – der Haupt functions php geladen. Dadurch kann man die Funktionen des Themes erweitern, indem man seine eigene functions.php anpasst.

WordPress lädt zuerst die Child Theme Funktionen und dann die des Haupt Themes. 

Man sollte allerdings nur die Funktionen in seine eigene functions.php nehmen, welche man auch benötigt und anpassen muss. Und nicht den ganzen Inhalt der original functions.php verwenden. Einfach aus dem Grund, dass wir Updates des Original Themes weiterhin erhalten möchten.

Als praktischen Test versuchen wir jetzt eine Funktion zu schreiben, die eine JavaScript MessageBox ausgibt.
Wir passen die functions.php an:

<?php

//Hier steht der PHP Code, den wir bereits in die functions.php eingetragen haben.

function hallo() {
echo '<script>alert("Hallo Rockstar!");</script>' . "\n";
}
add_action( 'wp_head', 'hallo' );

Kurze Erklärung:

function hallo()

In diese Funktion schreiben wir, was wir später gerne im Header Bereich unserer Seite stehen haben möchten.

add_action( 'wp_head', 'hallo' );

Mit dieser Zeile geben wir WordPress die Info, dass unsere Funktion „hallo“ bitte ausgeführt wird, wenn der <head> Bereich der Seite erstellt wird.

Wenn wir jetzt unsere Seite aufrufen und POP-Ups nicht blockiert sind erhalten wir unsere Nachricht:

JavaScript "alert" Message Box mit unserer Nachricht.

JavaScript „alert“ Message Box mit unserer Nachricht.

Unseren Footer anpassen:
Wir erweitern unsere functions.php um folgende Funktion:

add_filter('twentyfifteen_credits', 'mein_footer');
function mein_footer(){
echo "
Hier könnten unsere Social Media Icons stehen
";
}

Und sehen folgendes auf der Seite ganz unten:

In unserem Footer können wir jetzt beliebigen HTML Code ausgeben.

In unserem Footer können wir jetzt beliebigen HTML Code ausgeben.

Warum machen wir das so anstatt einfach die komplette footer.php zu kopieren und anzupassen?
Das funktioniert hier sehr schön mit unserer Funktion, da das Theme Twenty Fifteen dies bereits vorbereitet hat. Schauen wir uns die Original functions.php an, dann sehen wir:

Die original functions.php des Themes Twenty Fifteen.

Die original functions.php des Themes Twenty Fifteen.

Das do_action(‚twentyfifteen_credits‘) ist eine Funktion die im Footer ausgeführt wird. Und diese haben wir mit unserer oberen Funktion einfach angedockt und mit eigenem Inhalt gefüllt. Der Vorteil ist hier, dass durch ein Update die original footer.php aktualisiert werden kann.

Unterstützt das Theme so eine Funktion nicht, dann hätten wir die komplette footer.php übernehmen und in unseren Child Theme Ordner einspielen müssen. Dann wäre die komplette Datei aber von Updates ausgeschlossen. Und meistens möchte man nur einen kleinen Schnipsel aus einer Hauptdatei anpassen.

Ein Child Theme übersetzen

Die meisten Themes sind auf Englisch, und wir könnten jetzt jede Datei von Hand bearbeiten und Deutsche Übersetzungen eintragen. Das geht alles komfortabler.

Wir erstellen den Ordner „languages“ in unserem Child Theme Ordner:

In den languages Ordner kommen unsere Übersetzungen.

In den languages Ordner kommen unsere Übersetzungen.

Jetzt fügen wir die Sprachdateien hinzu:

de_DE.po und de_DE.mo
Diese Dateien kann man mit dem Programm „Poedit“ erzeugen. Oder man lädt die aktuellen Übersetzungen hier herunter: http://wpde.org/download/sprachdateien/

In unsere functions.php müssen wir dann noch diese Zeilen hinzufügen:

add_action( 'after_setup_theme', 'my_child_theme_setup' );
function my_child_theme_setup() {
load_child_theme_textdomain( 'twenty-fifteen-child', get_stylesheet_directory() . '/languages' );
}

Das war ein Einführungsbeispiel anhand des Themes TwentyFifteen. Verwendet man ein Theme mit Bildern muss man zum Beispiel noch darauf achten im Child Ordner einen Ordner mit den Bildern anzulegen.

Weiterführende Quellen auf Englisch:
Child Theme erstellen
Template Dateien
Functions.php
Child Theme Screenshot
Add_Filter

2 Kommentare

  1. Ramon Fincken   •  

    A bit of PHP code to show how the including of theme functions.php works:

    https://core.trac.wordpress.org/browser/trunk/src/wp-settings.php#L323

    // Load the functions for the active theme, for both parent and child theme if applicable.
    325 if ( ! defined( ‚WP_INSTALLING‘ ) || ‚wp-activate.php‘ === $pagenow ) {
    326 if ( TEMPLATEPATH !== STYLESHEETPATH && file_exists( STYLESHEETPATH . ‚/functions.php‘ ) )
    327 include( STYLESHEETPATH . ‚/functions.php‘ );
    328 if ( file_exists( TEMPLATEPATH . ‚/functions.php‘ ) )
    329 include( TEMPLATEPATH . ‚/functions.php‘ );
    330 }

  2. Pingback: HTML direkt im Browser bearbeiten – WordPress Rockstars

Schreibe einen Kommentar

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