Wenn du entschieden bist, deine Website mit WordPress zu bauen, weisst du schon, um Eines kommst du nicht herum. Du musst CSS können. Gut genug, um deinem WordPress-Theme den letzten Schliff zu verpassen. Denn aus meiner Erfahrung gibt es einfach kein WordPress-Theme
- das dir bis ins letzte Detail so gut gefällt und
- das so perfekt zu deinen Anforderungen passt
dass du es einfach nur installierst und fertig!
Das weiss WordPress natürlich selbst.
Deshalb gibt es unter Appearance > Customize die Möglichkeit, Zusätzliches CSS einzufügen. CSS allein ist also schon mal kein Grund, jetzt unbedingt gleich ein Child Theme zu installieren.
Aber da gibt es ja noch die Funktionen.
In PHP programmiert.
Meistens nur ein paar Zeilen Code.
Und auch dafür gibt es eine Lösung, ohne Child Theme.
Wie so üblich, in der WordPress-Welt, lässt sich das über ein Plugin regeln. Ich empfehle das Plugin Code Snippets. Die kostenlose Version genügt. Gehen wir hier später noch drauf ein. Und den Link gibt es am Ende dieses Artikels.
Also! Was soll’s?
Wofür brauchst du ein Child Theme?
Erst recht, wenn du dich für GeneratePress entschieden hast, als das WordPress-Theme deiner Wahl (sehe ich genauso, ich empfehle dir sogar, dass du dich gleich für GeneratePress Premium entscheidest, aber das kannst du nachholen).
Schauen wir uns kurz an, wie das funktioniert, mit dem Zusätzlichen CSS.
Appearance > Customize (Design > Customizer)
Im Screenshot oben erkennst du, ich habe da schon mein Child Theme installiert, neben GeneratePress, dem "Mutterthema".
Es heisst wie diese Website und ist auch aktiv.
Aber das stört jetzt erst mal nicht weiter …
Der Screenshot oben zeigt ein Beispiel, das du wahrscheinlich schon kennst.
Unter Global Colors kannst du für GeneratePress einstellen, welches Farbschema du verwendet möchtest. In diesem Beispiel sind 7 verschiedene Farbtöne definiert. Damit kann ich alle möglichen Elemente im Content einfärben. Bei Bedarf natürlich auch Ausnahmen definieren.
Wichtig ist zu verstehen: All diese Einstellungen sind eigentlich nur die Benutzeroberfläche für entsprechende CSS-Statements. Das Gleiche gilt für die meisten Einstellungen, die du später in der rechten Spalte vornimmst, wenn du im Gutenberg Block-Editor arbeitest.
GeneratePress erleichtert dir einfach nur die Arbeit. Mit praktischen Formularen, die nur noch ausfüllen musst. Die teilweise Vorgaben machen oder automatisch Einheiten hinzufügen wie %, em, rem, px usw.
So soll es ja sein, wenn du ein Theme installierst.
Den grössten Teil der CSS-Fummelei nimmt dir GeneratePress schon mal ab.
Andere Themes machen das ähnlich. GP macht das nur besser 🙂
Und für alles darüber hinaus hast du ja – wie eingangs schon gesagt – immer noch die Möglichkeit, im Customizer ins Zusätzliche CSS zu gehen und dort die ausgefalleneren Details direkt zu formulieren, in Form von handgetipptem CSS-Code.
Additional CSS (Zusätzliches CSS)
In der Rubrik "Additional CSS" (Zusätzliches CSS) kannst du dich dann erst mal so richtig austoben. Tipps und Tricks findest du im Netz mehr als genug. Vor allem auch im GeneratePress Support-Forum. Dort sogar, nach meiner Erfahrung, oft die besten.
Also, wenn das Child Theme am Ende doch nur wieder aus CSS und ein paar Funktionen besteht, was du beides auch einfach so haben kannst:
Welche Vorteile hat ein Child Theme?
So lange du nur eine einzige Website hast und gestalten möchtest, kommst du lange, lange Zeit mit den Standard-Optionen hin und wirst so schnell gar nicht auf die Idee kommen, dass dir ein Child Theme fehlen könnte.
Es sei denn, mit der Zeit, sammelt sich in der winzigen Textbox dermassen viel zusätzliches CSS, dass du längst den Überblick verloren hast.
Und es kann auch gut sein, dass es dir schon bald so geht wie mir.
Dass du dich immer öfter darüber ärgerst, dass du gezwungen bist, dich immer erst über Appearance (Design) bis zum CSS durchzuhangeln. Nur, um eine winzige Einstellung zum x-ten Mal zu ändern, auszuprobieren usw.
Dieses Gefummel kennst du mit Sicherheit schon! 🙂
Aber spätestens, wenn du eine zweite, dritte, vierte Website baust, willst du wahrscheinlich von so Einigem profitieren, dass du dir für die erste Website mühsam erarbeitet hast.
Wie überträgst du denn jetzt den ganzen Kram, von A nach B?
Ungefähr in dieser Reihenfolge hat mir irgendwann gedämmert, dass so ein Child Theme eine feine Sache sein muss, weil
- der gesamte CSS-Code an einem Platz ist
- die zusätzlichen Funktionen auch
- da komme ich deutlich schneller hin (sehen wir gleich)
- vor ein beliebig grosses Textfenster
- mit beliebig grosser Schrift
- kann diese Textdateien meines Child-Themes sogar mit einem externen Editor bearbeiten, wenn ich mag
- und am Ende des Tages habe ich meine ganz eigene Version von GeneratePress (Premium)
- die ich auf andere Websites einfach übertragen kann
- sogar installieren, wie die grossen, "richtigen" WordPress-Themes
Klingt wie: besser, schneller, professioneller.
Oder? 🙂
Ich zeige dir, wie du das in ein paar Minuten erledigst.
GeneratePress Child Theme installieren (Template)
Oben siehst du einen Auschnitt von der Seite mit der offiziellen Anleitung und dem Link zum Download eines vollkommen leeren Child Themes für GeneratePress.
Das hat Tom Usborne, der Erfinder und Chef-Entwickler von GeneratePress schon mal für uns vorbereitet.
(Link am Ende dieses Artikels)
Der Link zum Download ist etwas versteckt.
Der Screenshot oben soll helfen, dass du ihn schneller findest.
Der Download besteht aus einer einzigen .zip-Datei.
Diese bitte noch nicht auspacken!
Die willst du nämlich gleich auf deine Website hochladen.
So, wie sie ist.
Dazu klickst du dich ins Backend deiner Website und hangelst dich zu Themes durch, wie oben gezeigt.
Dann das übliche Prozedere. Du klickst auf [Add New].
Aber statt bei WordPress nach einem weiteren Theme zu fahnden, klickst du diesmal auf [Upload Theme].
Darauf fragt dich WordPress brav, welche .zip-Datei es denn sein darf.
Darauf bist du vorbereitet. Hast dir gemerkt, wohin du vorhin die .zip Datei mit dem leeren Child Theme von Tom Usborne abgelegt hast.
Genau die greifst du dir jetzt und klickst [Öffnen].
Und – gleich hast du es geschafft.
Nur noch diese kleine Dialogbox hier.
Jawoll!
Jetzt klickst du [Install Now]
Für dich ist wahrscheinlich jetzt alles gut.
Ich bekomme beim Durchspielen die oben gezeigte Warnung. Klar! Ich habe ja schon ein Child Theme für GeneratePress installiert.
Ich freue mich sogar über diese freundliche Sicherheitsmassnahme.
Es gab Zeiten, da hätte ich WordPress nicht zugetraut, dass es mich warnt. Und ich hätte den Salat dann von Hand aufräumen müssen 🙂
Aus welchen Dateien besteht das Child Theme?
Vielleicht bist du jetzt neugierig. Aus was diese geheimnisvolle .zip-Datei von Tom Usborne besteht.
Nachdem du sie sicher und erfolgreich auf deine Website hochgeladen hast, spricht nichts dagegen, dass du die lokale Datei einfach mal entpackst.
Vorweg: Bitte sei nicht enttäuscht!
Es ist nur ein Ordner mit exakt drei kleinen Dateien:
- Einer Textdatei namens styles.css
- Einer Textdatei namens functions.php
- Und einer Bilddatei namens screenshot.png
Unten siehst du den Inhalt der styles.css
/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Description: Default GeneratePress child theme
Author: Tom Usborne
Author URI: https://tomusborne.com
Template: generatepress
Version: 0.1
*/
Sieht aus wie ein einziger Kommentar.
Tatsächlich darfst du sogar den Text nach Belieben ändern.
Fast beliebig!
Die linke Spalte mit den "Formularfeldern" lasse ich immer unverändert.
In der rechten Spalte musst du "generatepress" unbedingt stehen lassen.
Sonst weiss WordPress nicht, welchem Elternthema es dieses "Child" zuordnen soll. Und dann wird es kompliziert, wie in allen Patchwork-Familien 🙂
<?php
/**
* GeneratePress child theme functions and definitions.
*
* Add your custom PHP in this file.
* Only edit this file if you have direct access to it on your server (to fix errors if they happen).
*/
Die zweite Datei namens functions.php besteht eigentlich auch nur aus einem Kommentar, eingeleitet mit "/*" und endend mit "*/", siehe Screenshot oben.
Wie man das in PHP eben so macht.
Diesen Text darfst du vollständig umgestalten und sogar löschen.
Wie es dir am besten passt.
Nur die allererste Zeile "<?php" musst du unbedingt stehen lassen!
Das ist die Einleitung für WordPress, "Achtung, jetzt kommt PHP-Code".
Und daran anschliessend legst du später deine Functions ab.
Und dann ist da ja noch die dritte Datei, der Screenshot, siehe oben.
Hier hat Tom schon mal grossflächig das Logo von GeneratePress platziert. Ist aber nur der Platzhalter für deinen eigenen Screenshot bzw. den Thumbnail, der dir im WordPress-Backend angezeigt wird, für dein Child Theme, neben dem GeneratePress Elternthema (und vielleicht noch anderen WordPress Themes, mit denen du aktuell / früher so herumgespielt hast).
Unter Appearance > Themes.
Für den Screenshot / Thumbnail zu deinem Child Theme sind mir bis heute nur zwei Vorgaben bekannt:
- Die Bilddatei muss im PNG-Format vorliegen und
- die Datei muss den Namen "screenshot.png" aufweisen
Der Platzhalter von Tom beweist, WordPress nimmt es nicht so genau damit, wie gross das Bild ist. Ist ja auch schon eine Weile her, dass er das leere Child Theme bereitgestellt hat.
Heutzutage wird allgemein empfohlen, diese screenshot.png in
1.200 * 900 Pixeln
anzulegen. Dieser Empfehlung schliesse ich mich einfach an!
Und schon sind wir beim spannenden Teil:
Was kannst du mit deinem neuen Child Theme denn jetzt alles so anstellen?
Child Theme ändern, anpassen, aktualisieren
Die Eingangstür heisst jetzt Theme File Editor (Theme-Datei-Editor).
Selbstredend wieder hinter dem Haupteingang Appearance versteckt (Design).
Und schon bist du mitten im Stylesheet gelandet. Der styles.css Datei zum aktuell aktiven Theme.
Oben rechts kannst du zur Sicherheit überprüfen, dass du das richtige Stylesheet vor der Nase hast.
Normalerweise willst du das Stylesheet des aktiven Themes bearbeiten, hier: dein neues Child Theme.
Alternativ kannst du hier zu einem anderen Theme wechseln, das du installiert hast.
Nur: Achtung!
Es ist überhaupt keine gute Idee, dass du ins GeneratePress Mutterthema wechselst und anfängst, im dazugehörigen Stylesheet herumzufummeln. Oder gar die functions.php von Tom Usborne und Co.
Selbst wenn du keine Fehler machst: der nächste Update für GeneratePress kommt bestimmt. Und dann gehen alle deine Änderungen über die Wupper!
Das genau ist ja das Konzept hinter Child Themes:
Um das Elternthema kümmern sich weiterhin Tom Usborne und sein Team.
Für das Child Theme bist ab jetzt du allein verantwortlich.
WordPress legt beides übereinander und sucht sich dann das Beste heraus. Grob und ganz einfach gesagt 🙂
Im Screenshot oben siehst du, wie ich mir von Tom abgeguckt habe, was ich in die Kommentarzeilen schreibe, um mir selbst klar zu machen, dass ich hier der Chef bin.
Das hilft mir durchaus, gelegentlich, zur Orientierung:
Wo bin ich?
Was mache ich hier?
Auf der rechten Seite hast du dann immer die Auswahl zwischen den drei Dateien, die dein Child Theme ausmachen (abgesehen vom Screenshot / Thumbnail, siehe oben):
- dem Stylesheet styles.css
- der functions.php und
- dem style-editor.css
Huch!
Wo kommt denn diese style-editor.css plötzlich her?
Ich schätze, die legt WordPress automatisch an. Diese Textdatei ist komplett leer. Der Dateiname deutet an, das soll wohl mal ein Stylesheet für den Block-Editor werden.
Das Thema ist so gross. Packe ich in einen eigenen Post. Demnächst.
Im Screenshot oben erkennst du: ist auch nur ein Text-Editor.
Diesmal eben für die Funktionen mit PHP-Code statt CSS.
Interessant finde ich zu verstehen, die Parallele zum Zusätzlichen CSS vs. styles.css
Denn wie eingangs schon gesagt, für zusätzliche Funktionen allein bräuchte es kein Child Theme. Das lässt sich über ein Plugin lösen.
Ich empfehle das Plugin Code Snippets.
Schauen wir kurz rein und vergleichen es mit dem Theme-File-Editor.
Code Snippets Plugin (optional)
Wie im folgenden Screenshot zu erkennen ist, bietet dieses Plugin einiges mehr an Optionen. Vor allem in der kostenpflichtigen Pro-Version sind neben PHP-Snippets auch HTML-, CSS- und Javascript-Schnipsel zu managen. Wenn man das braucht und dafür bezahlt.
Für PHP-Funktionen allein genügt die kostenlose Version.
Es fällt sofort auf, wie viel übersichtlicher und "visueller" du mit diesem Plugin deine Sammlung an zusätzlichen PHP-Funktionen bzw. Code-Schnipseln im Griff behältst.
Aber, am Ende des Plugins, landest du doch wieder in einer simplen Textbox, wie das folgende Beispiel zeigt.
Mit kleinen Extras wie z.B. dem Falten und Entfalten von Textblöcken.
Und so sieht der PHP-Code für die zusätzliche Funktion in diesem Beispiel aus, wenn er vollständig ausgeklappt vor dir leuchtet:
Du siehst: die Unterschiede zum Theme File Editor (Theme-Datei-Editor) liegen im Detail. Ich finde, beides lässt sich durchaus vorteilhaft kombinieren.
Ich verwende das Plugin gerne, um zusätzliche Funktionen auszutesten.
Gerade Code Snippets hat sich dafür bewährt. Weil es meine Fehler im Code abfängt, lange bevor WordPress selbst ins Husten kommt.
Das hat mich schon manchmal vor grösserem Unbill bewahrt.
Auf der anderen Seite:
Genau wie bei CSS. Wenn die Schriftgrösse usw. stimmen, komme ich sehr gut mit einer einzigen, platten, langen Textdatei zurecht.
Die Such-Funktion ist meine beste Freundin.
Jedenfalls im WordPress-Umfeld 🙂
Wenn es mir zu bunt wird, im WordPress-Backend, dann hilft
[Strg] [A] [Strg] [C]
Und dann rüber zu meinem Lieblingseditor.
[Strg] [V]
Und wenn es ganz hart kommt, dann lasse ich meinen Lieblingseditor per FTP direkt zugreifen, auf die styles.css und die functions.php meines Child Themes auf der entsprechenden Website.
Aber, aus Erfahrung weiss ich:
So lange ich nur kleine Änderungen und Ergänzungen vornehmen will, komme ich mit meinen Child Themes auch so zurecht, mit den Bordmitteln, die mir der Theme File Editor so freundlich bereitstellt.
Fazit für heute: Mit Child Theme ist besser als ohne
Rückblickend frage ich mich, warum ich sooo lange gezögert habe, mich auf Child Themes einzulassen. Und bis dahin alle möglichen (faulen) Kompromisse eingegangen bin.
Heute kann ich dir aus voller Überzeugung nur empfehlen:
Lieber heute als morgen.
Du gewinnst einige Optionen dazu.
Du verlierst nichts.
Und ganz gratis stellt sich ein höheres Verständnis davon ein, wie dieser ganze WordPress Bumms aus PHP / HTML / CSS / JS eigentlich funktioniert.
Kind of 🙂
Bis demnächst!
Links
- Using a Child Theme (mit Download) – Tom Usborne, GeneratePress
- Code Snippets Plugin – Code Snippets Pro, wordpress.org
