Es ist davon auszugehen, dass Sie irgendwann an den Punkt kommen, wo sich Anpassungen am Layout nicht mehr alleine mittels CSS umsetzen lassen. Das war bei mir bereits nach wenigen Stunden der Fall. Also Hand anlegen an die Dateien des Themes. Das funktioniert dann so lange, bist der Anbieter des Plugins Ihnen ein Update liefert. Dann sind all die schönen Änderungen wieder weg.

Abhilfe schafft hier ein Child-Theme. Die Dateien die Sie ändern wollen werden in das Child ausgelagert. Somit bleiben sie bei einem Update des Parent-Theme unverändert.

Child Themes haben aber auch einen Nachteil. Da WordPress nicht sauber zwischen Content und Design trennt, also Funktionalität erst im Theme integriert, können sich auch Sicherheitslücken einschleichen. Werden Diese mit einem Update des Parent-Theme beseitigt, bleiben sie im Child-Theme bestehen. Sie sollten das also im Blick behalten. Plugins wie z.B. Theme-Check hilft Ihnen dabei die Änderungen zu vergleichen. Sie können dann entscheiden, in wie weit Sie die Änderungen in Ihr Child übernehmen. Voraussetzung ist natürlich, dass Sie in der Lage sind kritischen Code zu erkennen.

Der Vorteil von Funktionen im Theme auszuführen ist, dass Sie sich beliebig austoben können. Ein Beispiel auf dieser Webseite ist die Anzeige Erstellungsdatum bei den Beiträgen der Kategorie News. Sehr auffällige Darstellung. In allen anderen Kategorien wird das Datum weit unauffälliger angezeigt. Hier wird einfach der Inhalt der URL überprüft.

Natürlich gibt es auch Plugins für Child-Themes. Allerdings ist man dann auf die zuverlässige Funktionalität des Plugins angewiesen. Das Anlegen eines Child-Themes ist auch ohne Plugin recht einfach. Ich habe deshalb auch kein Plugin ausprobiert und belasse es deshalb bei der Erwähnung.

Dann legen wir los!

Legen Sie im Verzeichnis /wp-content/themes ein neues Verzeichnis an. Verwenden Sie dafür die Syntax themename_child. In diesem Verzeichnis erstellen Sie erstmal die leere Datei style.css. Damit WordPress Ihr Child-Theme erkennt, schreiben Sie folgende Anweisungen rein:

Zeile 2, Name des Child im Backend
Zeile 6, Verzeichnisname des  Parent Themes

Nun erstellen Sie im selben Verzeichnis eine leere functions.php. Sie wird zuerst einmal dazu benötigt Ihre neue CSS-Datei einzubinden. Wichtig ist, Ihr CSS muss NACH dem CSS des Parent-Themes geladen werden. Das erreichen wir mit der nächsten Funktion, indem das originale CSS erst mal deregistrieren und anschliesend die beiden CSS in der richtigen Reihenfolge neu registrieren,

Die Funktion add_action in Zeile 9 ruft die Funktion twentyseventeen_child_styles() in Zeile 2 auf. Diese deregistriert in Zeile 3 das CSS vom Parent-Theme.

Der Name des CSS ist von Theme zu Theme unterschiedlich. Sie müssen den korrekten Namen also erst mal in der functions.php des Parent-Themes mit wp_enqueue_style suchen. In unserem Beispiel lautet der Name also twentyseventeen-style, aktuell zu finden in der Zeile 416.

411 | function twentyseventeen_scripts() {
412 | // Add custom fonts, used in the main stylesheet.
413 | wp_enqueue_style('twentyseventeen-fonts',twentyseventeen_fonts_url(),array(),null);
414 |
415 | // Theme stylesheet.
416 | wp_enqueue_style('twentyseventeen-style',get_stylesheet_uri());

In Zeile 4 wird das originale CSS wieder registriert, in Zeile 5 wieder eingebunden, gefolgt vom Child CSS in Zeile 6.

Vorsicht Stolperfalle: Es gibt Templates, welche irgendwo in einem Unterverzeichnis eine weitere ‘functions.php’ haben. Wenn Sie also in der Ersten den Code nicht finden, weiter suchen, es muss ihn geben.

Im Backend wird nun das neue Child angezeigt, jedoch noch ohne Bild. Das Bild von Ihrem Theme müssen Sie noch in das selbe Verzeichnis wie die anderen Dateien kopieren. Das Bild sollte eine Grösse von 600 x 450 Pixel haben und muss mit screenshot.png benannt sein.

Jetzt ist auch Ihr eigenes Themebild zu sehen.

Das neue Theme kann nun wie jedes andere Theme auch aktiviert werden.

Wichtg: Wenn Sie an Ihrem Parent-Theme bereits CSS Änderungen im Customizer vorgenommen haben, müssen Sie Diese im Child neu eintragen.

Der CSS-Customizer

Der CSS-Customizer im Backend überschreibt sämtliche vorangegangenen CSS Anweisungen. Die Funktion wp_head() generiert ab dem <title> den Inhalt des Headers bis VOR das abschliessende </head> Tag. Als letzte Zeile dieser Funktion wird so was ähnliches wie <link rel="stylesheet" type="text/css" id="wp-custom-css" href="/?custom-css=d7e3b02c49" /> ausgegeben, das CSS des Customizers.

Eine sehr praktische Funktion des Customizers ist, dass Sie jede Änderung sofort auf der Seite sehen können, ohne dass das CSS erst gespeichert und die Seite neu geladen werden muss.

CSS-Dateien die Sie im Header NACH der Funktion wp_head() verlinken, werden NACH dem Customizer geladen.

Da das verhältnismässig kleine Eingabefeld des Customizers nicht unbedingt der Übersichtlichkeit dient, wandern bei mir die Angaben aus dem Customizer von Zeit zu Zeit in eine separate CSS-Datei.

Dateien bearbeiten

Alle Dateien die Sie nun bearbeiten wollen, kopieren Sie zuerst vom Parent-Theme in Ihr Child-Theme.

Die functions.php

Im Child-Theme haben Sie ja bereits eine neue funktion.php erstellt. Die function.php im Parent-Theme bleibt also wo sie ist, Diese wird NICHT in das Child-Theme kopiert.

Weitere Funktionen

Im Themenverzeichnis gibt es auch ein Verzeichnis functions. Beim Theme Appointment gibt es darin die Datei template-tag.php. In der Datei ist eine Funktion vorhanden, welche das Userbild, den Usernamen sowie die Tags darstellt. Da ich den Usernamen an anderer Stelle ausgeben will, muss die Funktion angepasst werden.

Diese Datei entsprechend ins Child zu kopieren funktioniert anscheinend nicht. Die Funktion als Snippet zu kopieren hat dann zum gewünschten Erfolg geführt.