WordPress Theme anpassen: Angepasstes Child Theme anlegen

Eine Anleitung wie man ein WordPress Theme anpassen kann, indem ein Child Theme angelegt wird.

Ein WordPress-Theme an die eigenen Bedürfnisse anzupassen ist nicht schwer. Die meisten Anpassungen können über die CSS-Dateien des Themes umgesetzt werden. Bei WordPress heisst die CSS Datei style.css, man findet sie auf der obersten Ebene des Theme-Ordners, also in der Regel hier: /wp-content/themes/DEIN_THEME

Das Stylesheet könnt Ihr direkt im Filesystem oder über das WordPress Backend bearbeiten, cleverer ist es allerdings ein neues WordPress Child Theme in einem eigenen Ordner zu erstellen. Ein Child Theme ist ein “Kind” (=child) des Original-Themes, oder auch Parent(=Eltern)-Themes. Der Vorteil: Das Eltern-Theme bleibt wie es ist und wird nicht verändert. Das erhält die Update-Fähigkeit des Themes und man kann das Parent-Theme updaten, ohne dass etwaige Anpassungen überschrieben werden.

Ihr benötigt:

1. Ein FTP Programm um auf den Server zuzugreifen, bspw. das Opensource-Programm FileZilla.
2. Ein Texteditor, mit dem Ihr die Dateien bearbeitet könnt, bspw. das Opensource-Programm Notepad++
3. Grundkenntnisse CSS, findet Ihr bspw. auf www.w3schools.com

Schritt 1: Den Ordner für das Child-Theme anlegen

Zuerst legt Ihr im Verzeichnis wp-content/themes das neue Verzeichnis an. Dieser Ordner liegt auf derselben Ebene wie der Ordner des Parent-Themes. Die Namensvergabe des Ordners ist frei, Leerzeichen und Umlaute sind nicht zulässig.

In dem Ordner wird eine neue, leere Datei namens style.css angelegt. Damit WordPress das Verzeichnis samt style.css als ein neues Child Theme erkennt, fügt dort folgenden Code ein:

/*
Theme Name: sqlbuddy.de Childtheme
Description: sqlbuddy Child Theme
Author: Kai
Author URI: http://www.sqlbuddy.de
Template: twentytwelve
Version: 1.0
Tags:
*/
@import url("../twentytwelve/style.css");
/*hier kommen die neuen CSS-Angaben*/

Schritt 2: Das Childtheme im Backend

Wenn Ihr Euch jetzt in das Backend der WordPress-Seite einloggt, erscheint dort unter Themes das neue Childtheme:

Das sieht etwas grau aus – damit beim Child Theme ein Bild erscheint, muss noch eine Bilddatei in das angepasste Child Theme-Verzeichnis gelegt werden. Die Datei sollte die Größe 300px mal 225px besitzen und den Namen screenshot.png tragen. Ich habe mal willkürlich ein Bild rausgesucht. Jetzt sieht das Ganze wie folgt aus:

Optional Schritt 3: Functions.php erstellen

Bislang war es üblich, das Stylesheet (style.css) des Eltern-Themes über den @import-Befehl im Stylesheet des Child-Themes einzubauen. Das ist zwischenzeitlich aber nicht mehr die optimale Methode. Nach Empfehlung vom WordPress Codex kann die style.css über die functions.php im Child-Theme eingebunden werden.

Die functions.php Datei im Childtheme Verzeichnis erstellen:

<?php
/**
* Theme Name child theme functions and definitions
*/

/*—————————————————————————————————————————*/
/* Include the parent theme style.css
/*—————————————————————————————————————————*/

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Schritt 4: Das WordPress Theme anpassen

Änderungen im CSS des Themes werden nun einfach in die Datei style.css des Childthemes eingetragen.
Um Templates des WordPress Themes weiter anzupassen, kopiert Ihr einfach das Template, das Ihr verändern möchtet, vom Parent-Theme-Verzeichnis in das Child-Theme-Verzeichnis.

Sollen bspw. die  Copyright-Angaben “Proudly Powered by WordPress” in der footer.php-Datei geändert werden,  legt Ihr dazu einfach eine Kopie der footer.php-Datei in das Child Theme-Verzeichnis. Anschließend kann die Datei mit dem Texteditor geöffnet und bearbeitet werden. Die WordPress Seite dazu neu laden/aktualisieren.

Analog dazu können die Template-Dateien header.php, page.php, single.php etc. im Child WordPress Theme angepasst werden. WordPress prüft automatisch für welche Template Dateien ein modifiziertes Template im Child Ordner liegt.

GL&HF