WordPress – Child Theme erstellen

Aufgrund der offenen und gut dokumentierten Architektur von WordPress sind die Designvorlagen („Themes“) weitestgehend an die eigenen Vorstellungen anpassbar. Um das Layout eines Blogs zu ändern oder neue Funktionen hinzuzufügen, kann man z. B. ein Theme direkt modifizieren oder geeignete Plugins installieren. In vielen Fällen ist jedoch die Nutzung eines sogenannten „Child Themes“ sinnvoller, die auch von den WordPress-Entwicklern im WordPress Codex über Child Themes empfohlen wird.
Ein Child Theme „erbt“ die Funktionen und Eigenschaften eines sogenannten „Parent Themes“, so dass wir keine komplett neue Designvorlage erstellen müssen. Darüber hinaus bleiben unsere Modifikationen und Erweiterungen auch bei einem Update des Parent Themes erhalten. Diesen Vorteilen steht ein im Vergleich zur direkten Änderung eines Themes höherer Aufwand gegenüber.
Wir werden im Folgenden exemplarisch ein Child Theme für das Theme Twenty Fourteen in WordPress 4.2.4 erstellen.

Verzeichnis und Dateien anlegen

Die einfachste Child Theme-Struktur besteht aus einem Child Theme-Verzeichnis mit den beiden Dateien style.css und functions.php. In der Stylesheet-Datei style.css werden die (CSS)-Layout-Vorgaben hinterlegt. Die Datei functions.php beinhaltet die (PHP)-Funktionen. Entsprechende Dateien existieren – neben weiteren – auch in den (Parent) Theme-Verzeichnissen, die bei der WordPress-Installation angelegt werden.
Das Child Theme-Verzeichnis wird wie die anderen Theme-Verzeichnisse in einem Unterordner des WordPress-Themes-Verzeichnisses /wp-content/themes gespeichert. In unserem Fall werden wir mit dem Theme Twenty Fourteen als Ausgangsbasis schließlich folgende Verzeichnisstruktur erhalten:

/wp-content
  ...
  /themes
    ...
    /twentyfourteen
    /twentyfourteen-child
      functions.php
      style.css
    ...
  ...

Direkter Serverzugang / Fernzugriff

Haben wir direkten Zugriff auf den WordPress-Server oder die Möglichkeit, uns per Telnet bzw. SSH einzuwählen, können wir die Child Theme-Installation mit Root-Rechten in einem Terminal-Fenster durchführen. Hierzu legen wir zuerst im WordPress-Themes-Verzeichnis einen neuen Ordner twentyfourteen-child mit den beiden leeren Dateien style.css und functions.php an. Bei einer typischen WordPress-Installation unter Ubuntu mit dem Themes-Verzeichnis /usr/share/wordpress/wp-content/themes verwenden wir die Anweisungen:

root@server:~# mkdir /usr/share/wordpress/wp-content/themes/twentyfourteen-child
root@server:~# touch /usr/share/wordpress/wp-content/themes/twentyfourteen-child/style.css
root@server:~# touch /usr/share/wordpress/wp-content/themes/twentyfourteen-child/functions.php

In die Datei style.css fügen wir folgende Zeilen ein, wobei die Einträge durch eigene Angaben zu ersetzen sind:

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    ...
 Description:  ...
 Author:       ...
 Author URI:   ...
 Template:     twentyfourteen
 Version:      ...
 License:      ...
 License URI:  ...
 Tags:         ...
 Text Domain:  ...
*/

Am wichtigsten ist hierbei der Eintrag hinter Template:, der den Verzeichnisnamen des Parent Themes, in unserem Fall twentyfourteen, enthalten muss.
In die Datei functions.php schreiben wir folgenden PHP-Code:

<?php
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles()
{
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css' );
}
?>

Hiermit wird die Stylesheet-Datei style.css des Parent Themes geladen. Das Laden der Stylesheet-Datei des Child Themes geschieht normalerweise automatisch. Ein zusätzlicher Aufruf von wp_enqueue_style ist daher in der Regel nicht erforderlich.

FTP-Zugang

Ist nur ein eingeschränkter Server-Zugang per FTP möglich, legen wir zunächst lokal auf unserem Rechner mit einem (Text-)Editor die Dateien style.css und functions.php mit den oben beschriebenen Inhalten an. Danach verbinden wir uns mit einem FTP-Client wie FileZilla mit dem Server, erzeugen dort das Verzeichnis twentyfourteen-child und laden die beiden Dateien hoch.

Child Theme aktivieren

Zur Umstellung auf unser Child Theme klicken wir im Administrations-Bereich von WordPress unter Design – Themes auf den Aktivieren-Button des Themes Twenty Fourteen Child. Nach dieser Änderung kann es vorkommen, dass unser Menü nicht mehr (vollständig) angezeigt wird. Zur Behebung des Problems müssen wir in Design – Menüs bei Anordnung im Theme (bei neueren WordPress-Versionen Position im Theme) die Häkchen gemäß den Einstellungen im Parent Theme Twenty Fourteen erneut setzen und das Menü speichern.
Nun können wir unter Design – Editor das Layout unseres Child Themes ändern. Mit folgender Ergänzung in der Datei style.css vergrößern wir beispielsweise die Breite der Hauptbereichs mit dem Inhaltsbereich, der Navigation, usw. von 474 auf 640 Pixel:

...
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
        margin: 0 auto;
        /* max-width: 474px; */
        max-width: 640px;
}
.post-navigation,
.image-navigation {
        margin: 24px auto 48px;
        /* max-width: 474px; */
        max-width: 640px;
        padding: 0 10px;
}
.archive-header,
.page-header {
        margin: 24px auto;
        /* max-width: 474px; */
        max-width: 640px;
}
.contributor-info {
        margin: 0 auto;
        /* max-width: 474px; */
        max-width: 640px;
}
.comments-area {
        margin: 48px auto;
        /* max-width: 474px; */
        max-width: 640px;
        padding: 0 10px;
}
.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
        margin: 0 auto 48px;
        /* max-width: 474px; */
        max-width: 640px;
        padding: 0 30px;
}

2 Kommentare

  1. Hallo Herr Dr. Fabian,
    wissen Sie wo man in der style.css von Twenty Fourteen die individuelle Content-Breite von Seiten im Format:
    – des Standardtemplates (also mit der Inhalt-Seitenleiste mit den Widgets),
    – der Full Width Page (ohne Inhalt-Seitenleiste)
    – und die der Contributor Page (die Autorenpage ist ebenfalls ohne Inhalt-Seitenleiste)
    anpassen kann.
    Vielen Dank im Voraus.
    Viele Grüße
    Mirsad Ahmetović

    1. Hallo Herr Ahmetović,
      im HTML-Element body einer WordPress-Seite ist das verwendete Template als Klasse hinterlegt. Die Klasse des Templates Autoren Seite (Contributor Page) heißt page-template-contributors, die des Templates Seite mit voller Breite (Full Width Page) page-template-full-width.
      Die Seitenbreite können Sie durch Bezug auf die jeweilige Template-Klasse in der Stylesheet-Datei style.css individuell anpassen. Mit der folgenden Ergänzung von style.css setzen Sie z. B. die Breite auf 480 bzw. 320 Pixel:

      ...
      body.page-template-full-width .site-content .entry-header,
      body.page-template-full-width .site-content .entry-content,
      body.page-template-full-width .site-content .entry-summary,
      body.page-template-full-width .site-content .entry-meta,
      body.page-template-full-width .page-content {
              margin: 0 auto;
              max-width: 480px;
      }
      body.page-template-contributors .site-content .entry-header,
      body.page-template-contributors .site-content .entry-content,
      body.page-template-contributors .site-content .entry-summary,
      body.page-template-contributors .site-content .entry-meta,
      body.page-template-contributors .page-content {
              margin: 0 auto;
              max-width: 320px;
      }
      ...
      

      Falls Kommentare für die Seite(n) freigeschaltet sind, müssen Sie noch folgende Zeilen zur Stylesheet-Datei hinzufügen:

      ...
      body.page-template-full-width .comments-area {
              margin: 48px auto;
              max-width: 480px;
              padding: 0 10px;
      body.page-template-contributors .comments-area {
              margin: 48px auto;
              max-width: 320px;
              padding: 0 10px;
      }
      ...
      

Kommentare sind geschlossen.