Heute gibt es hier mal wieder ein Tutorial für WordPress und BuddyPress, Thema ist dieses Mal (wie man der Überschrift ja schon entnehmen kann) das Erstellen von Childthemes für WordPress oder BuddyPress, der Schwerpunkt liegt aber dieses Mal ganz klar bei der Einbindung der Stylesheets und der ganze Artikel hat eine eher erklärende Form.

Ein ausfürlicheres Tutorial über das Ersetzen und Verändern von Dateien in Childthemes habe ich vor einiger Zeit bereits verfasst, wer daran Interesse hat, sollte auch diesen Artikel lesen. Ebenfalls steht dort, wieso man Child-Themes nutzen sollte, anstatt ein existierendes Theme zu kopieren und einzelne Dateien anzupassen.

Um die Frage vorweg zu nehmen: BuddyPress ist ein Plugin für WordPress. Es erstellt auf Basis des Blogsystems ein komplettes soziales Netzwerk und nutzt dafür eigene Template-Tags und Funktionen. Die BuddyPress-Themes funktionieren aber genau wie die ganz normalen WordPress-Themes, daher gilt dieses Tutorial eben sowohl für BuddyPress als auch für WordPress.

Ich setze für dieses Tutorial eine funktionierende WordPress-Installation voraus, am besten Version 3.2.1 oder höher. Ebenso sollte das Theme, auf welches aufgebaut werden soll, bereits installiert sein. Los geht’s!

Zuerst erstellen wir einen Ordner für unser Theme. Da ich das Theme hier “Tutorial-Theme” nenne, heißt mein Ordner der Einfachheit halber “tutorial-theme”. In diesem Ordner legen wir eine leere Textdatei mit dem Namen style.css an. Das ist die einzige zwingend erforderliche Datei in einem Child-Theme. In diese Datei tragen wir mit einem Texteditor folgende Zeilen ein:
/*
Theme Name: Tutorial-Theme
Theme URI: http://wemaflo.net
Description: Theme für ein Tutorial auf wemaflo.net
Version: 1.0
Author: Florian Mai
Author URI: http://wemaflo.net/
Template: twentyeleven
Tags: child theme, tutorial
*/
Das ist alles. Diese Datei speichern wir und laden den Ordner samt Inhalt in den Theme-Ordner unserer WordPress-Installation. Rufen wir nun das Designmenü im WordPress-Backend auf, finden wir dort bereits unser neues Theme. Wenn wir es aktivieren, sehen wir allerdings im Frontend nur eine weiße Seite. Wir müssen die Stylesheets des Parent-Theme (in diesem Fall Twenty Eleven) noch in unser neues Child-Theme einbinden.
Die Codex-Seiten von WordPress und BuddyPress  sagen noch aus, dass das mittels @import in der style.css des Child-Themes geschehen soll, das allerdings gilt als überholt und hat Nachteile:

• Der Seitenaufbau verlangsamt sich, da der Webbrowser ein Stylesheet nach dem anderen lädt.
• Um eine Versionsnummer an das Stylesheet zu hängen (um das Caching zu optimieren), bedarf es einiger Tricks.

Geeigneter ist das Link-Tag, mit welchem ja schon die style.css standardmäßig eingebunden wird. Kommen weitere Link-Tags hinzu, lädt der Webbrowser alle gleichzeitig, was den Seitenaufbau beschleunigt.

WordPress bringt hier eine Funktion namens wp_enqueue_style mit, welche weitere Stylesheets per Link-Tag im WordPress-Head anhängt. Und um diese soll es nun gehen.

Wir benötigen für unser Child-Theme also noch zwei Stylesheets: Das des Parent-Themes und das Stylesheet unseres Child-Themes, in welchem alle CSS-Änderungen und Ergänzungen vorgenommen werden sollen.
Dieses legen wir nun unter dem Namen “tutorial-theme.css” an und speichern es im Ordner des Themes. Ebenso legen wir die Datei functions.php an und öffnen diese wieder mit dem Texteditor. Dort tragen wir folgende Zeilen ein:

<?php
//Twentyeleven-Stylesheet laden
function load_twentyeleven_css() {
wp_enqueue_style('parent-theme', get_bloginfo('template_url').'style.css', '', '', 'all');
}
add_action('wp_print_styles', 'load_twentyeleven_css', 10);
//Tutorial-Theme-Stylesheet laden
function load_tutotial_theme_css() {
//Version fuers Caching
$version = '1.0';
wp_enqueue_style('tutorial-theme', get_bloginfo('stylesheet_directory').'tutorial-theme.css', '', $version, 'all');
}
add_action('wp_print_styles', 'load_tutorial_theme_css', 20);
?>

Hier die Erklärungen dazu:
Die obere Funktion “load_twentyeleven_css” hängt das Stylesheet von Twentyeleven per Link-Tag an. Ich habe die Priorität 10 gewählt, damit dieses Stylesheet an den (bisherigen) Schluss gesetzt wird und alle anderen überschreibt.
Die zweite Funktion “load_tutotial_theme_css” lädt dann das Stylesheet unseres Child-Themes “tutorial-theme.css”. Hier habe ich die Priorität 20 gewählt, damit es wiederum an die letzte Stelle geschoben und zuletzt ausgeführt wird, also alle anderen Angaben überschreibt. Dies erlaubt uns, Anweisungen aus dem Stylesheet von Twenty Eleven zu überschreiben, ohne !important nutzen zu müssen.

Achtung: Wer ein Child-Theme vom BuddyPress-Default-Theme ab Version 1.3 macht, muss die erste Funktion weglassen und nur den Code ab “//Tutorial-Theme-Stylesheet laden” einfügen. Das BuddyPress-Theme nutzt selbst bereits eine Funktion mit wp_enqueue_style.

Laden wir nun diese functions.php in den Ordner des Themes, sehen wir einerseits statt der weißen Seite das normale Twenty Eleven Theme (da wir ja noch nichts verändert haben), andererseits können wir im Quelltext des Blogs sehen, dass zuerst die style.css unseres Child-Theme, danach die style.css von Twenty Eleven und schließlich die tutorial-theme.css unseres Child-Theme eingebunden wird.

In der tutorial-theme.css können nun alle gewünschten Anweisungen überschrieben oder neue definiert werden, um das Parent Theme nach den eigenen Wünschen anzupassen.

Ich hoffe, ich konnte dem einen oder anderen mit diesem Tutorial helfen. Solltet ihr Fragen haben oder meinen Text nicht verstehen, schreibt einfach einen Kommentar, ich beantworte gerne Fragen und werde den Text natürlich auch anpassen, wenn er unverständlich ist.