Wordpress Child Theme Screenshot für Horst

WordPress Child Theme erstellen – so geht es ganz einfach

Viele Webseitenbetreiber setzen auf die kostenlose Blogging-Software WordPress. Die Gründe dafür liegen auf der Hand: WordPress ist kostenlos, Open Source, ist sehr einfach zu bedienen und bietet von Haus aus schon sehr viele nützliche Plugins und natürlich auch tausende, größtenteils kostenlose Themes.

WordPress Child Themes erstellen

So erstellst Du Dein eigenes WordPress Child Theme

Der grobe Ablauf, um ein eigenes Child Theme für WordPress zu erstellen, sieht in etwa wie folgt aus.

  1. Child- Theme- Ordner erstellen
  2. Datei „style.css“ anlegen
  3. Datei „functions.php“ anlegen
  4. Optional: Datei „screenshot.png“ erstellen
  5. Upload auf den Website und aktivieren

Wie genau die oben genannten Schritte auszusehen haben, wird in den folgenden Absätzen genau erklärt.

WordPress Themes selbst anpassen – mit Child Themes

Ist WordPress erst einmal installiert, installieren viele Leute ein schönes Theme aus dem WordPress Theme Repository. Dort findet man tausende schöne, kostenlose Themes, und für jeden Geschmack dürfte dort etwas zu finden sein. Wer ein ausgefallenes oder gefühlt professionelleres Theme sucht, findet zum Beispiel bei Themeforest.net kostenpflichtige Premium- WordPress- Themes.

Das Problem: Irgendwann möchte man etwas anpassen

Und doch kommt doch irgendwann der Wunsch, etwas anzupassen. Vielleicht gefällt einem die Schriftfarbe nicht, oder man möchte das Layout einiger Seitentypen ändern.

Wer hier gleich beherzt im installierten Theme herumdoktort wird spätestens beim nächsten Theme-Update feststellen, dass eine solche Änderung am Original-Theme nicht von langer Dauer ist. Bei einem Update werden nämlich die Dateien im Theme überschrieben, und damit auch die vorgenommenen Änderungen.

Die Lösung: Child Themes

WordPress bietet die Möglichkeit, sogenannte Child Themes zu erstellen. Diese Child Themes besitzen alle Funktionen und das Design vom Eltern- Theme (Englisch: Parent Theme). Das Gute daran ist: Mit einigen kleinen Änderungen können wir alle Aspekte des Parent Themes überschreiben und unseren Wünschen anpassen. Wie das geht, zeige ich Dir in den folgenden Abschnitten.

Ein Wordpress Child Theme erstellen – Schritt für Schritt erklärt

1. Den Ordner für das Child Theme erstellen

Als erstes müssen wir den Ordner für unser Child Theme erstellen. Dieser Ordner enthält nachher alle Dateien unseres Themes. Wir werden unser Theme für diese Anleitung „Horst“ nennen.

Ich habe für diese Anleitung als Parent-Theme das Theme „Chunk“ von Automattic, den Machern von WordPress, ausgewählt. Du kannst natürlich jedes beliebige Theme wählen. Du musst dann nur überall, wo ich chunk schreibe, den Ordnernamen Deines Parent-Themes eintragen.

Verbinde Dich also per FTP mit Deinem Webserver und wechsle dort in das Verzeichnis  wp-content/themes/ . Dort erstellst Du nun den Ordner  horst .

Deine Ordnerstruktur in wp-content/themes/  sollte nun in etwa so aussehen:

Anleitung Child Themes - Ordnerstruktur wp-content/themes

2. Die Dateien für das Child-Theme erstellen

Nun wechselst Du in den Ordner horst und erstellst dort folgende zwei (im Moment noch leere) Dateien: style.css  sowie functions.php . Öffne diese beiden Dateien nun lokal auf Deinem Rechner in einem Editor Deiner Wahl. Hier empfehle ich gerne Sublime Text oder Brackets.

Nun sieht es bei Dir in etwa so aus:

Anleitung WordPress Child Theme - Basisdateien erstellen

Nun werden wir etwas in den Code einsteigen. Aber keine Angst, ich nehme Dich an die Hand und werde Dir alles Schrit für Schritt erklären.

2.1 Die Datei style.css anpassen

Als erstes werden wir die Datei style.css  mit etwas Code füllen. Öffne also die Datei style.css  in Deinem Editor und füge dort folgenden Code ein:

Was beinhaltet der Kommentar-Block in der Datei style.css?

Der Kommentarblock beinhaltet alle Theme-relevanten Informationen. Ich habe sie für Dich hier einmal aufgedröselt.

Wir haben in Zeile 1 dem Kind einen Namen gegeben. Der Wert von Theme Name  wird nachher im Backend in der Theme- Übersicht angezeigt werden.

Zeile 2 ist die Beschreibung für unser Child Theme. Dort kannst Du reinschreiben, was Du magst.

In den Zeilen 3 und 4 tragen wir Informationen zum Autoren des Themes ein – also Deine Informationen.

Jetzt wird es interessant. In Zeile 5 steht der Ordnername des Parent Themes, in meinem Fall also chunk . Wenn Du zum Beispiel ein Child Theme für das Originaltheme TwentySixteen erstellen wollen würdest, käme bei Dir in diese Zeile der Wert twentysixteen .

In die Zeile Version  schreiben wir einfach die Versionsnummer unseres Themes. Starte einfach bei 1.0. Oder wo Du magst.

Und jetzt noch einmal aufpassen: In die Zeile Text Domain  schreibst Du nun den Ordnernamen Deines Child Themes – für unsere Anleitung also einfach nur horst .

2.2 Die Datei functions.php anpassen

In der Datei functions.php  werden die Theme- relevanten Funktionen abgelegt. Dort sagen wir WordPress auch, dass er die Styles für das Theme – und auch für das Parent- Theme – laden soll. Kopiere bitte den folgenden Code in Deine erstellte Datei functions.php :

Wunderbar! Jetzt speichere bitte beide Dateien und lade sie in Deinen Ordner horst  auf Deinem Webspace hoch.

2.3 Der Screenshot für das Child Theme

Damit in Deiner Theme- Übersicht auch ein Screenshot für das Child Theme angezeigt wird, solltest Du ein Bild im Format 1200 x 900 Pixeln hochladen. Der Name der Bilddatei muss screenshot.png  sein. Wenn Du möchtest, darfst Du auch gerne das Bild hier verwenden.

Wordpress Child Theme Screenshot für Horst

Um das Bild herunter zu laden, hier rechts klicken und „Speichern unter…“ wählen, um das Bild auf Deinem Rechner zu speichern. Lade es anschließend in Deinen Child- Theme- Ordner auf Deinem Webspace.

3. Template- Anpassungen im Child Theme

Herzlichen Glückwunsch! Du hast Dein Child Theme nun erstellt und solltest es auch bereits in der Theme- Übersicht im Backend Deiner WordPress- Installation sehen können. So in etwa sollte es dort bei Dir aussehen:

Child Theme in der Design Ansicht in WordPress. Hallo Horst

Da ist unser Horst! Klicke nun bei Horst auf den Button „Aktivieren„, um unser Child Theme als aktives Theme festzulegen.

Wenn Du nun Deine Website aufrufst wirst Du feststellen, dass sich optisch rein gar nichts geändert hat. Das liegt daran, dass wir auch noch keine Änderungen vorgenommen haben.

Im Quelltext der Website hat sich jetzt jedoch etwas getan.

Child Theme CSS im Quelltext - das Theme ist aktiv

Dort sehen wir, dass unsere erstellte Child- Theme CSS- Datei eingeunden wurde. Nun können wir also mit der Bearbeitung des CSS loslegen und die Optik der Seite nach unseren Wünschen anpassen.

3.1 CSS- Änderungen im Child Theme vornehmen

Wir machen uns nun daran, einige kleinere Änderungen vorzunehmen, um unsere Website unseren Wünschen anzupassen. Hierzu überschreiben wir ganz einfach die CSS- Selektoren des Parent Themes. Für dieses Beispiel nehmen wir uns den Kopfbereich der Website vor. Hier wollen wir die Farbe und Größe des Seitentitels anpassen. So sieht der Kopfbereich im Moment aus:

Aktuelle Ansicht des Kopfbereichs der Website

In unserem Beispiel hat der Seitentitel die ID  #site-title , und genau damit werden wir jetzt arbeiten. Gehe also in Deinen Editor und öffne die Datei style.css . In diese Datei fügst Du unterhalb des Kommentarblocks folgenden CSS- Code ein:

Dieser Code sorgt dafür, dass die h1-Überschrift mit der ID #site-title und der darin enthaltene Link die von uns gewünschte Farbe und Größe erhält.

Unser Seitentitel sieht jetzt so aus:

Der angepasste Seitentitel nach unserer Anpassung im Child Theme

So kannst Du ganz einfach jedes Element auf der Seite mit CSS umgestalten – ganz, wie es Dir gefällt.

3.2 Änderungen an den Template- Dateien

Aber man möchte ja meist nicht nur CSS- Änderungen vornehmen, sondern auch die Template- Dateien anpassen. Auch das ist nicht schwierig, und im folgenden Abschnitt zeige ich Dir an einem Beispiel, wie das geht.

Wir wollen in diesem Beispiel das Template für einen einzelnen Post anpassen. Hierzu schauen wir im Parent Theme, welche Datei dafür zuständig ist. In unserem Fall ist das die Datei content.php . Diese Datei kopieren wir vom Parent Theme in unseren Theme- Ordner und öffnen sie im Editor.

Angenommen, wir möchten hier den Titel statt als <h2>  nun als <h3>  ausgeben, ändern wir die Zeilen 35 bis 41 folgendermaßen ab:

wird zu

Und so kannst Du mit jeder einzelnen Theme- Datei verfahren. Kopiere sie vom Parent Theme in Deinen Child- Theme- Ordner und passe sie Deinen Wünschen entsprechend an.

Anschließend musst Du natürlich die geänderten Dateien auf Deinen Webspace hochladen.

Video-Anleitung zum Erstellen eines WordPress Child Themes

Da ich eh gerade im Hotel sitze, habe ich ein kurzes Video zu dieser Anleitung aufgenommen. Wenn Du also nicht so gerne liest, kannst Du mich einfach reden lassen 🙂

Das WordPress Child Theme funktioniert nicht – Troubleshooting

Es kommt immer mal wieder vor, dass das Child Theme nicht auf Anhieb funktioniert. Ich liste hier für Dich die häufigsten Fehler auf und helfe Dir bei der Lösung der Probleme.

Solltest Du einen Fehler haben, der hier nicht behandelt wird, lass es mich einfach in den Kommentaren wissen  ich werde dann diesen Artikel erweitern und Dein Problem aufgreifen.

Das Child Theme CSS wird nicht geladen

Dies ist eines der häufigsten Probleme und relativ leicht zu lösen. Wenn die CSS- Datei des Child Themes nicht geladen wird, liegt es oftmals daran, dass die Datei style.css  nicht auffindbar ist. Stelle also erst einmal sicher, dass die Datei in Deinem Child Theme- Verzeichnis vorhanden ist.

Stelle außerdem sicher, dass Du in Deinem Child Theme auch das Parent-Theme-CSS auf korrekte Weise lädst.

In unserem Beispiel weiter oben in diesem Tutorial laden wir das CSS folgendermaßen:

Wir übergeben in der zweiten Zeile der Funktion wp_enqueue_style  als letzten Parameter ein Array, und damit sagen wir WordPress, dass unser Child Theme eine Abhängigkeit besitzt, in diesem Fall natürlich das Paent Theme. Somit lädt WordPress zuerst das Parent Theme CSS, erst danach unsere Child Theme CSS- Datei.

Änderungen im Child Theme CSS sind auf der Seite nicht sichtbar

Hier greift zuerst wieder die Problematik aus der vorherigen Problemstellung. Also als erstes prüfen, ob die Child Theme CSS- Datei vorhanden und von der Syntax her korrekt ist. Wurde das Stylesheet mit korrekter Angabe der Abhängigkeit vom Parent Theme geladen?

Falls Du diese Fragen mit „ja“ beantworten kannst, kann hier eigentlich nur ein Problem mit dem Cache vorliegen. Viele WordPress- Installationen laufen mit einem Caching-Plugin, zum Beispiel WP Super Cache, W3 Total Cache oder WP-Rocket.

Hier musst Du dann lediglich einmal den Cache leeren. Meist geschieht dies in den Einstellungen des jeweiligen Plugins.

Sollte auch dies nichts bringen, hat Dein Browser vermutlich aufgrund der .htaccess Browser Caching- Regeln Deine CSS- Dateien gecached. Hier kannst Du in Deiner .htaccess- Datei Deiner WordPress- Installation einmal nachsehen. Vermutlich findest Du dort etwas ähnliches wie das hier:

<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg „access 1 year“ ExpiresByType image/jpeg „access 1 year“ ExpiresByType image/gif „access 1 year“ ExpiresByType image/png „access 1 year“ ExpiresByType text/css „access 1 month“ ExpiresByType text/html „access 1 month“ ExpiresByType application/pdf „access 1 month“ ExpiresByType text/x-javascript „access 1 month“ ExpiresByType application/x-shockwave-flash „access 1 month“ ExpiresByType image/x-icon „access 1 year“ ExpiresDefault „access 1 month“ </IfModule>

Diese Regel weist den Browser an, die CSS- Datei erst nach einem Monat nach dem erstmaligen Herunterladen neu zu laden. Leere also einfach Deinen Browser- Cache, und schon solltest Du Deine Änderungen sehen.

Zum Schluss

Mit den Child Themes hat uns WordPress eine sehr einfache Möglichkeit gegeben, Änderungen an bereits existierenden und installierten Themes vorzunehmen, ohne dass die von uns vorgenommenen Änderungen durch Theme- Updates überschrieben werden.

Wenn Du noch Fragen oder Anregungen zu dieser Anleitung oder zu Child Themes generell hast, kommentiere einfach diesen Beitrag. Ich freue mich auf Dein Feedback.

2 Replies to “WordPress Child Theme erstellen – so geht es ganz einfach”

Schreibe einen Kommentar

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