WordPress Child Theme erstellen
  • Zuletzt aktualisiert am
  • Webtimiser
  • Wordpress
  • 31

Kleinere Desgin-Anpassungen an WordPress Themes sind schnell und einfach erledigt. In der Regel genügt es, die betreffende Stelle im Stylesheet zu ändern und schon ist das Design angepasst. Allerdings werden sämtliche Änderungen beim nächsten Update des Themes überschrieben. Um das zu vermeiden, solltest du ein WordPress Child Theme nutzen. Wie man dieses erstellt, erfährst Du im folgenden Tutorial.

Was ist ein Child Theme?

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.
WordPress Codex

Ein Child Theme erbt alle Style-Eigenschaften und Funktionen des übergeordneten Parent-Themes. Individuelle Anpassungen im Child-Theme überschreiben jedoch die Einstellungen des Original Themes. So kannst Du nicht nur kleine Design-Änderungen vornehmen, sondern auch ganze Templates abändern.

Vorteile:

  • Bei einem Update des Haupt-Themes gehen die individuellen Änderungen nicht verloren, sondern bleiben im Child Theme bestehen.
  • Child-Themes können die Entwicklungszeit der Webseite beschleunigen.
  • Insbesondere Anfänger können sich im Child-Theme austoben; geht mal was schief, kann man auf das Parent-Theme zurückgreifen.

Nachteile:

  • Ein kleiner Nachteil von Child-Themes könnte in der Website-Performance liegen. Da zwei Stylesheets geladen werden müssen, erhöht sich die Anzahl der Requests und natürlich auch die Größe der Webseite. In meinem Test konnte ich jedoch keine wirklichen Performance-Einbußen feststellen:
Speed-Vergleich: Mit und ohne Child Theme
Speed-Vergleich: Mit und ohne Child Theme

WordPress Child Theme anlegen:

In diesem Beispiel erstelle ich ein Child-Theme für das WordPress Theme Twenty Fifteen.

1. Ordner für Child-Theme anlegen

Zuerst musst Du Dich per FTP mit deinem Server verbinden.
Dazu benötigst Du ein Programm wie beispielsweise FileZilla. Alternativ kannst Du auch das Browser AddOn FireFTP für Firefox nutzen.
Zum Verbinden mit dem Server benötigst Du folgende Informationen von deinem Provider:

  • Server-Name
  • FTP-User
  • FTP-Passwort

Sobald Du Dich mit dem Server verbunden hast, suchst Du den Ordner Deiner WordPress-Installation. Dort legst Du dann im Ordner Themes einen neuen Ordner für das Child-Theme (twentyfifteen-child) an.

child-theme ftp
Screenshot FTP-Server

2. Style Datei anlegen

Zuerst legst Du im Child-Theme Ordner eine Datei style.css an. Hier der Inhalt:

/*
 Theme Name:   Twenty Fifteen Child
 Description:  Mein Child Theme
 Author:       Webtimiser
 Author URI:   http://new2.webtimiser.de
 Template:     twentyfifteen
 Version:      1.0
 Text Domain:  twenty-fifteen-child
*/
Wichtig: Bei Template muss der Name des Parent-Themes eingetragen werden. Sonst wird das zugehörige Theme nicht gefunden.

3. functions.php erstellen

Erstelle anschließend im Child-Theme Ordner die Datei functions.php.
Hier wird nun festgelegt, dass zunächst das Stylesheet des Original-Themes (parent-style) geladen wird. Erst danach wird das Stylesheet des Child-Themes (child-theme-css) geladen.

 

<?php
/**
* Child theme stylesheet einbinden in Abhängigkeit vom Original-Stylesheet
*/

function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style'));

}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );?>

4. Screenshot erstellen (optional)

Wer möchte, kann noch eine Screenshot-Datei (screenshot.png) im Ordner ablegen. Dadurch ist das Child Theme in der Theme-Verwaltung eindeutig zu erkennen.

theme-verwaltung
Theme Preview

5. WordPress Child theme aktivieren

Nachdem der Ordern für das Child Theme angelegt ist und sich alle benötigten Dateien darin befinden, kann das Theme aktiviert werden.
Dies funktioniert wie bei allen anderen WordPress Themes.

Unter Design > Themes kannst Du nun Dein neues Child Theme aktivieren.

Falls es beim Aktivieren zu einer Fehlermeldung kommt, überprüfe am besten die Angaben in der style.css.

6. Anpassungen aus dem Parent Theme übernehmen

Falls Du das Grundtheme schon über den WordPress Customizer eingerichtet hast, gehen beim Wechsel auf das Child Theme leider alle Anpassungen verloren. Wenn Du die Einstellungen nicht manuell übertragen möchtest, empfehle ich hierfür das Plugin Customizer Export/Import.

Sobald Du das Plugin installiert hast, findest Du ganz unten im Customizer einen Button Export/Import. Im ersten Schritt exportierst Du die Einstellungen des Parent Theme. Anschließend wechselst Du wieder in das Child Theme und importierst die Daten.

Customizer Einstellungen exportieren
Export der Customizer Einstellungen im Parent Theme

WordPress Child Theme anpassen

Design-Anpassungen kannst Du nun direkt in die Datei style.css des Child-Themes einfügen. Sobald Du die Seite neu lädtst, siehst Du gleich das Ergebnis. In diesem Beispiel habe ich lediglich kleinere Anpassungen an der Optik vorgenommen und eine andere Schriftart gewählt.
Post-Title ändern

h2 {
font-family: 'Roboto Slab', sans-serif;
font-weight:700;
}
h2.entry-title {
text-align:center;
}
h2.entry-title:after {

    background-color: #D24F21;
    width: 100px;
    height: 2px;
    margin: 15px auto 0px;
    content: "";
    display: block;

}

 

Font ersetzen

Die Standardschrift von Twent Fifteen ist Noto. Für die Artikel-Headline des Child-Themes möchte ich aber Roboto Slab einsetzen. Daher binde ich die Schrift einfach über die functions.php ein:

function load_google_fonts() {
wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Roboto+Slab:700');
wp_enqueue_style( 'googleFonts');
}
add_action('wp_print_styles', 'load_google_fonts');
angepasstes wordpress child theme
Vorschau der Änderung
Falls Du die Schriften lieber lokal hosten möchtest, findest Du in diesem Artikel eine Anleitung inklusive Beispieldatei.

Artikel-Background einfärben

Die Hintergrund ändere ich über folgende Styles:

.hentry {
background: #e1f5fe;
} 
.entry-footer {
background: #01579b;
color: #fff;
} 
.entry-footer a {
color: #fff;
} 
.entry-footer a:hover {
color: #ff9800;
}

 

Twenty Fifteen Sidebar anpassen

Die linke Sidebar ist sehr breit und kann durch folgende CSS-Anweisungen an die gewünschte Breite angepasst werden.

@media screen and (min-width: 59.6875em) {

body:before {    
max-width: 380px;
}
#sidebar { 
left: 0;
max-width: 380px;
}
#page {
margin-left: 0px;
}
  }

Twenty Fifteen Child Theme

Template Files anpassen

Wenn Du Anpassungen an einzelnen Template-Dateien (Footer.php, Page.php,…) machen möchtest, ist das kein Problem! Kopiere dazu einfach die entsprechende Datei aus dem original Theme. Anschließend kopierst Du sie in den WordPress Child Theme Ordner. Danach kannst Du das Template anpassen.
Sämtliche Änderungen überschreiben dann die Template-Files des Parent-Themes.

Twenty Fifteen Child Theme downloaden

Die Beispiel-Datei zu diesem Tutorial kannst Du hier downloaden:

Download Beispiel-Datei

Tipp:

Wer wirklich nur geringfügige Änderungen am Design machen möchte, muss nicht unbedingt ein WordPress Child Theme erstellen. Man kann auch auf Plugins wie z.B. Simple Custom CSS zurückgreifen. Dieses Plugin ermöglicht das einfache Überschreiben der Theme-Styles.

Noch einfacher kannst Du Anpassungen über den Customizer einfügen. Seit WordPress 4.7 gibt es unter > Design > Customizer einen Eintrag “Zusätzliches CSS”. Hier kann man seine eigenen CSS Anweisungen einfügen und sieht direkt die Änderung.

Und falls du nur ein paar Code-Schnipsel einbauen möchtest, kannst du auch einfach ein Custom Functions Plugin erstellen.

Child Theme mittels Plugin erstellen

Natürlich kann man ein WordPress Child Theme auch mit Hilfe eines Plugins anlegen.

wordpress child theme konfigurator

Kurz getestet habe ich den Child Theme Configurator von Lilaea. Nach der Installation findet man das Plugin unter > Werkzeuge > Kindthemen.
Auch unerfahrene Benutzer können mit dem Konfigurator schnell und einfach ein Child Theme erstellen. Wer sich etwas besser mit WordPress auskennt, wird mit der manuellen Variante vermutlich schneller ans Ziel kommen.

Sicherheit von Child Themes

Falls das Eltern-Theme eine Sicherheitslücke beeinhlaten sollte, wird diese (hoffentlich) vom Theme-Entwickler behoben. Doch wie wirkt sich das auf Dein Child-Theme aus?

Nehmen wir an, der Code in der Datei header.php wird aus Sicherheitsgründen angepasst. Wenn Du diese Datei geändert hast und sie in Deinem Child-Theme gespeichert ist, wirst Du nicht vom Sicherheitsupdate profitieren. Denn die Datei des Child Themes überschreibt die Datei des Hauptthemes.
Eine gute Möglichkeit diese Unterschiede aufzuspüren bietet das Plugin Child Theme Check.

Sobald es installiert ist, findest Du im Tab Status eine Auflistung der geänderten Dateien. Finde ich sehr gut, denn so behält man bei umfangreichen Anpassungen den Überblick.

child theme check status
Status: alle geänderten Templates im Child Theme

Im Tab Unterschiede kannst Du dir jede Datei genauer ansehen. D.h. Du kannst direkt den Code der original Datei mit dem der geänderten Datei vergleichen.

Child Theme vergleich
Unterschiede Parent Theme – Child Theme

 

So kannst Du überprüfen, ob wichtige Code-Änderungen vorliegen und ggf. Dein Template anpassen.

 

Fazit:

Die Nutzung eines WordPress Child Theme bietet viele Vorteile. So kann man ungestört und gefahrlos am Design und der Funktionalität des Themes basteln. Denn das ursprüngliche Theme bleibt davon unberührt. Geht mal was schief, kann man jederzeit wieder auf das Parent-Theme zurückgreifen. Und alle Änderungen bleiben bestehen, auch wenn das Haupt-Theme aktualisiert wird. So profitiert man von Theme-Updates und deren Verbesserungen und kann seine individuellen Anpassungen beibehalten.

Weitere Informationen zu WordPress Child Themes:

http://codex.wordpress.org/Child_Themes

Wie hat Dir dieser Beitrag gefallen? 1 Star2 Stars3 Stars4 Stars5 Stars (45 Bewertungen, Ø: 4,89 von 5)
Loading...

 

Dieser Beitrag hat 31 Kommentare

  1. User Avatar

    Vielen Dank! 5 Sterne ✔ 1A beschrieben. Ich suche das jedes Mal aufs Neue.

  2. User Avatar

    Ich habe nach deiner Anleitung ein Child Theme erstellt, allerdings wird in der Theme-Übersicht jetzt eine Fehlermeldung angezeigt: “Fehlendes Template. Eigenständige Themes müssen über eine index.php Datei verfügen. Für Child-Themes muss ein Template-Header in der style.css angelegt werden.”
    Weißt du, was darunter zu verstehen ist?

    1. Webtimiser

      Hallo Ron,
      könnte mir vorstellen, dass der Verweis zum Parent-Theme nicht ganz stimmt. Welches Haupt-Theme nutzt Du denn?
      VG Sonia

  3. User Avatar

    Hallo, ich bin immer noch im Localhost und habe kein Onlinespeicher. Auf dem Computer habe ich die Zips. Wo kann ich den Ordner für Child anlegen? Bitte bin ein Dummie (Jahrgang 1940)

    1. Webtimiser

      Hallo George,
      den Ordner für das Child Theme musst Du im Ordner wp-content/themes/ anlegen.
      Viele Grüße
      Sonia

  4. User Avatar

    Hey,
    diese Beschreibung ist sehr gut. Mein Theme arbeitet.

    Leider wenn ich versuche andere functionen oder Filter versuche zu zufügen geht es schief.

    Wo und wie muss ich ich im functions.php weitere Snippetes zu fügen

    1. Webtimiser

      Hallo,
      weitere Funktionen und Filter kannst Du einfach wie unter Punkt 3 beschrieben einfügen. Wenn etwas schief läuft, liegt es vielleicht an dem entsprechenden Snippet.
      VG Sonia

      1. User Avatar

        Auch von mir vielen Dank für die gute Anleitung!

        Meine Frage zur functions.php:
        Ich habe die funkctons.php des Parent-Themes bereits ergänzt und stellenweise geändert.
        1. Deine Antwort an M. Gaida sagt mir, dass ich die Ergänzungen in die functions.php des Child-Themes schreiben muss. Richtig?
        2. Wenn ich aber Teile der Original functions.php geändert habe: Reicht es dann, den betreffenden Code-Abschnitt in der functions.php des Child-Themes zu wiederholen? Z. B. habe ich den Bereich “function bizgrowth_widgets_init()” ergänzt. Hier würde ich den gesamten Code inklusive meiner Ergänzungen in die functions.php des Child-Themes übernehmen. WordPress wird also “function bizgrowth_widgets_init()” sowohl im Parent-Theme als auch in meinem Child-Theme finden. Welche Version nimmt WordPress am Ende?
        3. Und wie kann ich Zeilen oder ganze Code-Bereiche löschen bzw. unterdrücken, die in der functions.php des Parent-Themes stehen? Z. B. möchte ich diese Zeile “wp_enqueue_style( ‘font-awesome-style’, get_template_directory_uri().”/css/font-awesome.css” );” löschen bzw. auskommentieren.

        Grüße
        Sabine

        1. Webtimiser

          Hallo Sabine,
          deine Anpassungen musst du in die functions.php des Child-Themes schreiben. Wenn du eine bestehende Funktion des Parent-Themes ändern oder überschreiben willst, musst diese eventuell erst deaktivieren und dann eine neue Funktion schreiben. Wenn du eine Funktion doppelt einfügst, kommt es sonst zu Fehlern.
          Zu Punkt 3: hier kannst du im Child-Theme die Funktion mit wp_dequeue_style deaktivieren.

          Viele Grüße
          Sonia

  5. User Avatar

    Tolle Anleitung, ich werde es mal testen. Ich bin noch ziemlich neu in der Website-Welt und mir war das mit dem Child Theme gar nicht so bewusst, dass man dort alle möglichen Änderungen für das Aussehen einer Seite macht. Daher hab ich noch 1-2 Fragen, wenn das ok ist.

    1. Ich habe die Website komplett im Parent Theme via Drag & Drop (also ohne Codierung) zusammengestellt (Theme: Massive Dynamic). Ich habe nur 1x ein Child Theme erstellt, um dort die Google Fonts Einstellungen einzurichten. Danach hab ich wieder im Parent Theme gearbeitet, dies ist auch aktiv. Die Frage ist nun, wie kann ich die Änderungen, die ich seitdem im Parten Theme gemacht habe, ins Child Theme übertragen? Geht das mit dem Import & Export über das oben genannte Plugin?

    2. Wenn ich nun eine neue Webseite kreiere (für einen anderen Kunden), und von Beginn an Parent & Child Theme erstellt hab. Muss ich dann durchgehen im Child Theme arbeiten und dies auch immer aktiv haben? Das ist mir noch nicht so ganz klar. Sorry, blutiger Anfänger 🙁

    1. Webtimiser

      Hallo Dayana,
      vielen Dank!
      Anpassungen solltest du immer nur im Child-Theme machen, denn dazu ist es ja da. Und natürlich muss es immer aktiv sein, sonst wird das Parent-Theme angezeigt.
      Wenn du die Anpassungen aus dem Customizer vom Parent- zum Child-Theme übertragen willst, kannst du das Plugin dazu nutzen.
      Viele Grüße
      Sonia

  6. User Avatar

    Danke für die Anleitung!
    Kann ich auch die CSS-Anweisungen bpsw. eines Plugins mit einem Child CSS überschreiben? Wie muss ich in diesem Fall vorgehen?

    1. Webtimiser

      Gerne!
      Wenn Du nur ein paar Styles eines Plugins überschreiben willst, musst Du nicht unbedingt extra ein Child-Theme anlegen. Du könntest das CSS einfach im Customizer platzieren.
      VG Sonia

  7. User Avatar

    Hallo Webtimiser, schöner Artikel!
    Nun hat es auch bei mir mit der Child Theme geklappt :).

    Weißt du denn wie ich die Header Höhe vom Theme “hemingway” ändern kann?

    In functions.php habe ich folgende Werte geändert, jedoch ohne Erfolg:
    // Custom header
    $args = array(
    ‘width’ => 1280,
    ‘height’ => 416

    Vielen Dank

    Gruß Tina

    1. Webtimiser

      Hallo Tina,
      ich würde es über eine CSS-Anpassung versuchen:

      .header-cover {height:200px;}

      Viele Grüße
      Sonia

  8. User Avatar

    Hey! Hab ebenfalls ein Child Theme erstellt, funktioniert auch sehr gut. Vielen Dank!

    Warum muss hier in der functions das PHP Tag eigentlich nicht geschlossen werde, bzw. führt das bei mir zu einer Fehlermeldung …

    1. Webtimiser

      Hallo Lena,
      sorry, mein Fehler! Habe das fehlende End-Tag ergänzt. Vielen Dank!
      VG Sonia

  9. User Avatar

    Vielen Dank für die ausführliche Erläuterung, damit konnte ich endlich ein Child-Theme erfolgreich anlegen. Nur wegen CSS-Anpassungen wäre es nicht erforderlich gewesen, da ist der “Customizer” sehr viel einfacher zu bedienen, zumal man die Ergebnisse sofort sieht – diese Vorteil geht mit Child-Theme leider verloren. Aber ich musste eine loop.php anpassen, da ich nur die Titelzeile angezeigt haben wollte. Leider funktioniert das Child-Theme mit php nur dann, wenn auch die CSS-Datei eingerichtet ist.
    Oder kennt jemand einen Trick neben dem Child-Theme auch noch den Customizer zu nutzen?

    Vielen Dank,
    Werner

  10. User Avatar

    Liebes Webtimiser-Team,

    vielen Dank für euren hilfreichen Artikel, jetzt sind wir schon einmal um einiges schlauer. Ich habe jedoch ein Anliegen:
    Wir haben unsere Firmenwebseite neu erstellen lassen, jedoch keine ausführliche Erklärung hierzu erhalten (leider!). Wir können nur annehmen, dass das Theme individuell für uns angepasst wurde. Frage: Kann ich das irgendwo einsehen? Wir möchten nämlich das Design noch ein wenig weiter anpassen und dafür würde ich gerne ein Child-Theme nach dieser Anleitung verwenden.
    Und noch eine Frage: Wenn ich das Design im WordPress-Customizer anpasse, bleiben diese Änderungen dann beim nächsten Theme-Update erhalten? (Bei bisherigen Updates blieb das Design unverändert, so wie gewünscht.)
    Ich bin noch Anfänger auf diesem Gebiet und freue mich über eure Hilfe. Vielen Dank.

    Schöne Grüße
    Heike

    1. Webtimiser

      Hallo Heike,
      Eure Seite nutzt das Theme Enfold ohne Child Theme. Genauere Infos findest du unter Design > Themes. Vermutlich sind die individuellen Anpassungen in den Theme-Einstellungen oder im Customizer zu finden. Ob noch mehr und was genau geändert wurde, müsste die Web-Agentur sagen können.
      Anpassungen im Customizer bleiben bei Updates bestehen.
      LG Sonia

      1. User Avatar

        Hallo Sonia,

        schönen Dank für die schnelle Antwort, damit ist uns bereits geholfen!

        LG Heike

  11. User Avatar

    Hallo Webtimiser-Team,
    eine sehr gute Anleitung, habe sie lange nicht so detailliert und anschaulich gefunden. Vielen Dank, Sie ist eine umfassende Hilfe.
    Aber! Ich wollte voller Hoffnung das Plugin “Child Theme Check” herunterladen. Es wird jedoch seit 1 jahr nicht mehr gepflegt und ist somit in veraltetem Zustand, also ak t u e l l m. E. keine Empfehlung wert! . Sehr schade! Es könnte eine große Entwickler-Hilfe werden.
    Dankbare Grüße
    christa

    1. User Avatar

      Hi Christa,
      schau dir mal das “Child Theme Configurator” Plugin an. Funktioniert super
      und wurde auch erst letzten Monat aktualisiert.

      Gruß Tobi

      1. Webtimiser

        Hallo Tobi,
        vielen Dank für den Tipps, werde den Beitrag um ihn ergänzen!
        LG Sonia

  12. User Avatar

    Hallo Webtimiser-Team,
    es ist wahrscheinlich ein Anfängerfehler … kann aber leider keine Dokus im Netz finden … und hoffe, Du kannst mir weiterhelfen:
    Ich habe in einem Theme einige Einstellungen über den “internen” Customizer angepasst, alles prima. Nun komme ich in die Phase, in der ich ein Child-Theme anlegen möchte. Auch dies hat alles geklappt. Außer:
    Viele Einstellungen sind weg (Logo, Menüanpassungen, Footer-Anpassungen, …).
    Kann ich diese irgendwie aus dem Backup importieren/wiederherstellen?
    Heißt das für zukünftig: Immer zuerst ein Child-Theme anlegen und dann das Theme mit seinen Einstellungen testen?
    Danke Dir/Euch sehr für Eure Hilfe!
    LG Su

    1. Webtimiser

      Hallo Su,
      leider gehen die Einstellungen beim Wechsel auf das Child Theme verloren. Aber mit einem Plugin kannst Du die Änderungen exportieren und dann ins Child Theme importieren. Habe gerade die Anleitung um Punkt 6. Anpassungen aus dem Parent Theme übernehmen ergänzt.
      LG Sonia

      1. User Avatar

        Liebe Sonia,
        Danke, Danke, Danke: Hat perfekt geklappt!
        Alles Gute für 2017,
        LG Su

        1. Webtimiser

          Freut mich! Dir auch alles Gute!
          LG Sonia

  13. User Avatar

    Hallo!
    Ist es auch möglich ein Child Theme im Nachhinein anzulegen? Habe die css Datei und etliche php Dateien schon angepasst.
    Geht es, wenn ich die ganzen Dateien in einen neuen Ordner lege und das ursprüngliche Theme einfach nochmal hochlade, so wie es ursprünglich war?

    1. Webtimiser

      Würde zur Sicherheit vorher ein Backup des Themes erstellen oder es einfach umbenennen (Theme_alt). Dann die angepassten Template-Dateien und die Style-Datei in einen neuen Ordner (Child-Theme) verschieben und natürlich noch die aktuelle Version des Original-Themes hochladen.

Schreibe einen Kommentar

Menü schließen