Ein Child-Theme für WordPress erstellen
2. Dezember 2017 WordPress 6

WordPress

Was ist ein Child-Theme?

Ein Child-Theme ist ein Ableger eines übergeordneten Themes. Es erbt dessen Eigenschaften.  Man kann dann Änderungen vornehmen, ohne dass das Original-Theme selbst verändert werden muss. WordPress empfiehlt den Einsatz von Child-Themes.

Was sind die Vorteile von Child-Themes?

  • Die Dateien des Original-Themes bleiben unverändert.
  • Anfänger können sich an Theme-Entwicklung ausprobieren, ohne Gefahr zu laufen, Schäden am eigentlichen Theme zu verursachen.
  • Änderungen, die mit einem Child-Theme erstellt wurden, gehen bei einem Update des Original-Themes nicht verloren.
  • Durch den eigenen Child-Theme-Ordner behält man den Überblick über die tatsächlich geänderten Dateien.
  • Einfache funktionale Erweiterungen durch eigene functions.php

Ein Child-Theme erstellen

In einem ersten Schritt muss unter /wp-content/themes/ ein eigenes Verzeichnis für die Theme-Dateien erstellt werden. Es empfiehlt sich ein aussagekräftiger Name: Ein Verzeichnis für ein Child des Themes rowling könnte z. B. rowling-child heissen.

Anschließend müssen in diesem neuen Verzeichnis mindestens zwei Dateien erstellt werden:

style.css

/*
Theme Name: Rowling Child
Description: Ein Rowling Child-Theme
Author: Rüdiger Reichelt, Subreality.de
Author URI: https://www.subreality.de
Template: rowling
Version: 1.0
Tags:
*/

Das Beispiel ist entsprechend anzupassen. Unter Template ist der Verzeichnisnamen des übergeordneten Themes anzugeben.

functions.php

<?php
/* Child Theme */
/* *********** */
 
function my_theme_enqueue_styles() {
 
	$parent_style = 'parent-style';
 
	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-style',
		get_stylesheet_directory_uri() . '/style.css',
		array( $parent_style ),
		wp_get_theme()->get('Version')
		);
}
 
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
?>

WordPress Child-Theme

WordPress Child-Theme

Optional: screenshot.png

Wenn eine Bilddatei namens screenshot.png hochgeladen wird, verwendet WordPress diese im Design-Bereich bei der Anzeige der vorhandenen Themes. Die empfohlene Bildgröße ist 1200px mal 900px.

Anschließend kann das Theme aktiviert werden.

So funktioniert es: Änderungen am Theme vornehmen

Style-Anpassungen erfolgen in der style.css-Datei im Child-Verzeichnis. Idealerweise kopiert man die relevanten Passagen des Originals-Styles und ändert diese ab. Wenn das nicht funktioniert, hilft oft die !important-Anweisung. Hier ein Beispiel:

.header {
	padding:0px 0px 25px 0px !important;
	background-color:#fff;
	}

Das Schlüsselwort !important verändert die natürliche Wertigkeit der Style-Angabe: Mit !important setzt man die höchste Priorität.

Wer nun beispielsweise eine eigene footer.php erstellen möchte, lädt sich genau diese Datei aus dem Verzeichnis des Original-Themes herunter und nimmt die gewünschten Veränderungen vor. Anschließend wird sie ins Child-Verzeichnis hochgeladen. WordPress verwendete dann diese modifzierte Datei und nicht die übergeordnete Version.

Neue Seiten- oder Archiv-Template-Dateien usw. werden ebenfalls im Child-Verzeichnis abgelegt.