Wordpress Child Theme erstellen

Seit Wordpress 3.0 ist Twenty Ten das Standard-Theme, es wird bei jedem automatischen Update überschrieben. Alle Anpassungen die gemacht wurden sind dann verloren. Über ein Child-Theme kann das geändert werden.

 

Ein Child-Theme ist ein Theme das die Funktionalität einers anderen Themes erbt. Hier können Ergänzungen oder Änderungen vorgenommen werden. In diesem Artikel wird erklärt, wie ein Child-Theme erstellt wird und was man damit machen kann.

 

Ein Child-Theme zu erstellen ist sehr einfach. Erstellen Sie ein Verzeichnis im Ordner “wp-content/themes” und speichern dort eine “style.css” Datei.

 

Mit ein wenig Kenntnisse in HTML und CSS ist es ganz einfach das Design und das Layout zu ändern, ohne dabei das Haupt-Theme zu editieren. So bleiben die Änderungen nach einem automatischen Update erhalten.

 

Deshalb empfiehlt Wordpress diesen Weg ein Theme zu ändern.

 

Das Child-Theme kann beliebig erweitert werden, durch Einfügen von PHP und Codex für Wordpress Templates und Plugins. Dabei muss nichts im übergeordneten Theme geändert werden.

 

Die style.css ist als einzige Datei erforderlich. Sie enthält die wichtigen Informationen, die Wordpress benötigt und ersetzt die syle.css des Haupt-Themes.

 

Wie bei allen Wordpress-Themes stehen die Informationen oben an erster Stelle. Der einzige Unterschied zu anderen Themes ist der Name “Template”. Dadurch weis Wordpress, dass es einem Haupt-Theme zugeordnet wird.

 

 

Child-Theme style.css

/*

Theme Name: Twenty Ten Child

Theme URI: http: //www.tipps.1st-tec.de

Description: Child theme für das Twenty Ten Theme

Author: Ihr Name

Author URI: http: //www.tipps.1st-tec.de

Template: twentyten

Version: 0.1.0

*/

 

  • Theme Name: Wichtig damit Wordpress das Child-Theme identifizieren kann.
  • Theme URI: Hier kann die Homepage eingegeben werden (optional).
  • Description: Eine Beschreibung des Themes (optional).
  • Author: Name des Autors (optional).
  • Author URI: Autor Homepage (optional).
  • Template: Der Verzeichnis-Name des Haupt-Themes, Groß- und Kleinschreibung beachten. (Durch Ändern des Namens kann mit den Einstellungen einfach zu einem anderen Theme gewechselt werden.)
  • Version: Child-Theme Version

 

 

Das Stylesheet des Child-Themes ersetzt die CSS des Haupt-Themes vollständig, es wird überhaupt kein Style des Haupt-Themes geladen. Will man nur kleine Änderungen in der style.css vornehmen, muss das Stylesheet des Haupt-Themes importiert werden, und anschließend der style geändert werden.

 

Import-Funktion: @import

/*

Theme Name: Twenty Ten Child

Description: Child theme für das Twenty Ten Theme

Author: Ihr Name

Template: twentyten

*/

 

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

 

#site-title a {

    color: #009900;

}

 

  • @import fügt die style.css des Haupt-Themes ein.
  • #site-title a Überschreibt die Regel des Haupt-Themes und definiert eine grüne Farbe des Titels der Seite.

 


Die functions.php des Child-Themes wird zusätzlich vor der functions.php des Haupt-Themes geladen.

 

functions.php

<?php

function favicon_link() {

    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";

}

add_action('wp_head', 'favicon_link');

?>

In diesem Beispiel wird ein Favicon-link zum head hinzugefügt.

 

 

Weil die functions.php des Child-Themes zuerst aufgerufen wird, können bereits vorhandene Funktionen überschrieben werden.

if (!function_exists('theme_special_nav')) {

    function theme_special_nav() {

        // Die Funktion

    }

}

 

 

Wenn Files in die Child-Theme functions.php eingefügt werden, wird die Konstante “STYLESHEETPATH” statt der sonst üblichen "TEMPLATEPATH" verwendet.

require_once( STYLESHEETPATH . '/path/to/file/in/child/theme.php' );

 

 

Die anderen Template-Dateien verhalten sich wie die style.css, sie werden einfach überschrieben. Einfach den gleichen Namen vergeben, dann wird nur die Datei des Child-Themes benutzt.

 

Es können natürlich neue Dateien hinzugefügt werden.

Beispiele: sitemap, home.php, JavaScript etc.