WordPress Child Theme erstellen in nur 5 Minuten

wordpress-child-theme-erstellen

Einfache Design Änderungen an WordPress Themes sind schnell durchgeführt. Doch beim nächsten Update werden diese überschrieben und müssen neu eingearbeitet werden.

Damit das nicht passiert, solltest du ein Child Theme nutzen. Viele Theme-Anbieter stellen diese zum Download bereit.

Falls nicht, dann nutze diese Anleitung um ein Child Theme zu erstellen.

Es ist einfacher als du denkst 🙂

Was ist ein Child Theme?

Das Child-Theme übernimmt das Design und Funktionen des Eltern-Theme. Anpassungen im Child Theme überschreiben die Einstellungen im Original Theme.

Damit lassen sich kleine bis umfangreiche Änderungen am Design vornehmen.

Vorteile:

Durch ein Update am Parent-Theme gehen Anpassungen im Child Theme nicht verloren. Daher lassen sich Änderungen im Child Theme ohne Risiko durchführen.

Geht was schief, löscht man die entsprechende Datei und kopiert die Originale erneut in den Child Ordner.

Nachteile:

Nach meiner bisherigen Erfahrung gibt es keine 😉

WordPress Child Theme anlegen

Dafür nutze ich das WordPress Theme “Twenty Sixteen”.

1. Ordner für Child Theme erstellen

Zuerst musst du dich per FTP mit deinem Server verbinden.

Falls du noch keinen FTP Zugang eingerichtet hast, dann erkundige dich bei deinem Hoster. Dort findest du Anleitungen dafür.

Nachdem du dich auf dem FTP Server eingeloggt hast, suche nach der WordPress Installation.

Im Ordner themes erstellst du einen neuen Ordner – hier im Beispiel: twentysixteen-child

2. Style Datei anlegen

Lege im Child-Ordner die Datei style.css an.

Inhalt:

/*
 Theme Name:   Twenty Sixteen Child
 Description:  Mein Child Theme
 Author:       domain.de
 Author URI:   https://domain.de
 Template:     twentysixteen
 Version:      1.0
 Text Domain:  twenty-sixteen-child
*/

3. functions.php erstellen

Erstelle nun die Datei functions.php.

Zuerst legen wir fest, dass erst das Stylesheet des Eltern-Theme geladen wird.
Anschließend wird das Stylesheet des Child-Theme geladen.


4. Screenshot erstellen (optional)

Erstelle einen Screenshot und kopiere die Bilddatei screenshot.png in den Child-Ordner.

Dadurch wird in der Verwaltung auch ein Bild für das Child-Theme angezeigt.

wordpress-themes

5. Child Theme aktivieren

Sind alle Dateien angelegt, kann das Child-Theme aktiviert werden unter:
> Design > Themes

Falls eine Fehlermeldung erscheint, prüfe die Angaben in der style.css.

WordPress Child Theme anpassen

Nun kannst du Änderungen am Design zur style.css hinzufügen.

Nach dem Reload der Seite siehst du sofort die Änderungen. Falls du ein Caching-Plugin verwendest lösche vorher den Cache oder deaktiviere bei umfangreichen Anpassungen das Caching komplett.

Kommt es dennoch zu keinen Änderungen prüfe den Code und lösche auch mal den Browser-Cache.

Ich empfehle die Nutzung eines “Inkognito Fenster” für den Aufruf der Seiten.

Template Files anpassen

In meinem WordPress PageSpeed Guide erkläre ich wichtige Einstellungen zur Geschwindigkeits-Optimierung von WordPress.

Dafür wird die functions.php genutzt, um Änderungen vorzunehmen.

Falls du Änderungen an Template Dateien wie z.B. single.php, footer.php oder anderen machen möchtest, dann kopiere die Originaldatei in den Child Ordner.

Anschließend kannst du deine Anpassungen vornehmen.

Schaue dir auch meine Anleitung an, wie du Share Buttons und Related Posts ohne Plugin unter Beiträgen hinzufügst.

Twenty Sixteen Child Theme downloaden

Das Beispiel Child Theme kannst du hier herunterladen >

Möchtest du nur geringe Änderungen machen, dann brauchst du nicht unbedingt ein Child Theme. Mit dem Plugin Simple Custom CSS geht das auch sehr einfach um das Design anzupassen.

Auch WordPress bietet über den Customizer die Möglichkeit CSS Code hinzuzufügen.

Gehe dazu unter > Design > Customizer auf den Eintrag „Zusätzliches CSS“.

wordpress-custom-css

Hier lassen sich eigene CSS Anweisungen einfügen und sieht sofort das Ergebnis.

Child Theme mittels Plugin erstellen

Für fast jeden Einsatzzweck gibt es auf WordPress mehr als nur ein Plugin.

Mit dem Child Theme Configurator von Lilaea kann der weniger erfahrene Nutzer ein Child Theme erstellen.

Wer Anpassungen am Theme vornehmen möchte, keine Angst hat und Grundkenntnisse in HTML/CSS besitzt, der wird kein Plugin dafür benötigen 🙂

Sicherheit von Child Themes

Hat das Eltern-Theme Sicherheitslücken, wird dies meist schnell vom Anbieter behoben.

Wenn du aber Dateien z.B. die header.php im Child Ordner angepasst hast, dann wird beim Theme Update keine Datei im Child Ordner upgedatet.

Du musst entsprechend die Originaldateien vom Eltern-Theme in das Child Theme kopieren und die Anpassungen erneut vornehmen.

Ich empfehle dir den Code auf deinem Rechner zu speichern, um diesen schnell zur Hand zu haben – am besten mit kurzen Vermerken, wo dieser eingefügt war.

Mit dem Plugin Child Theme Check kannst du dir Unterschiede anzeigen lassen.

Im Tab „Status“ findest du eine Auflistung der geänderten Dateien. Bei großen Anpassungen behältst du damit einen guten Überblick.

child-theme-check

Beim Tab „Unterschiede“ kannst du die Originaldatei mit der geänderten Datei vergleichen.

Du kannst festellen, welche Änderungen es gab und entsprechend dein Theme anpassen.

Fazit:

Die Verwendung eines Child Theme bietet viele Vorteile. Du kannst am Design und an Funktionen deines Themes herumbasteln.

Die Dateien des Eltern-Themes bleiben unberührt. Falls was daneben geht, kannst du zu jeder Zeit die Originaldateien vom Eltern Theme in den Child Ordner kopieren.

Theme Updates können bedenkenlos eingespielt werden, ohne das deine Änderungen überschrieben werden.

Weitere Infos findest du auf https://codex.wordpress.org/Child_Themes

2 Kommentare zu „WordPress Child Theme erstellen in nur 5 Minuten“

  1. Vielen Dank für den Tipp! Mir ist es erst neulich passiert, dass alle meine Änderungen weg waren. Informative Seite, auch für Anfänger sehr verständlich erklärt. Werde hier öfters rein schauen 🙂

    LG, Thomas

Kommentar verfassen

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

Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links. Wenn du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht.
Nach oben scrollen