Pixelwerker - Werbeagentur in Kassel

Wie Du in 4 Schritten Dein eigenes WordPress Child Theme erstellst

Du würdest gerne ein Wordpress Theme individualisieren, weißt aber nicht wo Du anfangen sollst? Ich werde Dir in diesem Artikel zeigen, warum es wichtig ist ein Child Theme zu erstellen und worauf es bei der Erstellung ankommt. In nur vier Schritten kannst Du mit Deinem eigenen Wordpress Child Theme starten.  Was ist der Unterschied zwischen einem Wordpress Child Theme und einem Wordp...

Autor Lukas Rotermund
von Lukas Rotermund
19. Oktober 2017

Du würdest gerne ein WordPress Theme individualisieren, weißt aber nicht wo Du anfangen sollst? Ich werde Dir in diesem Artikel zeigen, warum es wichtig ist ein Child Theme zu erstellen und worauf es bei der Erstellung ankommt. In nur vier Schritten kannst Du mit Deinem eigenen WordPress Child Theme starten.

 

Was ist der Unterschied zwischen einem WordPress Child Theme und einem WordPress Theme

Du fragst Dich bestimmt, wo der Unterschied zwischen einem Child Theme und einem Theme liegt. Ganz einfach! Ein Child Theme übernimmt, oder „erbt“ alle Dateien, Eigenschaften und Funktionen seines übergeordneten Themes, ohne das diese im Child Theme erstellt werden müssen. Ist eine Datei hingegen im Child Theme vorhanden, überschreibt diese Ihre Vorlage im übergeortneten Theme. Somit kannst Du ganz einfach einzelne Komponenten des übergeortneten Themes austauschen und an Deine Bedürfnisse anpassen.

 

4 Gründe, weshalb es besser ist ein WordPress Child Theme anzulegen

Warum nicht einfach die Dateien im Theme austauschen?

  1. Du hast Änderungen in dem aktuellen Theme vorgenommen und es erscheint nach einer Weile ein Sicherheitsupdate für das modifizierte Theme vom Hersteller.
    Bei einer Aktualliserung des Themes würden alle deine Änderungen verloren gehen.
  2. Du hast eine bessere Übersicht über Deine durchgeführten Anpassungen, da Du lediglich diese im Child Theme hinterlegen musst. Dadurch wird das Theme Verzeichnis gleichzeitig schlanker.
  3. Bei einem sauber entwickelten, übergeordneten Theme, kann auch der PHP-Code des Child Themes stark reduziert werden. Wenn das übergeordneten Theme genügend Actions (WordPress Actions) bereitstellt, reicht es sich auf diese zu registrieren und seinen eigenen Code einzufügen. Dies steigert gleichzeitig die Lesbarkeit und die Wartbarkeit des PHP-Code.
  4. Solltest Du mehrere WordPress-Seiten erstellen, die alle die selbe Grundlage haben, dann kannst Du Dein „Grund-Theme“ überall einbauen und dieses mit einem Child Theme anpassen. Solltest Du dein „Grund-Theme“ zu einem späteren Zeitpunkt um Funktionen erweitern, oder Fehler darin beheben, so kannst Du es einfach überall austauschen. Du musst deine Änderungen also nicht an allen Projekten durchführen, sondern nur ein einem.

 

In 4 Schritten zum WordPress Child Theme

Du legst nun in wenigen Schritten Dein eigenes Child Theme an und ich gebe Dir noch einige Tipps mit auf den Weg, damit Dein Child Theme hinterher sauber gestaltet und gut strukturiert ist.

 

Schritt 1 – Die Grundkomponenten

Das Child Theme besteht im Grunde aus drei simplen Komponenten:

  • Der Theme Ordner
  • Die Datei „style.css“
  • Die Datei „functions.php“

Zunächst erstellst Du einen Ordner mit dem Name des übergeordneten Themes und dem Anhang „-child“ → „example-theme-child“. Dieser Anhang ist nicht notwendig für die Funktionsfähigkeit des Child Themes, er dient lediglich dazu, dass Du die Ordner besser auseinander halten kannst. Dieser Ordner muss nachher in dem Theme Verzeichnis deiner WordPress installation abgelegt werden (wp-content/themes).
Danach legst Du eine CSS-Datei mit dem Namen „style.css“ im Child Theme Basisverzeichnis an und fügst den folgenden Inhalt ein:

Die „style.css“ definiert den Ordner als Theme. Einige Theme Konfigurationen sind in der „style.css“ Datei enthalten, die meisten davon sind selbsterklärend. Am wichtigsten ist, dass beim „Template:“ der Verzeichnisname des übergeordneten Themes hinterlegt ist. Selbst wenn das übergeordnete Theme den Name „Example Theme 3000“ haben sollte, wichtig ist, dass der Verzeichnisname „example-theme“ eingetragen wird.

Zu guter Letzt sollte noch die Datei „functions.php“ erstellt werden. Diese bekommt zunächst den folgenden Inhalt:

Die „functions.php“ ist eine besondere Datei. Sie überschreibt die „functions.php“ Datei des übergeordneten Themes nicht, sondern sie erweitert diese. Dadurch wird es sehr einfach, eigene PHP Funktionen zu ergänzen. Weiterhin ist es gut zu wissen, dass die „function.php“ des Child Themes vor der „function.php“ des übergeordneten Themes geladen wird.

Schritt 2 – Anpassung des WordPress Child Themes

Nun kannst Du das erstellte Child Theme noch anpassen. Ein erster Schritt wäre es, wenn Du einen eigenen Screenshot hinterlegst. Dazu legst Du einfach ein Bild mit dem Namen „screenshot.png“ im Basisverzeichnis Deines Child Themes ab. Dieses Bild wird nun auf der Theme Übersichtsseite von WordPress zu deinem Child Theme angezeigt.

Weiterhin lohnt es sich, die „functions.php“ Datei weiter zu untergliedern. Dies tust Du, in dem Du im Child Theme Basisverzeichnis den Ordner „libraries“ anlegst. In diesem kannst Du nun einzelne Funktionsblöcke Deines Child Themes sauber anlegen und verwalten. Hier hast Du auch die Möglichkeit Deine eigenen Post Types zu integrieren. Wenn Du Dich für die Erstellung von Custom Post Types interessierst, dann kann ich Dir unseren Artikel zum Thema empfehlen: Einen eigenen Post Type in WordPress anlegen

Lege nun folgende Beispiel-Dateien im Ordner „libraries“ an:

  • enqueue-scripts.php“

  • image-sizes.php“

  • actions.php“

Diese müssen nun in der „functions.php“ integriert werden. Das tust Du mit der PHP Funktion „require_once()“:

enqueue-scripts.php
In der Datei „enqueue-scripts.php“ kannst Du nun Javascript und CSS Dateien für dein Child Theme einhängen und auch aushängen, im Falle, dass Du sie nicht benötigst, oder dass Du sie ersetzen willst. Dazu nutzt Du die WordPress Action „wp_enqueue_scripts“:

Dieses PHP-Script ermittelt mit Hilfe der WordPress Funktion „get_template_directory_uri()“ die Theme Verzeichnis Uri. Danach registriert es im zweiten Schritt die im „assets/css/“ enthaltene „main.css“ Datei. Im dritten Schritt wird die veraltete jQuery Bibliothek (Version 1.12.4), die WordPress mitliefert, ausgehangen und eine aktuellere Version per CDN eingehangen. Im letzten Schritt registriert es die im „assets/js/ enthaltene „example-library.min.js“ Javascript Bibliothek mit der Abhängigkeit zu jQuery.

image-sizes.php
Unterschiedliche Bildgrößen für die Mediathek lassen sich in der Datei „image-sizes.php“ hinterlegen:

actions.php
Actions von WordPress oder vom übergeordneten Theme registrierst Du in der „actions.php“:

In dem hier dargestellten PHP-Script wird die Icon-Sammlung Font Awesome für das WordPress Backend registriert und eingehangen.

Schritt 3 – Dateien überschreiben

Sollte es nicht möglich sein, Anpassungen am übergeordneten Theme über eine Action durchzuführen, so können die gewünschten Dateien auch überschrieben werden. Es ist aber am sinnvollsten, sich zuvor beim Theme Hersteller zu erkundigen, ob dieser nicht Actions bereitstellt, die man sich registrieren kann um eigene Inhalte gezielt zu positionieren:

Willst Du bspw. die Blog Archivseite anpassen, so kannst Du im Basisverzeichnis Deines Child Themes die Datei „archive.php“ anlegen und somit die „archive.php“ des übergeordneten Themes vollkommen überschreiben:

Glückwunsch! Nun wird beim Aufruf der Archivseite Deine eigene Seitenvorlage geladen. Was noch fehlt ist die Ausgabe des Inhaltes durch die WordPress Funktion „get_template_part()“. Dazu kommst Du im nächsten Schritt.

Schritt 4 – Eigene „Template Parts“ bereitstellen

Im letzten Schritt integrierst Du noch eigene „Template Parts“, die Du in Deinem Child Theme an mehreren Stellen wiederverwenden kannst. Erstelle zunächst das Verzeichnis „template-parts“ im Basisverzeichnis Deines Child Themes. Darin kannst Du nun das vorhin integrierte PHP-Script „content.php“ erstellen:

Typische Fehler beim Erstellen von WordPress Child Themes

Fehler passieren schnell, auch wenn man ein simples Child Theme anlegt. In der folgenden Liste findest Du einige Fehler, die häufiger Vorkommen (und auch mir bereits unterlaufen sind):

Fehler 1)

Dein Child Theme wird auf der Theme Übersichtsseite nicht dargestellt und unter „Beschädigte Themes“ findet sich zu deinem Child Theme die Notiz „Das übergeordnete Theme fehlt. Bitte installiere das übergeordnete Theme „Muster-Theme“, da Du Child-Themes sonst nicht nutzen kannst.“.
Dieser Fehler kann auf zwei Wegen entstehen, entweder das übergeordnete Theme ist tatsächlich nicht im WordPress Theme-Verzeichnis (wp-content/themes) vorhanden, oder Du hast das Verzeichnis des übergeordneten Themes in der „style.css“ falsch geschrieben. Es ist wichtig, dass in der Konfiguration „Template:“ in der Datei „style.css“ das Verzeichnis des übergeorneten Themes angegeben wird und nicht der Name des Themes.

„Template: Example Theme 3000“ → „Template: example-theme“

Fehler 2)

Dein Child Theme wird auf der Theme Übersichtsseite nicht dargestellt und unter „Beschädigte Themes“ findet sich zu deinem Child Theme die Notiz „Es fehlt ein Stylesheet“.
Dieser Fehler kann ebenfalls auf mehreren Wegen entstehen:

  • Es fehlt tatsächlich die notwendige Datei „style.css“
  • Der Dateiname ist falsch geschrieben, bspw.: „styles.css“
  • Die Dateiendung ist nicht „.css“, bspw.: „style.cs“

 

Fehler 3)

Falls nach der Aktivierung des Child Theme ein „Internal Server Error“ / „HTTP ERROR 500“ auftritt, sind vermutlich Fehler im PHP Code vorhanden. Prüfe also zuerst, ob Du einfache Syntax Fehler begangen hast und schau gegebenenfalls in den Fehler-Log Deines Web-Servers. Es ist immer empfehlenswert, eine IDE (Integrierte Entwicklungsumgebung) wie z.B. Eclipse, PHP Storm, oder Visual Studio, oder einen guten Text-Editor wie z.B. Atom, Sublime, oder Visual Studio Code zu verwenden, da Dich diese auf einfache Syntax Fehler hinweisen.

Davon ausgehend, dass sich keine Programmfehler im PHP Code eingeschlichen, kann es sein, dass Du unbewusst eine Funktion mit dem selben Namen wie im übergeordneten Theme integriert hast. Das kann schnell passieren, wenn es sich um einfache Funktionsnamen handelt:

  • „bootstrap“
  • „clean_up“ / „cleanup“
  • „construct“
  • „on_load“
  • etc.

Sollte das übergeordnete Theme nicht mit der PHP Funktion „function_exists()“ prüfen, ob es die Funktion bereits gibt, kann es schnell zu Fehlern kommen. Dann hilft es nur, wenn Du die Funktionen in deinem Child Theme testweise umbenennst.

 

Solltest Du weitere, häufig vorkommende Fehler kennen, oder Fragen und Anregungen zum Artikel hast, zögere nicht uns von diesen in den Kommentaren zu berichten, damit wir unsere Liste erweitern können.

Bewertung:
Bewertungen: 249 Ihre Bewertung: {{rating}}

Weitere interessante Artikel

Schreibe einen Kommentar:

Vereinbaren Sie jetzt Ihre
unverbindliche Erstberatung

Rufen Sie jetzt an & vereinbaren
Sie Ihren persönlichen Termin!

0561 - 850 194 76
Jetzt Kontakt aufnehmen!
Britta Schwab
Britta Schwab

Agenturleitung & Marketing-Rockstar

"Ich freue mich darauf Sie und Ihr Projekt bei einer Tasse Kaffee kennenzulernen".

Oder schreiben Sie uns jetzt eine Nachricht:

Geben Sie Ihre E-Mail-Adresse an, unter der wir Sie kontaktieren können.

Sagen Sie uns worum es geht und für welche Themen Sie sich interessieren.

Wir benutzen Cookies um die Nutzerfreundlichkeit der Webseite zu verbessen. Durch Deinen Besuch stimmst Du dem zu.