WordPress: mit Child Themes das Standardtheme anpassen

Von Vladimir am 24. Februar 2011 um 12:04

Vielfach bekomme ich Anfragen, wie man Twenty Ten, das Standard-Theme von WordPress, anpassen könnte oder Anmerkungen das man es gerne nutzen würde, aber einem die Schriftfarbe, Abstände oder die Sidebar nicht zusagen würde.

Klar, man kann das Theme an den originalen Template-Dateien anpassen … aber spätestens beim nächsten Theme-Update, sind die Änderungen futsch.

Daher ist es sinnvoll die Änderungen und Anpassungen an Twenty Ten zukunftssicher anzulegen und hier kommt das Prinzip der Child-Themes zum Zuge. Mit Child Themes ("Kinder-Themes") kann man ein minimales Theme erstellen, welches sich auf ein Eltern-Theme "beruft" und wo nur die Abweichungen von dem Eltern-Theme notiert werden. Verstanden? Nö, kein Problem. Hier ein Beispiel.

Nehmen wir mal an, dir sagt das neue Standard-Theme bis auf ein paar kleine Details zu. Anstatt ein ganz neues Theme zu entwerfen oder an den originalen Template-Dateien zu werkeln erstellst du einfach einen neuen Themes-Ordner und benenne ihn einfach in verbesserungen um.

Erstelle innerhalb dieses Ordners eine CSS-Datei mit dem Namen style.css und füge dort folgenden einleitenden Kommentar ein:

/*
Theme Name:     Verbesserungen
Theme URI:      http://www.wpbuch.de
Description:    Verbesserungen an Twenty Ten
Author:         Vladimir Simovic
Author URI:     http://www.perun.net
Template:       twentyten
Version:        0.1
*/

Nun kommen wir zu den Erklärungen der einzelnen Punkte im einleitenden Kommentar:

Theme Name: Name des Child Themes, diese Angabe ist notwendig.
Theme URI: Website des Child Themes, diese Angabe ist optional.
Description: Beschreibung des Kind-Themes, diese Angabe ist optional.
Author URI: Die Website des Autors, diese Angabe ist optional.
Author: Name des Autors, die Angabe ist optional.
Template: Ordner-Name des Eltern-Themes. Achtung: es wird zwischen Groß- und Kleinschreibung unterschieden. Diese Angabe ist notwendig.
Version: Die Versionsnummer des Child Themes.

Direkt hinter dem Kommentar musst du dann die CSS-Datei des Eltern-Theme importieren:

@import url("../twentyten/style.css");

Anschließend kannst du die CSS-Datei mit eigenen Angaben füllen. Lade den Ordner des Child Themes nach /wp-content/themes/ hoch. Wenn du jetzt Design → Themes aufrufst, dann kannst du das Child Theme aktivieren:

Das Child Theme aktivieren

Nach dem gleichen Prinzip habe ich das Standard-Theme von unseren beiden Projekten – Sicherer Babyschlaf und Geld verdienen im Web 2.0 – angepasst. Und so schaut die CSS-Datei (Auszug) des Child-Themes von unserer Website Geld verdienen im Web 2.0 aus:

/*
Theme Name:     Verbesserungen
Theme URI:      http://www.geld2null.de
Description:    Verbesserungen an Twenty Ten
Author:         Vladimir Simovic
Author URI:     http://www.perun.net
Template:       twentyten
Version:        0.1
*/
@import url("../twentyten/style.css");

/* Die Breiten des Titels und Slogans im Kopfbereich anpassen */
#site-title {width: 550px;}
#site-description {width: 22.5em;}

/* Die Sidebar verbreitern*/
#primary    {width: 270px;}
#content    {margin: 0 330px 0 20px;}
#container  {margin-right: -270px;}

Mit diesem Code-Beispiel habe ich zwei Fliegen mit einer Klappe erschlagen. Zum einen hast du eine zusätzliche Orientierung wie die CSS-Datei aufgebaut werden soll und hier werden auch zwei häufige Fragen beantwortet: "wie ändere ich die Breite des Slogans im Header und wie verbreitere ich die Sidebar?"

Anpassungen an anderen Template-Dateien

Das was ich bis jetzt beschrieben habe ist lediglich die Anpassung in der CSS-Datei. Auch WordPress-Anfänger haben damit ein recht mächtiges Werkzeug um das Standard-Theme an ihre Bedürfnisse anzupassen. Aber das ist natürlich nicht alles.

Dir passt die header.php, footer.php oder single.php nicht. Kein Problem. Kopiere die originalen Dateien in das Verzeichnis des Child Themes und passe sie an deine Bedürfnisse an. hast du etwas an der Hauptdatei (index.php) auszusetzen, dann kopiere sie in das neue Verzeichnis und benenne sie in loop-index.php um und dann kannst du auch dort deine gewünschten Änderungen vornehmen.

Will man noch weiter anpassen, dann empfehle ich den Artikel vom Kollegen Frank Bültge.

Hinweis: wenn du in deinem Child-Theme eine functions.php einbaust, dann bedenke, dass im Gegensatz zu den Angaben in der style.css die Angaben in deiner functions.php die Angaben in der functions.php des Eltern-Themes nicht überschreiben. Die Angaben in deiner functions.php werden hinzugefügt, wobei man auch bedenken sollte dass sie sogar noch vor der functions.php des Eltern-Themes geladen wird.

Diesen Artikel weiterempfehlen:

Kategorien:: Kompendium, Tipps
Tags:: wordpress, wordpress-tipps
Beitrag:: Druckvorschau
Kommentare:: Kommentar abgeben oder Kommentare verfolgen

«« Zum vorherigen Beitrag — Zum nächsten Beitrag »»

13 Reaktionen auf diesen Beitrag

Kommentare

Tom sagte am
Donnerstag, 24. Februar 2011 um 13:44 folgendes:

Danke für die wirklich übersichtliche Einführung in der Thema mit dem ich mich noch nie beschäftigt habe. Ist ja eigentlich ganz einfach.
Gibt es eigentlich auch eine einfache Möglichkeit für bestimmte Seiten ein anderes (Child-)Theme auszuwählen? Bspw. dass ein Seitentemplate ein anderes Theme benutzt?
Sonst würde ja noch eine Weiche nach ID oder Kategorie in der page.php bleiben.
Maxi sagte am
Donnerstag, 24. Februar 2011 um 18:30 folgendes:

Vielen dank für diesen Tipp. Genau so etwas habe ich gesucht. Bis jetzt musste ich immer die Änderungen nach jedem WP-Update erneut durchführen.
Dürrbi sagte am
Freitag, 11. März 2011 um 11:01 folgendes:

Ich habe einen ganz komischen Effekt.
Ich habe für einen meiner Blogs ebenfalls ein Child-Theme angelegt und habe, um die functions.php anpassen zu können, die Original ins Child-Theme kopiert.

Rufe ich dann den Blog auf, meckert dieser, dass eine Funktion die bereits deklariert sei in diese im Childverzeichnis befindlichen funtions.php "redeclared" wird.

Dies ist die Original Functions.php, die ich zum Zeitpunkt "nur" kopiert aber noch nicht angepasst habe:

<?php

// Widget Settings

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '<div id="%1$s" class="sidebarbox">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));

function widget_webdemar_search() {
?>
<div class="sidebarbox">
<h3>Search</h3>
<div class="searchform">
<form method="get" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
<input type="text" name="s" id="search" />
<input type="hidden" id="search-submit" value="Search" />
</form>
</div>
</div>

<?php
}

if ( function_exists('register_sidebar_widget') )
register_sidebar_widget(__('Search'), 'widget_webdemar_search');

?>

Und dies ist die Fehlermeldung

Fatal error: Cannot redeclare widget_webdemar_search() (previously declared in /www/htdocs/blafaselblubb/blog/wp-content/themes/cooking-story-10-child/functions.php:19) in /www/htdocs/blafaselblubb/blog/wp-content/themes/cooking-story-10/functions.php on line 27

Ich habe keine Idee, warum dies passiert. Habe die kopierte Datei erstmal wieder gelöscht.
- Dürrbi sagte am
  Montag, 14. März 2011 um 11:59 folgendes:
  
  Kann es sein, dass die functions.php kummulativ (Quelle + Child) verarbeitet wird und man im Child-Theme nur die eigene Ergänzung einträgt?
  - Perun sagte am
    Montag, 14. März 2011 um 12:47 folgendes:
    
    @Dürrbi,
    
    ja, die functions.php wird nicht überschrieben sondern deine Anpassungen kommen hinzu:
    
    Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)
    
    Quelle: WordPress Codex
    - Dürrbi sagte am
      Montag, 14. März 2011 um 14:04 folgendes:
      
      Es ist tatsächlich so.
      Kaum macht man's richtig, schon funktioniert es.
      Danke
Dürrbi sagte am
Dienstag, 15. März 2011 um 07:31 folgendes:

Angenommen mein Parent-Theme hat eine category.php – kann ich über das Child-Theme diese umgehen (weil ich z.B. nur eine archive.php nutzen will)?
Oder bleibt mir nur die Option category.php im Parent-Theme zu löschen bzw. umzubenennen ?
- Thomas Klose sagte am
  Freitag, 18. November 2011 um 17:16 folgendes:
  
  Schade, dass diese Frage noch unbeantwortet ist.
  
  Ich stehe gerade vor der Entscheidung Child-Theme oder das Twent Ten oder Eleven Theme zu kopieren komplett zu überarbeiten.
  
  @Dürrbi: Welche Erfahrungen hast Du gemacht?
  
  Vielen Dank aus Berlin!
  
  Thomas