Mit WordPress 3.0 kam das neue Standard-Design Twenty Ten und löste das seit langer Zeit als Standard-Design genutzte und dadurch weit verbreitete Kubrick-Theme ab.

Twenty Ten ist nun also WordPress-mäßig auf dem aktuellen Stand der Entwicklung und bietet viele tolle Dinge, die dem Webmaster das verwalten seines Blogs vereinfachen (so zum Beispiel übers Backend und pro Artikel wechselbare Headergrafiken, wechselbare Hintergrundgrafiken, die neue Menü-Funktion u.v.m.).
Aus diesem Grund bietet es sich ja an, Twenty Ten an die eigenen Bedürfnisse anzupassen und so im eigenen Theme die gewünschten Funktionen auch zur Verfügung zu haben.

Da es durchaus sein kann, dass ein Theme wie Twenty Ten nach und nach aktualisiert wird und immer weiter angepasst und verbessert wird, ist es denkbar schlecht, Änderungen und Anpassungen im Quelltext von Twenty Ten vorzunehmen: Nach jedem Update des Themes wären diese verloren und müssten von Hand wieder eingebaut werden.
Aus diesem Grund (auch) gibt es in WordPress die Möglichkeit, Child Themes anzulegen. Ein Child-Theme benötigt lediglich eine style.css, die auf die Templates des übergeordneten Themes (Parent Theme) verweist. Dadurch werden alle Dateien des Parent Themes genutzt. Diese Dateien lassen sich dann mit gleichnamigen Dateien im Child Theme überschreiben.

Beispiel:

Man möchte im Großen und Ganzen das Twenty Ten Theme benutzen, aber einige Änderungen in der Header-Date und der Footer-Datei vornehmen.
Man legt das Child Theme mit eigenem Ordner und eigener style.css an (wie die aussehen muss, erkläre ich weiter unten) und kopiert sich die header.php und die footer.php in den Ordner des neuen Child Theme. Dieses Child Theme nutzt nun alle Dateien von Twenty Ten, nur eben header.php und footer.php aus dem eigenen Ordner. Diese Dateien werden nun nach Wunsch editiert.
Schon ist es fertig, das eigene Child Theme von Twenty Ten, es kann haargenau so genutzt werden, wie das eigentliche Parent Theme.

Zur Beachtung:

Die Template-Dateien wie header.php, index.php usw. werden von gleichnamigen Dateien im Child Theme ersetzt. Eine leere index.php im Child Theme wird eine leere Startseite erzeugen.
Anders bei den beiden Dateien style.css und functions.php: Sie ersetzen nicht die gleichnamigen Dateien im Parent Theme, sondern ergänzen sie. Legen wir also eine functions.php im Child Theme an, wird dennoch die functions.php des Parent Theme geladen. Wenn wir nun beispielsweise in der functions.php des Child Theme eine neue Sidebar anlegen, wird diese ergänzend zu allen Funktionen des Parent Theme geladen.

Und so geht es:

Hier erkläre ich nun Schritt für Schritt, was getan werden muss, um ein eigenes Child Theme herzustellen. In diesem Tutorial wird der Header verändert (die Grafik soll nach ganz oben kommen, der Titel darunter, wiederum darunter der Slogan, aber auf der linken Seite). Außerdem wird eine weitere Sidebar direkt unter Titel und Slogan angelegt.

• Zuerst legen wir einen Ordner für das Theme an. Nennen wir ihn einfach twenty_ten_child. In diesem Ordner erstellen wir nun eine neue leere Datei mit dem Namen style.css, diese öffnen wir mit einem Quelltext-Editor (nicht Word oder Ähnliches!) und tragen folgendes zuoberst ein:
  /*
Theme Name: twenty ten child
Theme URI: http://example.com/
Description: Child Theme von Twenty Ten
Author: Hans Wurst
Author URI: http://example.com/
Template: twentyten
Version: 0.0.1
Tags: Twenty Ten, Child Theme
*/
@import url("../twentyten/style.css");
@import url("custom.css");
• Diese Datei speichern wir und laden sie auf unseren Webspace in den Ordner /wp-content/themes/. Im Backend können wir nun schon das eben erstellte Child Theme aktivieren. Noch sieht es genau so aus, wie das Standard-Theme. Das werden wir nun ändern.
• Wir kopieren die Datei header.php des Twenty Ten Theme in den Ordner unseres Child Theme. Wir öffnen auch diese Datei mit dem Editor.
• Um die in der Einführung genannten Änderungen vorzunehmen und den Titel und den Slogan unter die Grafik zu rücken, gehen wir nun Schritt für Schritt wie folgt vor:
  1. Wir kopieren Zeile 49 bis Zeile 54 (Strg+C) und fügen sie danach zwischen </div><!– #access –> und </div><!– #masthead –> etwa in Zeile 74 ein (und erschaffen so die Zeilen 75-80):
     
  2. Wir löschen die eben kopierten Zeilen 49 bis 54 und speichern die Datei. Sie sollte nun etwas so aussehen:
     
  3. Wir laden die modifizierte header.php in den Ordner unseres Child Theme. Wenn wir das Theme nun aktivieren, ist der Blog-Titel samt Slogan bereits unter der Grafik. Der Slogan allerdings befindet sich noch immer rechts.
  4. Wir erstellen wieder eine leere Datei im Ordner des Child Theme, diesmal nennen wir sie custom.css (diese Datei wird bereits durch die style.css eingebunden, siehe oben) und öffnen sie im Editor.
  5. Wir fügen folgende Zeilen in die leere Datei ein:
     #site-description {
clear: left;
float: left;
font-style: italic;
margin: 14px 0 18px 0;
width: 220px;
}
     Danach speichern wir auch diese Datei und laden sie in den Theme-Ordner. Der Slogan steht nun rechts unter dem Titel.
• Nun wollen wir eine weitere Sidebar direkt unter dem Slogan einfügen. Wir gehen dafür wie folgt vor:
  1. Wir erstellen im Ordner des Child Theme die Datei functions.php und öffnen sie im Editor.
  2. Wir tragen folgenden Code in die Datei ein:
     <?php
register_sidebars( 1,
array(
'name' => 'Header_Sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
?>
     Danach speichern wir die Datei.
  3. Nun öffnen wir nochmals die header.php und fügen zwischen </div><!– #masthead –> und </div><!– #header –> (ziemlich am Ende der Datei) folgende Zeile ein:
     <?php if ( !dynamic_sidebar( 'header_sidebar' ) ) : ?><?php endif; ?>
  4. Diese beiden Dateien laden wir nun ebenso in den Theme-Ordner auf dem Webspace.
• Das Theme ist fertig. Titel und Slogan befinden sich nun unter der Grafik, darunter befindet sich eine weitere Sidebar, die im Widget-Menü mit Widgets bestückt werden kann.

Soviel zum Beispiel eines Child Theme von Twenty Ten unter WordPress 3.0. Die oben vorgenommenen Änderungen dienen hier nicht der Schönheit, sondern eher Vorführungszwecken. Gestalten darf nun jeder selber nach Lust und Laune.

Falls es jemand haben möchte: Hier kann man das oben beschriebene Child Theme herunterladen!

Viel Erfolg und Vergnügen!